Constraint Layout(제약 조건 레이아웃) #2

이전 포스팅에서는 Constraint Layout(제약 조건 레이아웃)을 왜 사용하고, 사용하기 위해선 무엇을 해야되는지를 보았다. 

이번 포스팅에서는 Constraint Layout(제약 조건 레이아웃)을 사용하는 방법 및 시각적 디자인 방법을 배워보자.

Constraint Layout 사용법

1. Activity를 Constraint Layout(제약 조건 레이아웃)사용하는 액티비티로 바꿔보자!

Constraint Layout을 사용하기 위해선 XML 파일에 LinearLayout, Frame Layout 등등이 아닌 Constraint Layout으로 지정을 해야한다.

먼저 Android Studio에서 꾸미고자 하는 xml파일을 누르고 Text모드로 변경한다. 그리고 다음의 코드를 입력한다.

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> </android.support.constraint.ConstraintLayout>

2. Design 탭을 누른다.

팔레트 영역 :원하는 뷰들을 선택해서 화면에 끌어놓아 배치할 수 있다.

구성요소 트리 : 현재 레이아웃의 뷰들의 구성요소를 보여준다.

메뉴 , 앱바, 툴바 : 앱을 실행시켰을 시 메뉴, 앱바, 툴바가 위치하는 부분이다.

버튼 위치부분 : 앱을 실행시킬 때 버튼이 위치하는 부분

속성창 : 뷰들의 속성을 볼 수 있는 창이다.

3. BluePrint 방식으로 바꾼다.

BluePrint 방식은 각각의 뷰가 어떻게 배치될지 잘 보여주는 전개도입니다.

Design 방식은 실제로 액티비티가 어떻게 보여지는지를 보여줍니다.

4. 배치를 원하는 뷰를 드래그를 해서 원하는 위치에 배치한다.

하지만, 아직 끝난게 아닙니다.  (뷰에 제약 조건을 주는 방법)

원하는 곳에 배치를 했다고해서 아직 끝난게 아닙니다. Constraint Layout에서는 모든 뷰들은 최소한 2개의 제약조건 (가로 제약조건, 세로 제약조건)이 필요합니다. 제약조건을 주어서 스튜디오가 실제로 어떻게 배치시킬지를 기억합니다.

1. 뷰에  가로 제약조건을 줍니다.

먼저 뷰를 클릭하고 뷰의 왼쪽 동그라미를 드레그하여 왼쪽 벽까지 붙입니다.

2. 뷰에 세로 제약조건을 줍니다.

똑같이 뷰의 위쪽 동그라미를 드래그하여 위쪽 벽까지 붙입니다.

아까도 말했듯이 Constraint Layout의 모든 뷰는 최소 가로 제약과 세로 제약이 꼭 있어야합니다.

만일 가로 제약이 없다면 뷰는 시작엣지에 정렬될 것이고, 세로 제약이 없다면 화면 위에 정렬될 것입니다.

Default Constraint를 주는 방법 (기본 지정 제약 범위를 설정합시다.)

보통 Default Constraint(기본 지정 제약 범위)는 8dp입니다. 이는 제약을 지정 했을 때 뷰와 뷰사이의 거리가 8dp 간격으로 띄어짐을 의미합니다. 이 기본 제약 범위를 변경하는 방법은 Default Margin 창을 이용합니다.

1. Default Margin 창을 눌러 원하는 간격 값을 입력합니다.

<그림 6>

2. 그리고 새로운 뷰를 배치하고 뷰에 제약을 주어 원하는 제약을 받았는지 확인합니다.

<그림 7번> 처럼 뷰로 다른 뷰의 제약을 걸 수가 있습니다. 위의 그림에서는 뷰2의 왼쪽 동그라미를 가지고 뷰1의 오른쪽에 붙이고, 뷰2의 위쪽 동그라미를 가지고 상단에 붙였습니다. (현재 간격은 24dp로 설정 되어 있는 것을 확인할 수가 있습니다.)

이번 포스팅에서는 뷰에 제약 조건을 주는 방법을 배워보았습니다. 다음 포스팅에서는 뷰의 속성창에 대해서 자세히 알아볼 것이고 뷰의 크기와 정렬,  배치 비율을 배울 것입니다.