[Android] parent의 영역을 벗어나서 UI를 그려보자 - clipChildren

 

 

 안드로이드에서는 기본적으로 View를 그릴 때 그릴 수 있는 영역이 제한되어 있다. 보통 parent가 가진 영역만큼 View를 그릴 수 있다. 하지만 개발하다 보면 parent의 영역을 벗어나게끔 그리고 싶을 때가 생긴다. 이럴 때 clipChildren 옵션을 사용하면 가능해진다. 예시를 통해 알아보자.

 

 

 위와 같은 화면이 있다고 해보자. 검은색 레이아웃 안에 빨간색 View가 있는 상태이다. 검은색 레이아웃을 벗어나기 위해 marginTop 옵션을 줘서 밑으로 내린 상태다. 위의 레이아웃 아래와 같다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="#000000"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">

        <View
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#ff0000"
            android:layout_marginTop="250dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 검은색의 레이아웃은 전체 길이가 300dp로 주었고, 빨간색의 VIew는 marginTop을 250dp를 주었다. 따라서 50dp 정도를 검은색 레이아웃을 벗어나서 그려지길 원했다. 하지만 위의 사진처럼 검은색의 영역을 벗어나는 범위에 대해서는 그려지지 않는다. 이는 clipChildren의 기본 값이 true이기 때문이다. clipChildren이 true라는 건, ViewGroup의 child가 parent 범위 안에서 그려지도록 제한하는 것을 뜻한다.

 

 따라서 검은색의 레이아웃을 벗어나서 빨간색 View를 그리기 위해선 clipChildren의 값을 false로 주어야 한다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    android:background="#ffffff"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="#000000"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">

        <View
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#ff0000"
            android:layout_marginTop="250dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 

 이때 주의할 점은, 빨간색 View를 가지고 있는 검은색의 clipChildren 값을 조정하는 게 아닌, 검은색을 가지고 있는 흰색 레이아웃의 값을 조정해야 한다는 점이다. 

 

 

 이번에는 흰색과 검은색 사이에 하늘색의 레이아웃을 하나 더 추가해본다. 그리고 흰색에는 clipChildren의 값을 설정해주지 않고, 하늘색에는 clipChildren의 값을 false로 지정해준다. 빨간색의 View가 하늘색을 넘어서 흰색 레이아웃 위에까지 그려질 수 있게끔 height를 조절한다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:background="#1976d2"
        android:clipChildren="false"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:background="#000000"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent">

            <View
                android:layout_width="100dp"
                android:layout_height="200dp"
                android:background="#ff0000"
                android:layout_marginTop="250dp"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"/>
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 위의 사진처럼 빨간색이 흰색 위로 50dp 정도 그려져야 하는데 짤렸다는 걸 볼 수 있다. 당연하겠지만, 하늘색은 clipChildren을 false로 줘서 그려질 수 있게 허용해줬지만, 흰색은 허용해주지 않아서 이와 같은 결과가 나오게 되었다.

 

 

출처 : developer88.tistory.com/98