[Kotlin] RelativeLayout, FrameLayout, ConstraintLayout

[Kotlin] RelativeLayout, FrameLayout, ConstraintLayout 

 

<RelativeLayout>

순서대로 배치하지 않고 개발자가 원하는 위치대로 배치하는 것

상대 뷰의 위치를 기준으로 정렬하는 레이아웃이다.

 

상대 뷰의 어느 쪽에 맞춰서 정렬할지를 정하는 속성

 

- android:layout_above : 기준 뷰의 위쪽에 배치

- android:layout_below : 기준 뷰의 아래쪽에 배치

- android:layout_toLeftOf : 기준 뷰의 왼쪽에 배치

- android:layout_toRightOf : 기준 뷰의 오른쪽에 배치

 

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
    	android:id="@+id/testImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:src="mipmap/ic_launcher" />
    <Button
    	android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HELLO"
        android:layout_toRightOf="@id/testImage"/>
</RelativeLayout>

 

 

상위 레이아웃을 기준으로 맞춤 정렬하는 속성

 

- android:layout_alignParentTop : 부모의 위쪽에 맞춤

- android:layout_alignParentBottom : 부모의 아래쪽에 맞춤

- android:layout_alignParentLeft : 부모의 왼쪽에 맞춤

- android:layout_alignParentRight : 부모의 오른쪽에 맞춤

 

- android:layout_centerHorizontal : 부모의 가로 방향 중앙에 맞춤

- android:layout_centerVertical : 부모의 세로 방향 중앙에 맞춤

- android:layout_centerInParent : 부모의 가로/세로 중앙에 맞춤

 

<Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="button"
     android:textSize="32dp"
     android:layout_toRightOf="@id/icon_back"
     android:layout_alignBottom="@id/icon_back"
     android:layout_alignParentRight="true"/>

 

 

< FrameLayout >

 

FrameLayout은 겹쳐서 배치하는 레이아웃으로, 카드를 쌓듯이 뷰를 추가한 순서대로 위에 겹쳐서 계속 출력하는 레이아웃이다. 대부분 뷰의 표시 여부를 설정하는 visibility 속성을 함께 사용한다.

 

ex) 카카오톡은 4개의 레이아웃이 겹쳐져 있어 하단 버튼을 누를 때마다 겹쳐진 레이아웃 중 하나를 보입니다.

 

 

< ConstraintLayout >

ConstraintLayout : 계층 구조로 배치한다. 모듈을 하나 만들 때마다 디폴트로 생성되는 Layout이다. androidx에서 제공하는 라이브러리로 상대 위치로 배치하는 RelativeLayout과 비슷하지만 더 많은 속성을 제공한다. 용수철같은 것이 있어 위치를 지정해줄 수 있다.

 

적당한 위치를 지정할 수 있다.

컨텐츠끼리 연결시킬 수 있다.