仿简书首页

一、效果图

简书首页：

简单仿照效果图：

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/white"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!--            轮播图和横向滑动布局-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
<!--                一个 ImageView 代替轮播图-->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="140dp"
                android:src="@mipmap/wuhuang"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>
                <HorizontalScrollView
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:background="@color/white"
                    android:overScrollMode="never"
                    android:scrollbars="none">
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="horizontal"
                        android:paddingStart="20dp">
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="小说精选"
                            android:layout_gravity="center_vertical"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="摄影游记"
                            android:layout_marginStart="20dp"
                            android:layout_gravity="center_vertical"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="漫画手绘"
                            android:layout_marginStart="20dp"
                            android:layout_gravity="center_vertical"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="动漫卡通"
                            android:layout_marginStart="20dp"
                            android:layout_gravity="center_vertical"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="电影世界"
                            android:layout_marginStart="20dp"
                            android:layout_gravity="center_vertical"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="科学幻想"
                            android:layout_marginStart="20dp"
                            android:layout_gravity="center_vertical"/>
                    </LinearLayout>
                </HorizontalScrollView>
            </LinearLayout>
<!--            <androidx.appcompat.widget.Toolbar-->
<!--                android:layout_width="match_parent"-->
<!--                android:layout_height="wrap_content">-->
<!--                -->
<!--            </androidx.appcompat.widget.Toolbar>-->
        </com.google.android.material.appbar.CollapsingToolbarLayout>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/white">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="搜索"
        android:drawableLeft="@drawable/ic_search"
        android:layout_centerInParent="true"/>
</RelativeLayout>
    </com.google.android.material.appbar.AppBarLayout>
    <include layout="@layout/content_scrolling" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

二、参考

demo
Material Design之 AppbarLayout 开发实践总结