情報を提供するよりも、個人整理の目的として位置づけたほうがいい.

実施内容

サンプル画像

上の図に示すように、スクロールは上部の折りたたみを実現し、Tablayout部分は上部のマークに貼られている.
(タブレイアウトはビューページとともに使用され、3つのデザインが続いています.)

レイアウト構造

<CoordinatorLayout>
	<AppBarLayout>
    	<CollapsingToolbarLayout>
        	<ConstraintLayout>
            	다양한 요소들...
            </ConstraintLayout>
        </CollapsingToolbarLayout>
        <TabLayout/>
    </AppBarLayout>
    <ViewPager2/>
</CoordinatorLayout>
               

CoordinatorLayout

Coordinator Layoutは、2つの主要な使用例に適用されます.

最高級のアプリケーション装飾またはクロムめっきレイアウトを採用し、

コンテナ

は、1つ以上のサブビューとの特定のインタラクションのために使用される

AppbarLayout

はデフォルトでシャドウが発生するため、背景は@null/elevationが0 dp、

を指定します.

CollapsingToolbarLayout

次のコード

を使用します.

app:layout_scrollFlags="scroll|exitUntilCollapsed">

title Enabledをfalseと指定した場合、CollapsingToolbarLayoutはapp:titleで設定したテキストを表示しません.この場合、Toolbarで設定したtitleテキストが表示されます.ソース

Tablayout

が固定されるのでlayout jumpleMode="pin"を指定します.

Viewpager

ビューウィンドウを使用して原稿を接続します.
各レイヤーにNastedscrollを適用してスクロールできるようにします.
非常に役立つ位置付け