[Android] Collapsing Toolbar Layout

1.スクロールすることで、上に貼った画面を実現！

<ターゲット>

Naverは、複数のポータルサイトのサイズで使用されるスクロールダウンの場合、ツールバーの上の画面を実現する必要があります.
👉 ユーザーは、より多くのクエリー結果を簡単に表示できます.

Sticky View Layout

Collapsing Toolbar Layout

現在のページはTab Layoutを使用して対応する分割内でこれらの画面を実現しなければならない.

<結論>

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>

ここでツールバーのフォントサイズ、フォント、色などを決めることができます.
このYouTubeを見てください.
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>

中に転がって残った部分を入れておけばOK!

3.成果

スクロールするとツールバーがフォントサイズを縮小し、バーコード入力から残ります!

4.修正

バーコード入力とツールバーの差が小さすぎて、美学的によくありません.私たちに反応させる方法はありますか?

リファレンス

https://deque.tistory.com/140

https://www.youtube.com/watch?v=xuWMi5IEFls&ab_channel=CodingWithTea

https://www.youtube.com/watch?v=ZomaXvtyxmQ&t=322s&ab_channel=TheLazyDev