[Android] Clip 속성 알아보기: ClipChildren, ClipToOutline, ClipToPadding

안드로이드에서 UI 작업을 하다 보면 View의 경계를 다뤄야 할 일들이 종종 있는데, 이때 Clip 네이밍이 들어간 속성 (ClipChildren, ClipToOutline, ClipToPadding) 들이 도움을 준다.

---

ClipChildren

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/fl_children"
        android:layout_width="250dp"
        android:layout_height="200dp"
        android:background="@color/blue">

        <TextView
            android:layout_width="150dp"
            android:layout_height="200dp"
            android:layout_marginTop="100dp"
            android:background="@color/red"
            android:text="Children" />
    </FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

안드로이드에서 기본적으로 자식 View는 부모 View의 경계를 넘어갈 수 없다. 그래서 위의 xml 내용에서 TextView의 높이 100dp는 렌더링 되지 않고 잘리게 된다.

 

ClipChildren은  자식 View가 자신의 경계를 벗어날 수 있도록 해준다. 기본값은 true로 적용을 위해 false값을 지정해야한다. 주의할점은 xml에서 부모 View가 아닌 최상단 View에 적용을 해줘야 한다.

// xml
android:clipChildren="false"

// activity
val main = findViewById<ConstraintLayout>(R.id.main)
main.clipChildren = false

---

ClipToOutline

    <FrameLayout
        android:id="@+id/fl_outline"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_round_12">

        <TextView
            android:id="@+id/tv_outline"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/gray"/>
    </FrameLayout>

xml에 정의된 내용을 보면 FrameLayout은 background로 테두리를 둥글게 표시되도록 처리했다. 하지만 TextView의 너비가 match_parent로 적용되어 FrameLayout의 영역을 덮어씌워져서 둥근 테두리를 가리게된다.

 

ClipToOutline은 내가 background로 설정한 View의 경계선을 기준으로 내부 View의 영역을 잘라낸다. 기본값은 false이며 적용을 위해 true로 설정해야 한다.

// xml
android:clipToOutline="true"

// activity
val flOutline = findViewById<FrameLayout>(R.id.fl_outline)
flOutline.clipToOutline = true

 

---

ClipToPadding

        <ScrollView
            android:id="@+id/sv_padding"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="@color/gray"
            android:paddingTop="50dp"
            app:layout_constraintTop_toBottomOf="@id/btn_padding"
            app:layout_constraintBottom_toBottomOf="parent">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="400dp"
                    android:background="#FF9800"
                    android:text="끝까지 스크롤 해보세요" />
            </LinearLayout>
        </ScrollView>

Padding은 View의 내부 공간을 결정하기 때문에 스크롤 같은 동작은 Padding 영역을 유지하며 수행하게 된다. 위 xml의 경우 paddingTop:"50dp"로 인해 그 공간만큼을 차지된 상태로 스크롤이 수행될 것이다.

 

ClipToPadding은 이러한 상황에서 주로 쓰인다. 내부 콘텐츠가 Padding 영역을 무시하게 되며, 실제 View의 끝 영역까지 도달하게끔 한다. 기본값은 true이며 적용을 위해 false로 설정해야 한다.

// xml
android:clipToPadding="false"

// activity
val svPadding = findViewById<ScrollView>(R.id.sv_padding)
svPadding.clipToPadding = false