Android-key-of-love/app/src/main/res/layout/fragment_shop.xml

<?xml version="1.0" encoding="utf-8"?>
<com.example.myapplication.widget.NoHorizontalInterceptSwipeRefreshLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/swipeRefreshLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="40dp">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- 背景-->
        <!-- <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/bg"
            android:scaleType="fitXY"
            android:adjustViewBounds="true" /> -->

        <!-- 头部 + 标签行，放进 AppBarLayout 里 -->
        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_shop_gradient"
            android:elevation="0dp"
            android:stateListAnimator="@null">

            <!-- 这一块会跟着滚动，滑出屏幕 -->
            <LinearLayout
                android:id="@+id/headerContainer"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="16dp"
                android:orientation="vertical"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <!--消费记录，搜索、皮肤栏 -->
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:layout_gravity="center_horizontal"
                    android:orientation="horizontal">

                    <LinearLayout 
                        android:id="@+id/recordButton"                       
                        android:layout_width="wrap_content"
                        android:layout_height="32dp"
                        android:gravity="center"
                        android:paddingStart="7dp"
                        android:paddingEnd="7dp"
                        android:background="@drawable/shop_record_bg"
                        android:orientation="horizontal">
                        <ImageView
                            android:layout_width="15dp"
                            android:layout_height="16dp"
                            android:layout_marginEnd="4dp"
                            android:src="@drawable/record" />
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@string/mine_consumption_record"
                            android:textColor="#02BEAC"/>
                    </LinearLayout>

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>

                    <ImageView
                        android:id="@+id/searchButton"
                        android:layout_width="24dp"
                        android:layout_height="24dp"
                        android:layout_marginEnd="16dp"
                        android:src="@drawable/search" />

                    <ImageView
                        android:id="@+id/skinButton"
                        android:layout_width="24dp"
                        android:layout_height="24dp"
                        android:layout_marginEnd="16dp"
                        android:src="@drawable/skin" />
                </LinearLayout>

                <!-- 小星星 -->
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="110dp"
                    android:layout_marginTop="16dp"
                    android:elevation="1dp"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="18dp"
                        android:layout_height="18dp"
                        android:layout_marginTop="62dp"
                        android:layout_marginStart="10dp"
                        android:src="@drawable/yellow_star" />

                    <TextView
                        android:layout_width="68dp"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="6dp"
                        android:layout_marginStart="6dp"
                        android:text="@string/shop_mall"
                        android:textColor="#1B1F1A"
                        android:textStyle="bold"
                        android:textSize="22sp" />

                    <ImageView
                        android:layout_width="16dp"
                        android:layout_height="16dp"
                        android:src="@drawable/yellow_star" />

                    <ImageView
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_marginStart="62dp"
                        android:layout_marginTop="60dp"
                        android:src="@drawable/yellow_star" />

                    <ImageView
                        android:layout_width="18dp"
                        android:layout_height="18dp"
                        android:layout_marginTop="62dp"
                        android:layout_marginStart="2dp"
                        android:src="@drawable/yellow_star" />

                    <ImageView
                        android:layout_width="16dp"
                        android:layout_height="16dp"
                        android:layout_marginTop="60dp"
                        android:layout_marginStart="2dp"
                        android:src="@drawable/yellow_star" />

                    <ImageView
                        android:layout_width="14dp"
                        android:layout_height="14dp"
                        android:layout_marginTop="54dp"
                        android:layout_marginStart="2dp"
                        android:src="@drawable/blue_star" />
                </LinearLayout>

                <!-- Points 卡片 -->
                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="238dp"
                    android:layout_marginTop="-110dp"
                    android:elevation="10dp"
                    android:orientation="vertical">

                    <!-- 点数背景 -->
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:scaleType="centerCrop"
                        android:src="@drawable/points" />

                    <!-- 内容 -->
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="110dp"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="@string/shop_points"
                            android:textColor="#1B1F1A"
                            android:textSize="14sp"
                            android:padding="20dp" />

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:orientation="horizontal">

                            <ImageView
                                android:layout_width="38dp"
                                android:layout_height="38dp"
                                android:layout_marginStart="20dp"
                                android:src="@drawable/gold_coin" />

                            <TextView
                                android:id="@+id/balance"
                                android:layout_width="0dp"
                                android:layout_height="wrap_content"
                                android:layout_weight="1"
                                android:layout_marginStart="10dp"
                                android:layout_marginEnd="10dp"
                                android:text="0.00"
                                android:textColor="#02BEAC"
                                android:textSize="40sp" />

                            <!-- 按钮 -->
                            <LinearLayout
                                android:id="@+id/rechargeButton"
                                android:layout_width="114dp"
                                android:layout_height="42dp"
                                android:layout_marginEnd="10dp"
                                android:gravity="center"
                                android:background="@drawable/gold_coin_button"
                                android:orientation="horizontal">

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:textSize="13sp"
                                    android:textStyle="bold"
                                    android:gravity="center"
                                    android:textColor="#1B1F1A"
                                    android:text="@string/shop_recharge" />
                            </LinearLayout>
                        </LinearLayout>
                    </LinearLayout>
                </FrameLayout>
            </LinearLayout>

            <!-- 标签行：仍然在 points 卡片下面，并设置成吸顶 -->
            <HorizontalScrollView
                android:id="@+id/tagScroll"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingStart="16dp"
                android:paddingEnd="16dp"
                android:layout_marginBottom="18dp"
                android:fillViewport="true"
                android:scrollbars="none"
                android:overScrollMode="never">
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:gravity="center_vertical">
                    <TextView
                        android:id="@+id/shopTitle"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:gravity="center"
                        android:text="@string/shop_title"
                        android:textColor="#1B1F1A"
                        android:textSize="20sp" />

                    <LinearLayout
                        android:id="@+id/tagContainer"
                        android:layout_width="wrap_content"
                        android:layout_height="30dp"
                        android:orientation="horizontal"
                        android:gravity="center_vertical" />
                </LinearLayout>
            </HorizontalScrollView>
        </com.google.android.material.appbar.AppBarLayout>
        
    <!-- 内容页，放进 ViewPager2 里 -->
        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="30dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</com.example.myapplication.widget.NoHorizontalInterceptSwipeRefreshLayout>