使用 appbarlayout 在 Scrollview 中固定 tablayout

Question

我的 android 应用程序希望有一个类似 Facebook 页面的页面，当滚动到标签布局下方时，该页面将标签布局固定在屏幕顶部。

我已经找到了一些关于这个主题的答案。

pin TabLayout to top and below the toolbar Scrollview

How to make tablayout fixed below action bar?

但是，他们不想要我的应用情况，因为我想在滚动视图中保留我的卡片视图和标签布局。我的 xml 模板如下。有什么见解或解决方案可以分享吗？

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.google.android.material.appbar.AppBarLayout 
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:liftOnScroll="true">

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

//toolbar content
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView
android:id="@+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<androidx.cardview.widget.CardView
android:id="@+id/checkinhome"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Content card1"
android:textAppearance="@style/TextAppearance.AppCompat.Display3" />
</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
android:id="@+id/checkinhome"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Content card2"
android:textAppearance="@style/TextAppearance.AppCompat.Display3" />
</androidx.cardview.widget.CardView>
<com.google.android.material.tabs.TabLayout

android:layout_width="match_parent"
android:layout_height="match_parent">


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


<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

</LinearLayout>
</androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 1

我认为您使用了不必要的布局，请尝试以下代码以获取指导 -

主布局文件

<?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">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/colorPrimaryDark"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

<!--         you can put any content you want to hide after scroll in header-->
<!--         as example in putting this image view-->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:padding="20dp"
                android:scaleType="fitCenter"
                android:src="@drawable/default_img"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.25" />

            <com.google.android.material.tabs.TabLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_collapseMode="pin"
                android:layout_gravity="bottom" />

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

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

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!--            put content of scroll view here -->
        <include layout="scroll_content_layout" />

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

上面的布局文件将导致以下结果-

文件scroll_content_layout.xml 将包含您想要的内容作为滚动视图的一部分。

滚动内容文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <androidx.viewpager2.widget.ViewPager2
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    
<!--    some other layout as part of scroll view -->
        
</LinearLayout>

编辑

CollapsingToolbarLayout 中的内容将在滚动时折叠。您想要保持在顶部的任何视图或您需要使用layout_collapseMode 标志的任何其他自定义。

CollapseMode Parallax：内容会滚动一点 比嵌套滚动视图慢。您可以控制滚动速度 layout_collapseParallaxMultiplier 标志。

CollapseMode Pin：内容将保留在同一位置，而该位置仍在折叠工具栏中。

请查看Collapse modes of CollapsingToolbarLayout

快乐编码 -