머티리얼 라이브러리

구글의 material 디자인 은 모바일과 데스크톱, 그리고 그 밖에 다양한 장치를 아우르는 일관된 애플리케이션 디자인 지침이다. 이러한 지침에 맞게 앱을 개발하려면 다양한 뷰가 필요한데, 구글은 이를 지원하려고 머티리얼 라이브러리를 제공한다.

이러한 라이브러리를 이용하기 위해서는 그레이들에 의존성을 추가해줘야 하는데 안드로이드 스튜디오 4.1 버전부터 프로젝트나 모듈을 만들면 자동으로 머티리얼 라이브러리가 선언되어 있다.

dependencies {

    implementation 'com.google.android.material:material:1.4.0'
}

앱바 레이아웃

앱바(AppBar)란 화면 위족의 꾸밀 수 있는 영역을 의미한다. 안드로이드의 전화 앱의 상단이 앱바로 되어있다. 이는 단순 액션바나 툴바가 아니다. 화면에서 위쪽 영역을 다양하게 꾸밀 때 앱바를 사용하며, 단순히 텍스트를 보여줄 수 있을 뿐만 아니라 이미지도 보여줄 수 있다.

앱바를 이용해 화면 위쪽 영역의 크기만 늘릴 수도 있지만 메뉴를 출력하는 툴바를 포함할 수 있다. 이 앱바는 툴바를 포함한 여러 뷰들을 가질 수 있다. 또한 앱바의 height 값을 바꿔주면 앱바의 크기가 변한다.

<rootView...>
  
  <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"
                app:layout_scrollFlags="scroll|enterAlways" />
        </com.google.android.material.appbar.AppBarLayout>
</rootview>

코디네이터 레이아웃

코디네이터 레이아웃은 androidx 라이브러리에서 제공하는 레이아웃이다. 이 레이아웃은 뷰끼리 상호작용을 할때 사용한다. 예를 들어 뷰가 스크롤되는 상황에서 하나의 뷰가 스크롤될때 다른 뷰도 스크롤 되도록 한다.

    implementation 'androidx.coordinatorlayout:coordinatorlayout:1.1.0'

이러한 기능은 앱바에 많이 사용된다. 앱바 영역이 콘텐츠 영역 위에 존재하기 때문에, 앱바 영역이 크다면 정보들을 가린다. 이때 코디네이터를 이용하여 콘텐츠 영역을 스크롤 할때 앱바가 감춰지도록 할 수 있다.

코디네이터 레이아웃으로 감싸진 view간에 상호작용을 공유하는데, 모든 view가 알아서 상호작용을 공유하는 것은 아니다. 코디네이터 레이아우스이 자식 뷰끼리 상호작용을 하려면 누군가는 코디네이터 레이아웃에 정보를 전달해야하고, 또 누군가는 그 정보를 받아야한다. 이러한 부분을 '행위(behavior)' 라고 부른다.

중첩 스크롤 뷰

코디네이터 뷰를 이용하더라도 텍스트 뷰, 이미지 뷰 등은 스크롤을 연동할 수 없다. 만약 이런 뷰에서 발생하는 스크롤을 연동하려면 androidx.core.widget.NestedScrollView 를 이용한다.

코디네이터 레이아웃에 중첩 스크롤 뷰(NestedScrollView)를 포함하고 여기에 텍스트 뷰나 이미지 뷰를 넣으면 해당 뷰에서 발생하는 스크롤 정보를 코디네이터 레이아웃에 전달하여 앱바 레이아웃이 함께 스크롤되게 할 수 있다.

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

        <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"
                app:layout_scrollFlags="scroll|enterAlways" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                app:srcCompat="@drawable/ic_launcher_foreground"
                app:layout_scrollFlags="scroll|enterAlways" />
        </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/large_text" />
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

