时间戳

首页 > 解决方案 > 使用 appbarlayout 在 Scrollview 中固定 tablayout

android - 使用 appbarlayout 在 Scrollview 中固定 tablayout

问题描述

我的 android 应用程序希望有一个像 Facebook 页面这样的页面，当滚动到 tablayout 下方时，它将 tablayout 固定在屏幕顶部。

关于这个话题，我找到了一些答案。

将 TabLayout 固定到工具栏 Scrollview 的顶部和下方

如何使 tablayout 固定在操作栏下方？

但是，他们不想要我的应用程序情况，因为我想将我的卡片视图和标签布局保留在滚动视图中。我的 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>

标签： androidandroid-tablayoutandroid-nestedscrollviewandroid-viewpager2

解决方案

我相信您正在使用不必要的布局，请尝试以下代码以获取指导 -

主布局文件

<?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：当该位置仍在折叠工具栏内时，内容将保留在同一位置。

请检查CollapsingToolbarLayout 的折叠模式

快乐编码 -

推荐阅读