CoordinatorLayout과 AppbarLayout을 이용하여 위쪽에 걸리는 느낌나는 스크롤 만들

1. CorrdinatorLayout 설명

1) FrameLayout같이 좌표를 자유롭게 지정 가능하다.

2) android sdk 24.1.0(Nougat)에 포함되어 있다.

3) 한 개의 parent 아래 포함된 여러 개의 child view를 behavior라는 것을 이용해서 다양한 애니메이션 효과를 표현해 낼 수 있다.

 

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

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

기본적으로 제공되는 behavior

• bottomSheetBehavior 
• FloatActionButtonBehavior
• SwipeDismissBehavior
• ViewOffsetBehavior
  • HeaderScrollingViewBehavior
    • AppBarLayout.ScrollingViewBehavior
  • HeaderBehavior
    • AppBarLayout.Behavior

출처 : http://dktfrmaster.blogspot.com/2018/03/coordinatorlayout.html

[안드로이드] CoordinatorLayout 기본 동작 원리

사용방법 :

1. 기능을 사용할 영역까지 CoordinatorLayout으로 감싼다.
2. CoordinatorLayout의 안쪽에 AppBarLayout을 넣는다.
3. 그 안쪽에 scrollFlags를 설정한 레이아웃을 넣는다.(나의 경우 RelativeLayout을 사용했다. 준 옵션은 scroll|enterAlways|snap)
4. 위에 설정한 레이아웃 아래에 걸리는 느낌이 들게 할 레이아웃을 추가한다. 여기엔 scrollFlags를 설정하지 않는다. 그래야 이 레이아웃이 위쪽까지 스크롤됐을 때 사라지지 않고 걸리는 느낌을 만들 수 있다.(AppBarLayout의 안쪽)
5. 리스트처럼 스크롤가능한 layout을 AppbarLayout의 바깥 CoordinatorLayout의 안쪽에 넣는다(여기에 app:layout_behavior="@string/appbar_scrolling_view_behavior" 가 추가되어 있어야 스크롤을 인지하여 위쪽에 설정해 놓은 옵션들이 반응할 수 있다.

*scrollFlags에 설정한 옵션들 설명

• scroll : 스크롤 이벤트와 직접 연관되어 스크롤 된다.
• enterAlways : 아래로 스크롤할 때마다 View가 아래로 내려와 보인다.(이 설정이 없으면 맨 아래 스크롤이 끝날 때까지 안보임)
• snap : 이 옵션이 설정된 뷰의 스크롤중에 멈추면 중간 지점을 기준으로 가장 가까운 쪽으로 이동된다.(중간지점에서 위쪽에 더 가깝게 스크롤 위치가 멈추면 가장 위쪽으로 이동, 반대로 아래쪽에 가까우면 가장 아래로 이동)

예제 코드)

   <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:id="@+id/main_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/appbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <RelativeLayout
                    android:id="@+id/layout_title"
                    android:layout_width="match_parent"
                    android:layout_height="60dp"
                    android:background="#323145"
                    app:layout_scrollFlags="scroll|enterAlways|snap">

                <ImageView
                        android:id="@+id/iv_btn_menu"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="10dp"
                        android:clickable="true"
                        android:foreground="?android:attr/selectableItemBackground"
                        android:background="@drawable/ic_menu" />

                <TextView
                        android:id="@+id/tv_title"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="15dp"
                        android:layout_toRightOf="@+id/iv_btn_menu"
                        android:text="제목"
                        android:textColor="#ffffff"
                        android:textSize="20dp" />
            </RelativeLayout>
           <com.google.android.material.tabs.TabLayout
                   android:id="@+id/tabs"
                   android:layout_width="match_parent"
                   android:layout_height="60dp"
                   android:background="#ffffff"
                   app:tabPaddingEnd="-1dp"
                   app:tabPaddingStart="-1dp"
                   app:tabIndicator="@null"/>

        </com.google.android.material.appbar.AppBarLayout>
        <FrameLayout
                android:id="@+id/fl_main"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">

        </FrameLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

위와 같이 설정하면

layout_title이라는 id의 RelativeLayout은 스크롤이 적용되고 아래쪽 tabLayout은 적용되지 않아 탭은 위쪽으로 스크롤했을 때 사라지지 않고 RelativeLayout만 사라진다. 때문에 걸리는 느낌이 난다.