삽질 - Android ConstraintLayout Group

Android에서 ConstraintLayout의 Group 기능을 사용하면 쓸데없는 ViewGroup을 줄일 수 있다.

ex) 한번에 여러 View의 Visible를 관리할 때 새로운 ViewGroup을 만들어서 ViewGroup하나로 관리할 수 있지만 쓸데없는 ViewGroup이 늘어나며 성능에 영향을 줄 수 있다. 하지만 ConstraintLayout의 Group 기능을 사용할 경우 Group에 Tag 또는 Id로 View를 매핑하여 쉽게 관리할 수 있다.

 

Group기능을 제대로 사용하기 위해선 매핑되는 View들의 Id가 정의되어야 한다.

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>
        <variable
            name="postingViewModel"
            type="com.taetae98.deco.viewmodel.PostingViewModel" />
        <variable
            name="onNavigateUp"
            type="android.view.View.OnClickListener" />
        <variable
            name="onProduct"
            type="android.view.View.OnClickListener" />
        <variable
            name="onText"
            type="android.view.View.OnClickListener" />
        <variable
            name="onNext"
            type="android.view.View.OnClickListener" />
        <variable
            name="isMoving"
            type="Boolean" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layout"
        android:background="@color/black"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.constraintlayout.widget.Group
            android:id="@+id/moving_group"
            app:visibility="@{isMoving ?? false}"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:constraint_referenced_tags="moving"/>

        <com.google.android.material.imageview.ShapeableImageView
            style="@style/Theme.Deco.Posting.Image"
            android:id="@+id/image_view"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:imageURI="@{postingViewModel.imageUri}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:src="@drawable/image_simple" />

        <View
            android:background="@drawable/bg_gradient_up_black20_down_transparent"
            android:layout_width="0dp"
            android:layout_height="92dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

        <View
            android:background="@drawable/bg_gradient_up_transparent_down_black20"
            android:layout_width="0dp"
            android:layout_height="67dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

        <View
            android:id="@+id/moving_background"
            android:background="@drawable/bg_gradient_up_transparent_down_black70"
            android:layout_width="0dp"
            android:layout_height="114dp"
            app:layout_constraintTag="moving"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

        <com.google.android.material.textview.MaterialTextView
            android:text="@string/message_click_the_button_to_tag_the_product_information."
            android:textColor="@color/white"
            android:textAppearance="@style/Theme.Deco.SubHead5"
            android:drawableStart="@drawable/ic_round_widgets_14"
            android:drawableTint="@color/white"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginVertical="15dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

        <androidx.appcompat.widget.AppCompatImageButton
            android:id="@+id/navigation_button"
            android:onClickListener="@{onNavigateUp}"
            android:src="@drawable/ic_navigate_up"
            android:tint="@color/white"
            android:padding="10dp"
            android:layout_marginVertical="11dp"
            android:layout_marginHorizontal="3dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintHorizontal_chainStyle="spread_inside"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/product_button"/>

        <androidx.appcompat.widget.AppCompatImageButton
            android:id="@+id/product_button"
            android:onClickListener="@{onProduct}"
            android:src="@drawable/ic_round_widgets_24"
            android:tint="@color/white"
            android:padding="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="6dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@id/navigation_button"
            app:layout_constraintEnd_toStartOf="@id/text_button"/>

        <androidx.appcompat.widget.AppCompatImageButton
            android:id="@+id/text_button"
            android:onClickListener="@{onText}"
            android:src="@drawable/ic_round_text_fields_24"
            android:tint="@color/white"
            android:padding="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="6dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@id/product_button"
            app:layout_constraintEnd_toStartOf="@id/next_button"/>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/next_button"
            android:onClickListener="@{onNext}"
            android:text="@string/next"
            android:textColor="@color/white"
            android:textAppearance="@style/Theme.Deco.SubHead3"
            android:minWidth="0dp"
            android:minHeight="0dp"
            android:padding="10dp"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:backgroundTint="@android:color/transparent"
            android:layout_marginVertical="10dp"
            android:layout_marginHorizontal="2dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@id/text_button"
            app:layout_constraintEnd_toEndOf="parent"/>

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/trash_image_view"
            android:src="@drawable/icon_trash"
            app:layout_constraintTag="moving"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginVertical="40dp"
            app:layout_constraintVertical_bias="1"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

id를 정의하지 않은 View는 Group의 기능을 제대로 사용할 수 없다.