clipChildren 개념 및 실습

도입

이번 포스팅에서는 clipChildren 속성에 대해 알아볼 예정이다.

---

개념

clipChildren는 자식 View가 그려지는 것에 대한 제한을 설정할지 말지에 대한 속성이다. 

기본으로 true(자식 View가 그려지는 것에 대한 제한 O)으로 설정되어 있다. 

https://developer.android.com/reference/android/view/ViewGroup#attr_android:clipChildren

공식 문서에서 처럼 스케일이 커지는 애니메이션처럼 View가 ViewGroup을 넘어가는 경우 유용하다.

---

실습

Step1. 스케일이 커지는 애니메이션 설정

private val scaleAnimation: Animation = ScaleAnimation(
    1f,
    ANI_SCALE,
    1f,
    ANI_SCALE,
    ScaleAnimation.RELATIVE_TO_SELF,
    0.5f,
    ScaleAnimation.RELATIVE_TO_SELF,
    0.5f
).apply {
    duration = ANI_DURATION
}
 
fun onClickImage(v: View) {
    targetIv.run {
        clearAnimation()
        isSelected = !isSelected
        startAnimation(scaleAnimation)
    }
}

Step2. clipChildren 설정

<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="@color/colorPrimary"
    tools:context=".MainActivity">
 
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">
 
        <ImageView
            android:id="@+id/target_iv"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:onClick="onClickImage"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/selector_image" />
 
    </androidx.constraintlayout.widget.ConstraintLayout>
 
</androidx.constraintlayout.widget.ConstraintLayout>

 

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:drawable/btn_star_big_on" android:state_selected="true" />
    <item android:drawable="@android:drawable/btn_star_big_off" android:state_selected="false" />
</selector>

여기서 주의해야할 점은 설정을 ViewGroup02이 아닌 ViewGroup01에 해야한다. 

ViewGroup01의 children인 View01가 그려지는 것에 대한 제한을 풀어주기 위함이기 때문이다.

---

스크린 샷

AS-IS	TO-BE

 

#clipChildren #android:clipChildren #앱개발 #모바일앱개발 #어플개발