美文网首页
CollapsingToolbarLayout折叠滑动吸顶Tab

CollapsingToolbarLayout折叠滑动吸顶Tab

作者: 遇见初夏 | 来源:发表于2023-02-05 15:26 被阅读0次

使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+TabLayout+ViewPager,实现tab滑动吸顶效果。

遇到问题:当Fragment布局中是RecyclerView嵌套RecyclerView时,手指触摸内层的RecyclerView进行上下滑动时,滑动会回弹,这样就无法达到上滑吸顶的效果了。

解决办法:内层RecyclerView设置设置setNestedScrollingEnabled(false)

布局如下:

<?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"
    android:background="#ffa">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.AppCompat">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="#ffa103"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:layout_marginBottom="5dp"
                        android:ellipsize="end"
                        android:maxLines="2"
                        android:textColor="#FFFFFF"
                        android:textSize="16dp"
                        android:textStyle="bold"
                        android:text="姓名" />

            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:minHeight="50dp"
                app:layout_collapseMode="pin"
                app:navigationIcon="@mipmap/btn_back">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="标题栏"
                    android:textSize="@dimen/titlebar_text_size"
                    android:textStyle="bold" />
            </androidx.appcompat.widget.Toolbar>

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

        <com.google.android.material.tabs.TabLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:background="#FCF9F2"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/tab_menu_item_text_color_checked"
            app:tabIndicatorFullWidth="false"
            app:tabMinWidth="50dp"
            app:tabMode="fixed"
            app:tabPaddingEnd="15dp"
            app:tabPaddingStart="15dp"
            app:tabSelectedTextColor="@color/tab_menu_item_text_color_checked"
            app:tabTextAppearance="@style/TabLayoutTextStyle"
            app:tabTextColor="@color/tab_menu_item_text_color_normal" />
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

相关文章

网友评论

      本文标题:CollapsingToolbarLayout折叠滑动吸顶Tab

      本文链接:https://www.haomeiwen.com/subject/rftzhdtx.html