12-1 앱바 사용하기

머티리얼 라이브러리

• 구글의 머티리얼 디자인(material design)은 모바일, 데스크탑, 그 외의 다양한 장치를 아우르는 일관된 애플리케이션 디자인 지침이다.
• 구글 소개

  "질감이 느껴지는 표면(tactile surfaces)과 대담하고 선명한 그래픽 디자인(bold graphic design), 그리고 아름답고 직관적인 사용자 경험을 위한 자연스러운 애니메이션을 특징으로 한다."

• 예를 들어, 그림자 효과를 통해 화면 계층을 쉽게 파악하거나 터치시 물결 효과를 주어 어디를 터치했는지 쉽게 알 수 있도록 한다.

dependencies {
	...
	implementation 'com.google.android.material:material:1.7.0'
}

앱바 레이아웃

• 앱바(AppBar)란, 화면 위쪽의 꾸밀 수 있는 영역을 말한다.
• 앱바 내부에 툴바를 포함할 수 있으며, 이미지와 문자열을 함께 출력하여 화면의 위쪽 영역을 다양하게 꾸밀 수 있다.
• 앱바 레이아웃도 하나의 뷰이므로 Layout XML 파일에 등록한다.

<com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:theme="@style/Theme.AppCompat.DayNight.DarkActionBar"
        android:layout_width="match_parent"
        android:layout_height="242dp"
        tools:ignore="MissingConstraints">
        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:id="@+id/toolbar">
        </androidx.appcompat.widget.Toolbar>
        <androidx.appcompat.widget.AppCompatImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/hongcha">

        </androidx.appcompat.widget.AppCompatImageView>
</com.google.android.material.appbar.AppBarLayout>

---

코디네이터 레이아웃

• 코디네이터 레이아웃 (Coordinator Layout)은 제트팩의 androidx 라이브러리에서 제공하며, 뷰끼리 상호작용할 때 사용한다.
• 코디네이터 레이아웃으로 감싼 뷰 사이에 비헤이비어(behavior)를 공유하여, 동작/정보 등을 주고받을 수 있다.
• ex) 대표적으로 앱바-메인콘텐츠로 구성된 화면에서 메인콘텐츠 화면을 위로 스크롤하면, 앱바도 같이 스크롤 되면서 접히게 된다.

중첩 스크롤 뷰 사용하기

• 코디네이터 레이아웃을 이용하더라도 텍스트 뷰, 이미지 뷰 등의 스크롤을 연동할 수 없기 때문에 중첩 스크롤 뷰 (NestedScrollView)를 사용해야한다.

컬랩싱 툴바 레이아웃

• 앱바 레이아웃 하위에 선언되어 앱바가 접힐 때 다양한 설정을 할 수 있는 뷰이다.
• 앱바가 접힐 때 표시할 제목이나 색상 등을 지정할 수 있다.
• 각 뷰에 layout_scrollFlags 속성을 지정하는 건 비효율적이므로 CollapsingToolbarLayout을 넣어준다.

<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/main_content"
        >
        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="242dp"
            android:id="@+id/appbar"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="242dp"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginBottom="50dp"
                app:expandedTitleMarginStart="50dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:title="AppBar Title">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_collapseMode="parallax"
                    android:src="@drawable/neko"
                    ></ImageView>

                <androidx.appcompat.widget.Toolbar
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin">

                </androidx.appcompat.widget.Toolbar>

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

        </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="match_parent"
                android:layout_height="match_parent"
                android:text="@string/long_string"></TextView>
        </androidx.core.widget.NestedScrollView>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

• title 속성으로 앱바의 제목을 설정한다.
• expandedTitleMarginStart 등의 속성으로 앱바가 펼쳐졌을 때 제목 위치를 설정한다.
• 앱바가 접힌 경우 contentScrim 속성의 색으로 앱바를 출력한다.
• 스크롤 설정(layout_scrollFlags)
  • scroll|enterAlways : 스크롤 시 사라졌다가 역스크롤시 처음부터 다시 나타난다.
  • scroll|enterAlwaysCollapsed : 스크롤시 사라졌다가 역스크롤시 맨 마지막에 나타난다.
  • scroll|exitUntilCollapsed : 스크롤시 모두 사라지지 않고 툴바 크기로 남는다.

개별 뷰의 스크롤 설정하기

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