여기서 중첩 스크롤뷰의 app:layout_behavior 와 툴바, 이미지뷰의app:layout_scrollFlags 가 중요하다. 중첩 스크롤 뷰의 layout_behavior 속성은 자신의 스크롤 정보를 어느 비헤이비어 클래스가 받아서 처리해야 하는지 의미한다. 위 코드에서는 그 설정값이 문자열 리소스로 되어있는데, 이 문자열은 AppBarLayout$ScrollingViewBehavior 라는 클래스의 이름이다. 이 설정으로 코디네이터 레이아웃이 중첩 스크롤 뷰 정보를 앱바 레이아웃의 ScrollingViewBehavior 클래스에 전달한다.

컬랩싱 툴바 레이아웃

컬랩싱 툴바 레이아웃(CollapsingToolbarLayout) 은 앱바 레이아웃 하위에 선언하여 앱바가 접힐 때 다양한 설정을 할 수 있는 뷰이다. 예를 들어 앱바가 접힐 때 표시할 제목이나 색상 등을 지정할 수 있다.

가장 중요한 설정은 앱바를 어떻게 접을 것인가이다. 앞서보았듯 컬랩싱 툴바를 사용하지 않아도 스크롤에 따라 툴바나 이미지뷰를 접을 수 있다. 그런데 앱바 레이아웃에 여러 뷰를 추가했다면 개별 뷰에 app:layout_scrollFlags 속성을 지정하는 것은 귀찮은 일이다.

따라서 보통은 앱바 레이아웃 하위에 CollapsingToolbarLayout 을 추가하여 앱바가 스크롤되어 접히거나 나타날 때 어떻게 동작해야 하는지를 설정한다.

 <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">
                        <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:contentScrim="?attr/colorPrimary"
                app:title="AppBar Title"
                app:expandedTitleMarginBottom="50dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_scrollFlags="scroll|enterAlways"
                    app:layout_collapseMode="pin"/>

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:srcCompat="@drawable/ic_launcher_foreground"
                    app:layout_scrollFlags="scroll|enterAlways"
                    app:layout_collapseMode="parallax"/>

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

앱바의 하위에 CollapsingToolbarLayout 을 선언했고 다시 그 하위에 앱바의 구성 요소인 툴바와 이미지 뷰를 등록했다.

컬랩싱 툴바 레이아웃의 title 속성으로 앱바의 제목을 설정했다. expandedTitleMarginStart, expandedTitleMarginBottom 속성으로 앱바가 접히지 않을 때 제목의 위치를 설정했다. 그리고 앱바가 접히면서 내용이 정상으로 출력되지 못하는 상황이라면 contentScrim 속성에 지정한 색상으로 앱바를 출력한다.

스크롤 설정하기

컬랩싱 툴바 레이아웃에서 가장 중요한 속성은 앱바가 스크롤 될지를 설정하는 layout_scrollFlags 이다. 스크롤 되어야 한다면 scroll 값을 지정하고 | 연산을 추가해 스크롤 시 어떻게 움직여야 하는지를 설정한다.

• scroll | enterAlways : 스크롤 시 완전히 사라졌다가 거꾸로 스크롤 시 처음부터 다시 나타난다.
• scroll | enterAlwaysCollapsed: 스크롤 시 완전히 사라졌다가 거꾸로 스크롤시 처음부터 나타나지 않고 메인 콘텐트 부분이 끝까지 스크롤 된 다음 나타난다.
• scroll | exitUntilCollapsed : 스크롤 시 모두 사라지지 않고 툴바를 출력할 정도의 한 줄만 남을 때까지 스크롤 된다.

개별 뷰의 스크롤 설정하기

layout_collapseMode 속성을 살펴보자, 위의 코드를 보면 툴바와 이미지 뷰에 각각 서로 다른 layout_collapseMode 속성값이 설정되었다. 이 속성은 앱바를 스크롤 할 때 앱바에 포함한 개별 뷰가 어떻게 움직여야 하는지를 설정한다. 앱바 전체의 스크롤 설정은 컬랩싱 툴바 레이아웃의 layoutFlags 속성으로 하고, 그 하위 뷰마다 스크롤 설정은 layout_collapseMode 속성으로 한다. layout_collapseMode 속성에는 pin 이나 parallax 값을 지정한다.

• pin : 고정되어 스크롤되지 않는다.
• parrallax : 함께 스크롤된다.