[안드로이드] CoordinateLayout 을 이용한 활용방법들을 알아보자 (feat. AppBarLayout)

안녕하세요! 개발자 파쿠입니다  :)

 

오늘은 어플을 사용하다 보면 한번쯤은 접해 보셨을

Flexble한 UI에 대해 알아보고자 하는데요,

 활용만 잘 한다면 편리하고 센스넘치는 UI를 만들수 있습니다!

 

예제

 하단에 있던 (HOME) LayoutGroup이 스크롤시 상단 고정되는 모습

 

0 ) Gradle에 라이브러리 추가하기

 

CoordinateLayout, AppBarLayout, 등 모두 기본적인 라이브러리에 추가되어있지만,

api 23 이하의 버전에서는 따로 추가를 해주셔야 합니다.

    implementaion("com.android.support:support-annotations:${최신버전}")
    implementaion("com.android.support:design:${최신버전}")

 

1) 기본적인 구조 살펴보기

fragment_main.xml

<androidx.coordinatorlayout.widget.CoordinatorLayout
    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"
        android:stateListAnimator="@null"
        android:elevation="0dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

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


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

	<ScrollView
   		android:layout_width="match_parent"
    	android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

가장 기본적인 구조입니다. 

CoordinateLayout 이 부모 레이아웃이 되며, 레이아웃 내에서
AppBarLayout 내에

CollarpsingToolbarLayout 이 들어가며,  -> 툴바 영역

ScrollingView 를 상속받는 뷰가 하단에 들어가게됩니다. -> 스크롤 영역

 

2) AppBar에 조건걸기

 

CollarpsingToolbarLayout영역에 간단하게 scrollFlag 를 변경해주는것으로 여러가지 조건을 걸수있는데요, 

여러가지 scrollFlag 속성에 대해 알아보도록 하겠습니다!

 

scroll -> 설정시 스크롤시 해당 영역까지 스크롤됩니다. (거의 항상 포함됩니다) 

예시)  app:layout_scrollFlags = "scroll| enterAlways"

 

	상단으로 스크롤시	하단 스크롤시
enterAlways	AppBarLayout 영역포함, 숨겨짐	즉시, 보여짐
enterAlwaysCollapsed	AppBarLayout 영역포함, 숨겨짐	최상단 도달시, 보여짐
exitUntilCollapsed	AppBarLayout 영역 제외, 숨겨짐	최상단 도달시, 보여짐

 

즉 상단에 예제로 첨부한 뷰에는 scroll | exitUntilCollapsed 속성이 설정이 들어가있다는걸 알수있습니다!

 

3) ScrollingView 에 속성추가

 

뷰 하단에 들어가는 ScrollView에는 AppBarLayout 와 호환할수 있게끔 속성을 추가해 줘야하는데요,

app:layout_behavior="@string/appbar_scrolling_view_behavior"

간단히 뷰 내에 해당 속성을 추가해주는것 만으로 처리할수 있습니다.

 

4) 노하우 및 팁

 

처음 AppBarLayout 를 사용했을떄 기본적으로 지정되어있는 배경색과 스크롤시 생기는 그림자 때문에 골치아팠던 적이있는데,

android:stateListAnimator="@null"

속성을 추가해주는것으로 해결됬었다.

 

AppBarLayout영역에 숨겨지는 부분, 고정될 부분이 모두 필요하다면,

CollapsingToolbar에 scroll | exitUntilCollapsed 속성을 추가한 뒤,

숨겨지는 뷰를 CollapsingToolbar 내에,고정될 뷰를 AppBarLayout 의 직계로 추가하면 된다.

 

한번에 툴바 영역까지 확장시키려면 AppBarLayout에 .setExpanded() 함수를 사용하면 된다.

?.setExpanded(false, true)