Android in A..Z - CoordinatorLayout (기본)

CoordinatorLayout

View간의 상호작용을 처리하기 위한 View이다. CoordinatorLayout이 Child View의 Behavior를 수신하여 다른 Child View에 Behavior를 전달한다. 각 Child View는 미리 정의된 Behavior를 사용하거나 새롭게 만든 Behavior를 사용하여 수신된 Behavior로 특정 작업을 수행할 수 있다.

• Scroll시 AppBarLayout 변경
• SnackBar생성시 FloatingActionButton 위치 변경

Developer 정의

CoordinatorLayout is a super-powered FrameLayout.
CoordinatorLayout is intended for two primary use cases:
1. As a top-level application decor or chrome layout
2. As a container for a specific interaction with one or more child views

---

XML

최상위 Layout을 CoordinatorLayout으로 설정해야 한다.

=> CoordinatorLayout이 Child View의 Behavior를 수신하여 다른 Child View들에게 Behavior를 전달하기 때문이다.

<?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">

    <data>
        <import type="android.view.View" />

        <variable
            name="movie"
            type="com.taetae98.coordinatorlayout.data.Movie" />

        <variable
            name="onFavorite"
            type="View.OnClickListener" />
    </data>

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:background="@color/black"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar_layout"
                app:collapsedTitleGravity="center"
                app:collapsedTitleTextAppearance="@style/CollapsingToolbarLayoutTitle"
                app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutTitle"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <com.google.android.material.appbar.MaterialToolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:title="@{movie.title, default=Title}"
                    app:titleTextColor="@color/white" />
                <ImageView
                    android:id="@+id/poster"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:contentDescription="@string/poster"

                    app:error="@{@drawable/ic_error}"
                    app:imageUrl="@{movie.imageUrl}" />
            </com.google.android.material.appbar.CollapsingToolbarLayout>
        </com.google.android.material.appbar.AppBarLayout>

        <androidx.core.widget.NestedScrollView
            android:id="@+id/nested_scroll_view"
            android:fillViewport="true"
            app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <TextView
                    android:id="@+id/description"
                    android:layout_margin="10dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@{movie.description, default=Description}"
                    android:textColor="@color/white"
                    android:textSize="15sp" />
                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/recyclerView"
                    app:spanCount="2"
                    app:layoutManager="androidx.recyclerview.widget.StaggeredGridLayoutManager"
                    android:nestedScrollingEnabled="false"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>
        </androidx.core.widget.NestedScrollView>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            app:layout_behavior="com.taetae98.coordinatorlayout.FloatingActionButtonScrollBehavior"
            app:tint="@color/white"
            app:backgroundTint="@color/red"
            app:layout_anchor="@id/recyclerView"
            android:layout_margin="10dp"
            android:onClick="@{onFavorite}"
            android:visibility="@{movie.favorite ? View.GONE : View.VISIBLE}"
            app:layout_anchorGravity="bottom|end"
            android:src="@drawable/ic_favorite"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>

---

Anchor

View의 위치를 겹치서 표현하거나 ConstraintLayout처럼 다른 View에 위치시킬 수 있다. CoordinatorLayout의 Child View에 생기는 속성이다. FloatingActionButton을 RecyclerView에 붙였다.

• app:layout_anchor : 겹치거나 위치시킬 View의 ID
• app:layout_anchorGravity : 위치를 지정할 수 있다. |(파이프)를 통해 여러개 선택가능

---

Git (예제코드)

github.com/KangTaeJong98/Example/tree/main/Android/CoordinatorLayout

KangTaeJong98/Example