[Kotlin] How To Place Overlapping using Frame Layout

최근에 View의 배치를 하는데, 아래와 같은 부분이 있었습니다.

겹쳐서 보여지는 레이아웃

왼쪽에 보이는 "테"라는 TextView와 "30일"일이라는 TextView가 겹쳐져야 하는데 이를 위해서 어떻게 할 수 있을까요?

답은 FrameLayout에 있습니다.

 

1. 관련 소스

<FrameLayout
    android:layout_width="45dp"
    android:layout_height="45dp"
    >
    <!-- "테" TextView -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="테"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:background="@android:color/holo_red_dark"
        />

    <!-- "30일" TextView -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:text="30일"
        android:gravity="center"
        android:layout_gravity="bottom"
        android:textColor="@android:color/white"
        android:background="@color/balck"
        />
</FrameLayout>

※ 처음 아이콘 처럼 되기 위해서는 style이나 background 등을 조정하여 맞춰주어야겠지만, 겹쳐 보이기 위한 최소한의 위치 조정을 위와 같이 적용하면 되기 때문에 적용하지 않았습니다.

 

2. 속성 설명

속성	내용
layout_width	해당 View의 너비 (match_parent인 경우 부모 View인 FrameLayout 너비 만큼 지정)
layout_height	해당 View의 높이 (match_parent인 경우 부모 View인 FrameLayout 높이 만큼 지정)
text	TextView에 입력될 문자
gravity	View 내 정렬 (center인 경우 가로/세로 중앙 정렬)
textColor	글자 색상
background	TextView의 배경 (여기에서는 색상으로 지정했지만, 이미지 나 shape 등으로 조정하여 사용 가능)
layout_gravity	상위 레이아웃인 FrameLayout 내 해당 View의 위치 (bottom인 경우 FrameLayout 기준 하단에 배치)