[Android/Kotlin] 안드로이드 학습 2.3 - Layout Editor을 이용한 ConstraintLayout

이번에 다룰 내용은 ConstraintLayout이다. 내가 안드로이드를 시작했을 때 가장 처음 배웠던 레이아웃이고, 그만큼 많이 활용된다.

 

Android Kotlin Fundamentals: 02.3 ConstraintLayout using the Layout Editor  |  Android Developers

 

 

ConstraintLayout

ConstraintLayout는 ViewGroup 유연한 방식으로 자식 뷰의 위치와 크기를 조정할 수 있는 기능이다. ConstraintLayout을 사용하면 중첩된 뷰 그룹 말고 평면 뷰 계층으로 크고 복잡한 레이아웃을 만들 수 있다. ConstraintLayout을 빌드하려면 레이아웃 편집기를 사용하여 제약 조건을 추가하고 드래그앤드랍할 수 있다. XML을 편집할 필요가 없다.

 

Constraint

제약 조건 은 두 UI 요소 간의 연결 또는 정렬이다. 각 제약 조건은 한 뷰를 다른 뷰, 상위 레이아웃 또는 보이지 않는 가이드라인에 연결하거나 정렬한다. ConstraintLayout에서 적어도 하나의 수평 및 수직 제약 조건을 정의하여 뷰를 배치합니다.

위 사진의 1: 수평(Horizontal) 제약 조건, 2: 수직(Vertical) 제약 조건

 

위의 사진처럼 Toolbar에서 기본 여백을 변경할 수 있다. Default Margin을 16dp로 설정하면, 새로운 제약이 이 margin으로 생성되게 된다. 즉, 새로운 제약을 잡아줄 때 margin을 추가하지 않아도 된다.

 

 

View Inspector

뷰 인스펙터는 Attribute 창의 일부이다. 뷰 인스펙터에서 제약, 제약 조건 유형, 제약조건 편향 및 뷰 여백과 같은 특성을 조정할 수 있다.

 

* 뷰 인스펙터는 ConstraintLayout 안에 있는 뷰에서만 사용가능하다.

 

Constraint bias

제약 편향, Constraint bias는 수평 및 수직 축을 따라 뷰 요소를 배치한다. 기본적으로 뷰는 편향이 50%인 두 제약 조건 사이의 중앙에 있다.

편향을 조정하려면 뷰 인스펙터에서 bias slider를 드래그할 수 있다 . 바이어스 슬라이더를 드래그하면 축을 따라 보기의 위치가 변경된다.

 

 

 

TextView의 제약 조건 및 여백 조정

뷰 인스펙터에서 제약 조건 화살표의 의미를 살펴보자. 이곳에서 제약의 유형을 설정할 수 있다.

 

TextView 스타일 지정

fontFamily를 roboto로 설정, 리소스에 사용할 값들을 넣는다. TextView에 사용할 스타일 지정도 해준다.

 

 

두 번째 TextView 추가

Palette 창에서 TextView를 디자인 편집기 미리보기로 직접 드래그. box_one_text 아래에 텍스트 뷰를 왼쪽 여백에 맞춰 배치.

저런 식으로 상하좌우의 제약을 다른 뷰와 잡아 걸어줄 수 있음.

두 번째 텍스트의 속성은 이렇게 설정해준다.

이 경우 텍스트 보기의 높이와 너비에 고정 크기(130dp)를 할당했다. 안드로이드에서는 뷰가 모든 장치와 레이아웃 에서 항상 고정된 크기를 가져야 하는 경우에만 높이와 너비에 고정 크기를 할당하기를 권장한다.

중요: 실제 앱을 개발할 때는 가능하면 UI 요소의 높이와 너비에 대해 유연한 제약 조건을 사용하세요. 예를 들어 match_constraint 또는 wrap_content를 사용합니다. 앱에 고정된 크기의 UI 요소가 많을수록 다양한 화면 구성에 대한 레이아웃 적응도가 떨어집니다.

 

 

TextView 뷰 체인 만들기

chain이란 양방향 제약조건으로 서로 연결된 뷰의 그룹이다. 체인 내의 뷰는 서로 수직적, 혹은 수평적으로 배치될 수 있다.

 

Head of the chain

체인의 첫 번째 뷰를 체인 헤드 라고 한다 . 체인의 헤드에 설정된 속성은 체인의 모든 뷰를 제어, 위치 지정 및 배포한다. 수평 체인의 경우 가장 왼쪽 뷰가 헤드이고, 수직 체인의 경우 맨 위 뷰가 헤드이다. 위의 두 다이어그램 각각에서 "A"를 체인 헤드라 할 수 있다.

 

Chain style

체인 스타일은 체인 뷰가 펼쳐지고 정렬되는 방식을 정의한다. 체인 스타일 속성을 지정하거나, 가중치를 추가하거나, 뷰에 편향을 설정하여 체인의 스타일을 지정할 수 있다.

 

• Spread: 기본 스타일. 여백을 고려한 후 뷰가 사용 가능한 공간에 고르게 분산.

Spread

• Spread inside: 첫 번째 및 마지막 뷰는 체인의 각 끝에 있는 상위 뷰에 연결. 나머지 뷰는 사용 가능한 공간에 고르게 분산.

Spread inside

• Packed: 여백을 고려한 후 뷰가 함께 패킹됨. 이후 체인 헤드 뷰의 바이어스를 변경하여 전체 체인의 위치 조정 가능

Packed

• Weighted: layout_constraintHorizontal_weight 또는 layout_constraintVertical_weight 속성에 설정된 값을 기반으로 모든 공간을 채우도록 보기의 크기가 조정됨. 예를 들어, 세 개의 뷰 A, B, C가 포함된 체인을 상상해 보자. 뷰 A는 가중치 1을 사용하고 뷰 B와 C는 각각 가중치 2를 사용함. 뷰 B와 C가 차지하는 공간은 뷰 A의 두 배이다.

Weichted

 

<chain에 chain style을 설정하는 방법>

1. 체인 헤드에 layout_constraintHorizontal_chainStyle또는 layout_constraintVertical_chainStyle 속성을 설정 (디자인 편집기)

2. XML 코드에 체인 스타일을 추가

// Horizontal spread chain
app:layout_constraintHorizontal_chainStyle="spread"

// Vertical spread inside chain
app:layout_constraintVertical_chainStyle="spread_inside"

// Horizontal packed chain
app:layout_constraintHorizontal_chainStyle="packed"

 

Chain 추가

 

 

TextView에 Click Handler 추가

 

style에서 배경색을 white로 변경. 사용자가 뷰를 클릭하면 색이 표시되도록 설정

<item name="android:background">@android:color/white</item>

 

Learn more

Udacity course:

• Developing Android Apps with Kotlin

Android developer documentation:

• Build a Responsive UI with ConstraintLayout
• ConstraintLayout
• Build a UI with Layout Editor
• Understanding the performance benefits of ConstraintLayout

Videos:

• ConstraintLayout Deep Dive (Android Dev Summit ‘18)