ConstraintLayout

ConstratintLayout 이란 부모 뷰 그룹 안의 다른 요소들과의 상대적인 제약조건을 설정함으로써 화면에 배치 되도록 하는 레이아웃을 의미

ConstraintLayout을 사용하면 레이아웃이 중첩하지 않도록 복잡한 레이아웃을 만들 수 있음

ConstraintLayout의 제약 유형

1. Relative positioning(상대적 위치지정) : 다른 요소와 수평, 수직방향의 상대적 배치를 위한 속성
2. Margins (여백) : 여백 설정을 위한 속성
3. Centering positioning (중앙 위치지정) : 중앙 배치를 위한 속성
4. Circular positioning (원형 위치지정) : 다른 요소와 원 형태의 상대적 배치를 위한 속성
5. Visibility behavior (가시적 동작) : visibility 속성에 따른 동작 속성
6. Dimension constraint (크기 제약) : 뷰의 크기를 위한 속성
7. Chains (연결) : 수평 또는 수직방향으로 연결된 뷰를 위한 속성
8. Virtual Helpers objects (가상의 도움 객체들) : 뷰의 배치에 도움을 줄 수 있는 객체 속성
9. Optimizer (최적화) : 제약조건 최적화 속성

준비

build.Gralde에서 의존성 주입

xml
dependencies {
	implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha07")
	// To use constraintlayout in compose
	implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha07")
}

위젯 정렬 방식 지정

앵커를 사용하여 위젯들 간의 정렬 규칙 정할 수 있음

1. 제약 조건 걸기

   제약 레이아웃에서 버튼을 생성하면 위 , 아래, 왼쪽, 오른쪽에 동그라미로 표시된 연결점을 확인할 수 있음 연결점은 **핸들(Side Constraint Handle)**이라고 불리며, 마우스 커서로 잡아서 조절할 수 있음

   예를 들어 위로 잡아당기면 부모 레이아웃이 타깃이 되어 부모 레이아웃의 위쪽 벽면과 연결이 됨. 연결점과 타깃이 연결되면 연결선이 만들어지고 연결점은 파랗게 표시됨

   만약 버튼을 가운데에 배치하려면 위, 아래, 왼쪽, 오른쪽 연결점을 모두 화면의 네 벽면에 연결하면 됨

2. 바이어스 (Bias) 설정하기

   Attributes의 Constraint Widget을 보면, 동그라미 안에 숫자 50이 들어가 있음. 이는 화면에서 얼마나 치우쳐 있는 지 알 수 있는 바이어스임. 바이어스를 통해 비율을 설정할 수 있음

3. 뷰의 크기 변경

   뷰의 크기를 바꾸려면, 모서리를 끌어당기면 됨

4. 가이드라인 사용

   가이드라인은 여러 개의 뷰를 일정한 기준 선에 정렬할 때 사용함

   Add Horizontal Guideline을 추가하면 가로로 점선이 생김

   가이드라인을 x dp 만큼 움직이고 버튼의 연결점을 가이드라인에 맞추면 화면의 위에서 x 만큼 떨어진 곳에서 화면의 중앙에 버튼이 위치하게 됨

   그리고 버튼을 3개로 추가하고 아래쪽 제약 조건을 없애면 x dp 만큼 떨어진 거리에서 버튼을 정렬할 수 있게 됨

실행 결과

간단하게 프로필 이미지와 이름 설명이 있는 ui 구성

1. Image 부분 왼쪽 상단에 고정

xml
<ImageView
        android:id="@+id/profile_image"
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:layout_margin="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" 
  />

1. 이름 부분 프로필 이미지 끝 부분에 맞춰 시작점 지정 및, 상단 부분 프로필과 맞춰줌

xml
<TextView
        android:id="@+id/name_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:textSize="150px"
        android:text="사용자 이름"
        app:layout_constraintStart_toEndOf="@id/profile_image"
        app:layout_constraintTop_toTopOf="@id/profile_image" 
 />

1. 설명 부분 시작점, 끝 점을 이름과 동일하게 맞춰주고, 상단점을 이름 하단 점과 맞춰줌

xml
<TextView
        android:id="@+id/profile_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:textSize="150px"
        android:text="사용자 설명"
        app:layout_constraintEnd_toEndOf="@id/name_text"
        app:layout_constraintStart_toStartOf="@id/name_text"
        app:layout_constraintTop_toBottomOf="@id/name_text"
 />

1. 가이드라인을 액티비티 기준 50%에 줌

xml
<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"
/>

1. 버튼을 중앙에 오게 하기 위해 가이드라인 하단점에 상단점을 맞추고, 시작, 끝을 부모에 맞춤

xml
<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:text="버튼"
 />

결과