앱바 사용하기
머티리얼 라이브러리란?
구글의 머티리얼 디자인은 모바일과 데스크톱, 그리고 그밖에 다양한 장치를 아우르는 일관된 애플리케이션 디자인
지침입니다.
머터리얼 라이브러리를 사용하려면 빌드 그래들 파일의 dependencies 항목에 선언해 줘야 합니다.
머터리얼 라이브러리 선언
implementation 'com.google.android.material:material:1.4.0'스튜디오의 4.1버전 이후부터는 자동으로 머터리얼 라이브러리가 선언됩니다.
앱바 레이아웃 – 화면 위쪽 영역 꾸미기
앱바란 화면 위쪽의 꾸밀 수 있는 영역을 의미합니다. 앱바를 이용해 화면 위쪽 영역의 크기만 늘릴 수도 있지만 메뉴를 출력 하는 툴바 포함할 수도 있습니다.
머터리리얼 라이브러리에서는 이러한 앱바를 구현하는 데 도움을 주는 앱바 레이아웃을 제공합니다. 앱바 레이아웃도 하나의 뷰이므로 레이아웃 XML 파일에 등록합니다.
앱바 레이아웃에 툴바 포함하기
<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">
<!-- 툴바 포함 -->
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</com.google.android.material.appbar.AppBarLayout>위쪽 영역 확장하기
<com.google.android.material.appbar.AppBarLayout
(... 생략 ...)
android:layout_height="242dp">
</com.google.android.material.appbar.AppBarLayout>이미지 넣기
<com.google.android.material.appbar.AppBarLayout ... 생략 ... >
<androidx.appcompat.widget.Toolbar ... 생략 ... >
<ImageView ... 생략 ... >
</com.google.android.material.appbar.AppBarLayout>코디네이터 레이아웃 – 뷰끼리 상호 작용하기
코디네이터 레이아웃은 머터리얼이 아닌 제트팩의 androidx라이브러리에서 제공하지만, 앱바 레이아웃에 가장 많이 이용하므로 함께 설명하겠습니다.
코티네이터 라이아웃 선언
implementation 'androidx.coordinatorlayout:coordinatorlayout:1.1.0'
스크롤 연동하기
코디네이터 레이아웃은 뷰끼리 상호 작용해야 할 때 사용해야 합니다. 뷰 2개를 코디네이터 레이아웃에 넣으면 뷰에서 발생한 스크롤 정보를 코디네이터 레이아웃이 받아서 다른 뷰에 전달해 줍니다. 이렇게 되면 뷰가 함께 스크롤됩니다.
그렇지만 코디네이터 레이아웃으로 감싼 모든 자식 뷰끼리 상호작용을 지원하지는 않습니다. 자식뷰끼릴 상호작용 하려면 누군가는 코디네이터 레이아웃에 정보를 전달해야 하고, 또 다른 누군가는 그 정보를 받을 수 있어야 합니다. 아부분을 비헤비어라고 하는데 이 비헤비어를 구현해야 뷰끼리 상호작용 할 수 있습니다.
앱바 레이아웃으로 화면 위쪽 영역을 꾸미면 그만큼 메인 콘텐츠 영역이 작게 나올수밖에 없습니다. 이 때문에 보통은 메이 콘텐츠가 나오는 부분을 스크롤할 때 앱바 레이아웃도 함께 스크롤되게 만듭니다. 이때 코디네이터 레이아웃을 사용합니다.
중첩 스크롤 뷰 사용하기
코디네이터 레이아웃에 중첩 스크롤 뷰(NestedScrollView)를 포함하고 여기에 텍스트 뷰나 이미지 뷰를 넣으면 해당 뷰에서 발생하는 스크롤 정보를 코디네이터 레이아웃에 전달하여 앱바 레이아웃이 함께 스클로 되게 할 수 있습니다.
중첩 스크롤 뷰
<androidx.coordinatorlayout.widget.CoordinatorLayout ... 생략 ... >
<com.google.android.material.appbar. AppBarLayout ... 생략 ... >
<androidx.appcompat.widget.Toolbar ... 생략 ...
app:layout_scrollFlags="scroll|enterAlways" />
<ImageView ... ...
app:Layout_scrollFlags="scroll|enterAlways" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView ... 생략 ...
app:layout_behavior="astring/appbar_scrolling_view_behavior">
<TextView ... 생략 ... >
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
여기서 app:layout_behavior와 app:layout_scrollFlags가 중요한 설정입니다. 중첩 스크롤 뷰의 app:layout_behavior 속성은 자신의 스크롤 정보를 어느 비헤비어 클래스가 받아서 처리해야 하는지를 의미합니다. 결국 이 설정으로 코디네이터 레이아웃이 중첩 스크롤 뷰 정보를 앱바 레이아웃의 ScrollingViewBehavior 클래스에 전달합니다. 그리고 app:layout_scrollFlags속성이 설정된 뷰가 스크롤 정보를 수신해서 함께 스크롤됩니다.
