Android AppBarLayout+CollapsingToolbarLayout+Toolbar+TabLayout

 1.原先圖

2.向上滑動

 

//導入 implementation 'com.android.support:design:28.0.3' 包

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">


    <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#E5E5E5"
            android:orientation="vertical">

        <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/sada"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#ffffffff"
                app:contentScrim="@color/white"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:adjustViewBounds="true"
                        android:src="@mipmap/hsq"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />
            </androidx.constraintlayout.widget.ConstraintLayout>

            <androidx.appcompat.widget.Toolbar
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:minHeight="48dp"
                    app:contentInsetStart="0dp"
                    app:layout_collapseMode="pin"
                    app:navigationIcon="@null">


                <androidx.constraintlayout.widget.ConstraintLayout
                        android:id="@+id/cl_brand"
                        android:layout_width="match_parent"
                        android:layout_height="45dp"
                        android:layout_marginTop="5dp"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent">


                    <ImageView
                            android:id="@+id/iv_brand_return"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerVertical="true"
                            android:layout_marginLeft="16dp"
                            android:padding="5dp"
                            app:layout_constraintBottom_toBottomOf="parent"
                            app:layout_constraintEnd_toStartOf="@+id/brand_top_rl"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toTopOf="parent"
                            android:background="@mipmap/return_icon" />


                    <RelativeLayout
                            android:id="@+id/brand_top_rl"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_marginStart="16dp"
                            android:layout_marginTop="4dp"
                            android:layout_marginEnd="16dp"
                            android:layout_marginBottom="4dp"
                            android:background="@drawable/shape_rl_search_f5f5f5"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toEndOf="@+id/iv_brand_return">

                        <ImageView
                                android:id="@+id/brand_top_search_im"
                                android:layout_width="20dp"
                                android:layout_height="20dp"
                                android:layout_centerVertical="true"
                                android:layout_marginLeft="8dp"
                                android:src="@mipmap/ic_search" />

                        <EditText
                                android:id="@+id/brand_top_search_et"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_marginLeft="16dp"
                                android:background="@null"
                                android:hint="搜索旅行社"
                                android:paddingStart="15dp"
                                android:paddingEnd="15dp"
                                android:textColorHint="#b0b0b0"
                                android:textSize="14sp" />

                    </RelativeLayout>


                </androidx.constraintlayout.widget.ConstraintLayout>
            </androidx.appcompat.widget.Toolbar>

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


        <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="40dp">


            <com.google.android.material.tabs.TabLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#ffffff"
                    app:elevation="0dp"
                    app:tabIndicatorColor="@color/colorPrimary"
                    app:tabIndicatorFullWidth="false"
                    app:tabIndicatorHeight="1dp"
                    app:tabSelectedTextColor="@color/colorPrimary"
                    tools:ignore="MissingConstraints"
                    tools:layout_editor_absoluteX="0dp"
                    tools:layout_editor_absoluteY="0dp">


            </com.google.android.material.tabs.TabLayout>

            <TextView
                    android:id="@+id/tv_brand_default"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:background="@color/white"
                    android:gravity="center"
                    android:text="歐洲旅行"
                    android:textColor="#333333"
                    android:textSize="16sp"
                    app:layout_constraintEnd_toStartOf="@+id/tv_brand_sales"
                    app:layout_constraintStart_toStartOf="parent" />

            <TextView
                    android:id="@+id/tv_brand_sales"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:background="@color/white"
                    android:gravity="center"
                    android:text="澳洲旅行"
                    android:textColor="#333333"
                    android:textSize="16sp"
                    app:layout_constraintBottom_toBottomOf="@+id/tv_brand_default"
                    app:layout_constraintEnd_toStartOf="@+id/ll_brand_price"
                    app:layout_constraintStart_toEndOf="@id/tv_brand_default"
                    app:layout_constraintTop_toTopOf="@+id/tv_brand_default" />

            <LinearLayout
                    android:id="@+id/ll_brand_price"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:background="@color/white"
                    android:gravity="center"
                    app:layout_constraintBottom_toBottomOf="@+id/tv_brand_default"
                    app:layout_constraintEnd_toStartOf="@+id/tv_brand_new"
                    app:layout_constraintStart_toEndOf="@+id/tv_brand_sales"
                    app:layout_constraintTop_toTopOf="@+id/tv_brand_default">

                <TextView
                        android:id="@+id/tv_brand_price"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="5dp"
                        android:text="非洲旅行"
                        android:textColor="#333333"
                        android:textSize="16sp" />

            </LinearLayout>


            <TextView
                    android:id="@+id/tv_brand_new"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:background="@color/white"
                    android:drawablePadding="10dp"
                    android:gravity="center"
                    android:text="土耳其旅行"
                    android:textColor="#333333"
                    android:textSize="16sp"
                    app:layout_constraintBottom_toBottomOf="@+id/tv_brand_default"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toEndOf="@+id/ll_brand_price"
                    app:layout_constraintTop_toTopOf="@+id/tv_brand_default"
                    app:layout_constraintVertical_bias="0.0" />
        </androidx.constraintlayout.widget.ConstraintLayout>


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






</androidx.coordinatorlayout.widget.CoordinatorLayout>