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="@dimen/sw_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="@dimen/sw_16dp"
                android:orientation="vertical"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

                    <LinearLayout 
                        android:id="@+id/recordButton"                       
                        android:layout_width="wrap_content"
                        android:layout_height="@dimen/sw_32dp"
                        android:gravity="center"
                        android:paddingStart="@dimen/sw_7dp"
                        android:paddingEnd="@dimen/sw_7dp"
                        android:background="@drawable/shop_record_bg"
                        android:orientation="horizontal">
                        <ImageView
                            android:layout_width="@dimen/sw_15dp"
                            android:layout_height="@dimen/sw_16dp"
                            android:layout_marginEnd="@dimen/sw_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="@dimen/sw_24dp"
                        android:layout_height="@dimen/sw_24dp"
                        android:layout_marginEnd="@dimen/sw_16dp"
                        android:src="@drawable/search" />

                    <ImageView
                        android:id="@+id/skinButton"
                        android:layout_width="@dimen/sw_24dp"
                        android:layout_height="@dimen/sw_24dp"
                        android:layout_marginEnd="@dimen/sw_16dp"
                        android:src="@drawable/skin" />
                </LinearLayout>

                <!-- 小星星 -->
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/sw_110dp"
                    android:layout_marginTop="@dimen/sw_16dp"
                    android:elevation="@dimen/sw_1dp"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="@dimen/sw_18dp"
                        android:layout_height="@dimen/sw_18dp"
                        android:layout_marginTop="@dimen/sw_62dp"
                        android:layout_marginStart="@dimen/sw_10dp"
                        android:src="@drawable/yellow_star" />

                    <TextView
                        android:layout_width="@dimen/sw_68dp"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="@dimen/sw_6dp"
                        android:layout_marginStart="@dimen/sw_6dp"
                        android:text="@string/shop_mall"
                        android:textColor="#1B1F1A"
                        android:textStyle="bold"
                        android:textSize="@dimen/sw_22sp" />

                    <ImageView
                        android:layout_width="@dimen/sw_16dp"
                        android:layout_height="@dimen/sw_16dp"
                        android:src="@drawable/yellow_star" />

                    <ImageView
                        android:layout_width="@dimen/sw_20dp"
                        android:layout_height="@dimen/sw_20dp"
                        android:layout_marginStart="@dimen/sw_62dp"
                        android:layout_marginTop="@dimen/sw_60dp"
                        android:src="@drawable/yellow_star" />

                    <ImageView
                        android:layout_width="@dimen/sw_18dp"
                        android:layout_height="@dimen/sw_18dp"
                        android:layout_marginTop="@dimen/sw_62dp"
                        android:layout_marginStart="@dimen/sw_2dp"
                        android:src="@drawable/yellow_star" />

                    <ImageView
                        android:layout_width="@dimen/sw_16dp"
                        android:layout_height="@dimen/sw_16dp"
                        android:layout_marginTop="@dimen/sw_60dp"
                        android:layout_marginStart="@dimen/sw_2dp"
                        android:src="@drawable/yellow_star" />

                    <ImageView
                        android:layout_width="@dimen/sw_14dp"
                        android:layout_height="@dimen/sw_14dp"
                        android:layout_marginTop="@dimen/sw_54dp"
                        android:layout_marginStart="@dimen/sw_2dp"
                        android:src="@drawable/blue_star" />
                </LinearLayout>

                <!-- Points 卡片 -->
                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/sw_238dp"
                    android:layout_marginTop="@dimen/_sw_110dp"
                    android:elevation="@dimen/sw_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="@dimen/sw_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="@dimen/sw_14sp"
                            android:padding="@dimen/sw_20dp" />

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

                            <ImageView
                                android:layout_width="@dimen/sw_38dp"
                                android:layout_height="@dimen/sw_38dp"
                                android:layout_marginStart="@dimen/sw_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="@dimen/sw_10dp"
                                android:layout_marginEnd="@dimen/sw_10dp"
                                android:text="0.00"
                                android:textColor="#02BEAC"
                                android:textSize="@dimen/sw_40sp" />

                            <!-- 按钮 -->
                            <LinearLayout
                                android:id="@+id/rechargeButton"
                                android:layout_width="@dimen/sw_114dp"
                                android:layout_height="@dimen/sw_42dp"
                                android:layout_marginEnd="@dimen/sw_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="@dimen/sw_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="@dimen/sw_16dp"
                android:paddingEnd="@dimen/sw_16dp"
                android:layout_marginBottom="@dimen/sw_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="@dimen/sw_20sp" />

                    <LinearLayout
                        android:id="@+id/tagContainer"
                        android:layout_width="wrap_content"
                        android:layout_height="@dimen/sw_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="@dimen/sw_30dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <FrameLayout
            android:id="@+id/noResultOverlay"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            android:importantForAccessibility="no"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="top|center_horizontal"
                android:orientation="vertical"
                android:gravity="center_horizontal">

                <ImageView
                    android:id="@+id/noResultImage"
                    android:layout_width="@dimen/sw_175dp"
                    android:layout_height="@dimen/sw_177dp"
                    android:src="@drawable/no_search_result"
                    android:scaleType="fitCenter"
                    android:contentDescription="@null"
                    android:importantForAccessibility="no" />

                <TextView
                    android:id="@+id/noResultText"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:textAlignment="center"
                    android:text="@string/search_not_data"
                    android:textSize="@dimen/sw_13sp"
                    android:textColor="#1B1F1A"
                    android:includeFontPadding="false" />
            </LinearLayout>
        </FrameLayout>

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