07-5 계층 구조로 배치 - ConstraintLayout

ConstraintLayout은 안드로이드 플랫폼이 아니라 androidx에서 제공하는 라이브러리이다. 이를 이용하는 방법은 다음과 같다.

 

먼저 build.gradle 파일의 dependencies에 다음처럼 implementation을 선언해야 한다.(실제로는 자동으로 추가된다.)

// constraintlayout 사용을 위한 빌드 설정
implementation 'androidx.constraintlayout:constraintlayout:2.1.1'

또한 프로젝트를 만들때 자동으로 만들어지는 레이아웃 XML 파일을 보면 기본 레이아웃이 ConstraintLayout으로 설정된다. 물론 수정할 수 있다.

카카오톡 화면을 만들어보자

 

 

레이아웃 편집기에서 레이아웃 구성하기

ConstraintLayout은 뷰를 상대위치로 배치하는 RelativeLayout과 비슷하지만 더 많은 속성을 제공한다. 그런데 그 많은 속성을 직접 작성하는 대신 마우스 클릭으로 레이아웃을 구성하도록 레이아웃 편집기를 제공한다.

• 팔레트(pallette): 레이아웃을 구성할 수 있는 다양한 뷰와 뷰 그룹
• 컴포넌트 트리(Component Tree): 레이아웃에서 구성요소의 계층 구조 표시
• 툴바(Toolbar): 레이아웃 속성 설정
• 디자인 편집기(Design editor): 디자인 뷰나 청사진 뷰 작업 영역
• 속성(Attributes): 선택한 뷰의 속성을 지정
• 보기 모드 (View mode):  레이아웃 모드 선택(Code(코드), Split(분할), Design(디자인) 중 선택)
• 화면조절(Zoom and pan control): 확대/축소 및 화면 이동 조절

레이아웃 편집기는 팔레트에서 뷰를 선택해 마우스로 끌어서 작업 창(디자인 편집기)에 놓는 방법으로 화면을 구성한다. 그리고 속성 창에서 뷰의 세부 속성을 설정한다.

 

 

이미지 추가하기

레이아웃 XML 파일을 디자인 모드로 열고, 팔레트에서 ImageView 항목을 마우스로 끌어서 작업창에 놓는다.

리소스를 선택하는 대화창이 나타나면 준비된 이미지 목록에서 이미지를 선택한다.

방금 추가한 이미지 뷰를 선택하고 속성의 id값을 "imageView"로 지정한다. 

(레이아웃 편집기에서 뷰를 선택하면 속성 창에서 선택한 뷰의 속성을 추가하거나 변경할 수 있다.)

그리고 layout_width, layout_height 속성값을 모두 50dp로 지정해준다.

 

그런데 ConstraintLayout은 이름 그대로 뷰를 화면에 출력할 때, id, layout_width, layout_height 이외에 제약(constraints) 조건을 지정해줘야 한다. 부모 영역에서 어디에 어느 정도의 여백으로 출력해야 하는지, 또는 다른 뷰를 기준으로 상대 위치를 설정해 줘야 한다.

속성 창 중간에 레이아웃(layout) 영역이 있는데 +버튼으로 뷰의 여백(margin)을 설정한다.

 

제목 추가

팔레트에서 TextView를 마우스로 끌어서 작업창에 놓는다.

속성 창에서 id 값을 "title View", text값을 "카카오톡"으로 입력한다. 

그리고 이미지 뷰 오른쪽에 16dp 여백으로 텍스트 뷰를 출력하고자 한다. 이 작업은 작업창에서 할 수 있따.

작업창에서 특정 뷰를 클릭해서 선택한 다음, 왼쪽 동그라미버튼을 이미지뷰에 끓어서 놓으면, 이미지 뷰의 어느 쪽에 제약을 지정할 것인지 선택하는 메뉴가 나온다. (start to imageView start, start to imageView end)

여기서는 이미지 뷰 오른쪽(end)에 여백을 두고 텍스트 뷰를 지정하고 싶으므로 후자를 선택한다.

그러면 텍스트 뷰의 속성창에서 레이아웃 영역에 왼쪽 여백을 지정할 수 있는 컨트롤이 나온다. 여기서 16을 지정하면 이미지 뷰 오른쪽에서 16dp만큼 여백을 두고 텍스트 뷰가 표시된다.

 

여기까지 텍스트 뷰의 가로 방향 위치만 설정한 것이고 세로방향 위치는 지정하지 않았으므로 위쪽에 붙어서 출력된다.

결국 ConstraintLayout을 이용하려면 뷰의 가로세로 방향으로 제약을 설정해줘야 하는 것이다.

 

다시 작업창에서 텍스트 뷰를 클릭하고 위쪽 동그라미 버튼을 끌어서 이미지 뷰의 위쪽 동그라미 버튼에 놓는다.

그리고 속성 창의 레이아웃 영역에서 이미지 뷰의 위를 기준으로 텍스트 뷰를 세로로 얼마만큼 내려서  출력해야 하는지 설정한다. 이미지와 텍스트 뷰의 위쪽이 정렬되게 출력하고자 하면 0을 입력한다.

 

 

메시지 추가

비슷한 방법으로 메시지를 출력하는 텍스트 뷰를 추가한다.

TextView를 끌어서 작업창에 놓고, 텍스트 뷰를 클릭한 후 왼쪽 동그라미를 끌어서 이미지 뷰에 놓은 다음 'start to imageView end'를 선택한다.

다시 텍스트 뷰를 클릭한 후 아래쪽 동그라미를 끌어 이미지 뷰의 아래쪽 동그라미에 놓는다. 

그리고 속성 창에서 id, text 속성값을 각각 "messageView"와 "기기 로그인 알림"으로 설정한 후 레이아웃 영역에서 왼쪽 여백을 16, 아래쪽 여백을 0으로 지정한다.

 

 

날짜 추가

마지막으로 날짜를 출력하고자 TextView를 추가한다. 

속성 창에서 id를 "dateView", text값을 "9월 7일"이라고 입력한다.

그리고 상대 위치를 지정하기 위해서 레이아웃 영역에서위쪽과 오른쪽에 각각 16이라고 지정한다.

작업창에서 다른 뷰에 끌어놓기로 위치를 지정하지 않은 이유는 날짜를 출력하는 텍스트 뷰의 위치는 부모 창을 기준으로 하려고 의도한 것이다. 즉, 부모 창에서 위쪽 16, 오른쪽 16만큼 여백을 두고 출력된다.

 

 

XML 코드로 확인하기

지금까지 레이아웃 편집기로 간단한 화면을 구성하는 방법을 알아보았따. 이렇게 구성한 XML 코드는 <Code> 모드에서 확인할 수 있다. 레이아웃 파일을 열었을 때 화면 오른쪽 위를 보면 <Code>, <Split>, <Design> 버튼이 보인다. 이 버튼으로 편집 모드를 선택할 수 있다.