[Android] Collapsing Toolbar Layout

lamknh·2021년 10월 7일
0

1. ❗️ 스크롤하면 위가 붙는 화면을 구현하자!

<목표>

  • 네이버나 많은 포털사이즈에서 사용하는 아래로 스크롤 할 시 툴바가 위에 붙는 화면을 구현하여야한다.
    👉 사용자가 손쉽게 더 많은 조회 결과를 확인할 수 있다.

    • Sticky View Layout
    • Collapsing Toolbar Layout
  • 현재 페이지가 Tab Layout을 사용하여 해당 Fragment 내에 이런 화면을 구현하여야한다

<결론>

Collapsing Toolbar Layout을 이용하여 구현하도록 하자

2. 🏋️‍♂️ 구현하기

유튜브를 참조하여 최종 구현한 코드

<com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/bgGray"
            >
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                app:expandedTitleTextAppearance="@style/expandedBarTextStyle"
                app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleGravity="top|center_horizontal"
                app:expandedTitleMarginStart="60dp"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginTop="15dp"
                >

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

코드를 살펴보자.

스타일 변화

  • CollapsingToolbarLayout 속성

    app:expandedTitleTextAppearance="@style/expandedBarTextStyle"

[style.xml]

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="expandedBarTextStyle">
        <item name="android:textSize">25sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@android:color/black</item>
    </style>
</resources>

여기서 툴바의 글씨 크기, 폰트, 색상 등을 결정할 수 있다.
이 유튜브를 확인해보면

textSize="0sp", textColor="@android:color/transparent"

로 해서 처음 화면에 뜨는 툴바의 title을 아예 보이지 않도록 하였는데, 아주 좋은 아이디어같다!

  • CollapsingToolbarLayout

    app:expandedTitleMarginStart="60dp"
    app:expandedTitleMarginEnd="64dp"
    app:expandedTitleMarginTop="15dp"

기본적으로 스크롤 전에 큰 폰트로 아래 위치하던 title을 기본 툴바처럼 기본 위치에 고정하도록 만든다.

<com.google.android.material.button.MaterialButtonToggleGroup>

아래에는 스크롤하면 사라질 구간을 넣어주면 되고

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

<androidx.core.widget.NestedScrollView>

안에는 스크롤 이후에 남아있을 부분을 넣어주면 된다!

3. 결과물


스크롤 시 툴바가 글씨 크기가 축소되고 바코드 입력 부터 남게 되었다!

4. 수정사항

  • 바코드 입력과 툴바 사이의 margin이 너무 적어 미학적으로 좋지 못하다. responsive하게 변화를 줄 수 있는 방법은 없을까?

참고

profile
개발자 지망생

0개의 댓글