[Android] Coordinatorlayout에 대해 알아보자

Coordinatorlayout에 대해 알아보자

1.AppbarLayout
단, api level 24이상에서는 support:design library가 포함되어이 있어서 바로
CoordinatorLayout을 추가해도 되지만 그 이하에서는 gradle 파일에 아래 dependency를 추가해 준다.


CoordinatorLayout은 frameLayout처럼 parent view 역할을 한다.
이제 이 안에 적절한 view들을 넣어줄 차례인데, 가장 일반적으로 많이 쓰이는 Appbar를 한번 추가해보자.
참고로 Appbar는 api level 11부터 지원하는 Actionbar와 api level 21부터 지원하는 Toolbar를 포괄적으로 부르는 용어이다.


CoordinatorLayout은 다음의 2가지 기본사용 사례를 위해 만들어졌다.
1.애플리케이션에서 최상위의 decor View로써 사용
2.자식 뷰들간의 특정한 인터렉션을 지원하는 컨테이너로써 사용

CoordinatorLayout의 자식뷰에 Behavior를 지정하는 방식으로, 하나의 부모 안에서 여러 다른 인터렉션을 지원할 수 있고,
자식뷰들간에도 서로 인터렉션 할 수 있다.
Behavior는 슬라이딩 드로어나 스와이프 해제 액션 등 뷰의 다양한 움직임이나 애니메이션에 따른 상호작용을 구현하기 위해사용

CoordinatorLayout의 자식들은 anchor를 가질 것이다. 이 anchor는 일반적으로 다른 뷰를 가리키며,
뷰의 id값으로 표시된다. anchor는 반드시 CoordinatorLayout하위의 자손 뷰중 하나의 아이디여야 하지만,
고정된 자손뷰가 아닐 수도 있다.

Behavior

CoordinatorLayout 구현의 가장 핵심 개념.
자식뷰에 Behavior가 지정되어 있으면, CoordinatorLayout은 그것을 토대로 부모뷰 - 자식뷰 / 자식뷰 - 자식뷰의 소통을 구현한다.
CoordinatorLayout에서 자식뷰와 소통해야 하는 부분(인터렉션, 뷰 배치 등)에서 Behavior를 사용하는 코드를 확인할 수 있다.

Anchor

Anchor는 자식뷰들간의 연관성을 표현하는 개념이다.
CoordinatorLayout안에서 어떤 자식뷰의 배치나 인터렉션이 있을 때, 연관된(Anchor로 등록된)자식뷰들에게 상태변화를 알려주도록 구현하기 위해 사용된다.
연관성을 표현하기 위해 내부적으로 그래프를 이용한다.

LayoutParams

CoordinatorLayout은 다른 몇몇 레이아웃처럼, 자신에게 특화된 LayoutParams 정적 클래스를 가지고 있다.
LayoutParams클래스는 Behavior와 anchor 정보를 가지고 있어서, 부모가 요청할 때마다 그 정보를 넘겨주도록 되어있다.

CoordinatorLayout 기본 사용법

1.build.gradle에 추가
2.CoordinatorLayout을 지정할 레이아웃 xml의 루트 레이아웃으로 지정.
3.CoordinatorLayout의 자식중 behavior를 지정할 자식에게 app:layout_behavior속성을 지정해 준다.
해당 속성은 String 타입으로, 지정할 Behavior의 패키지를 포함한 클래스명을 넣어야한다.

app:layout_behavior="@string/appbar_scrolling_view_behavior"

<!-- strings.xml -->

<resources>
    <string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>
</resources>

 

 

 

/**
  상단 뷰들 앱바 레이아웃 붙이고, 리싸이클러뷰 스크롤 되면서 하단 뷰는 스크롤 하면 사라지는 레이아웃
**/

<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            >

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/ivLogo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/ic_launcher_foreground"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/layoutMenu"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="11dp"
                    android:foreground="?attr/selectableItemBackground"
                    android:padding="5dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@drawable/ic_launcher_foreground"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                </androidx.constraintlayout.widget.ConstraintLayout>


                <androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/layoutAlarm"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:foreground="?attr/selectableItemBackground"
                    android:padding="5dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@+id/layoutMenu"
                    app:layout_constraintTop_toTopOf="parent">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@drawable/ic_launcher_foreground"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                </androidx.constraintlayout.widget.ConstraintLayout>


            </androidx.constraintlayout.widget.ConstraintLayout>

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/keycolor"
                >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="200dp"
                    android:text="뷰페이저 데이터"
                    android:gravity="center"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    />


            </androidx.constraintlayout.widget.ConstraintLayout>


            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:background="#F19129"
                >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="탭 데이터"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    />


            </androidx.constraintlayout.widget.ConstraintLayout>
        </com.google.android.material.appbar.AppBarLayout>


        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rvCategory"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fadingEdgeLength="0dp"
            android:overScrollMode="never"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />


        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_gravity="bottom"
            android:background="#289382"
            app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
            >

        </androidx.constraintlayout.widget.ConstraintLayout>


    </androidx.coordinatorlayout.widget.CoordinatorLayout>

============= 스크롤시 상단 툴바 줄어드는 레이아웃 

<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rvCategory"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fadingEdgeLength="0dp"
            android:overScrollMode="never"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />


        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:fitsSystemWindows="true"
                android:layout_gravity="bottom"
                app:contentScrim="?attr/colorPrimary"
                android:background="@color/keycolor"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <androidx.appcompat.widget.Toolbar
                    android:layout_width="match_parent"
                    android:layout_height="100dp"
                    app:layout_collapseMode="parallax"
                    android:layout_gravity="top"
                    >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="200dp"
                        android:gravity="center"
                        android:text="뷰페이저 데이터"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                </androidx.appcompat.widget.Toolbar>


                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="100dp"
                    android:layout_gravity="bottom"
                    android:background="#F19129">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="탭 데이터"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />


                </androidx.constraintlayout.widget.ConstraintLayout>

            </com.google.android.material.appbar.CollapsingToolbarLayout>




        </com.google.android.material.appbar.AppBarLayout>





        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_gravity="bottom"
            android:background="#289382"
            app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
            >

        </androidx.constraintlayout.widget.ConstraintLayout>


    </androidx.coordinatorlayout.widget.CoordinatorLayout>

 

 

 

참조 :

http://areemak.blogspot.com/2018/04/blog-post.html

[Android] Coordinatorlayout 배워보기 #1 - AppbarLayout