在工具栏折叠和更改字体大小时将 TabLayout 和 SearchView 隐藏在工具栏后面

Hide TabLayout and SearchView behind toolbar while toolbar collapses and change font size

提问人:fl4ash3r 提问时间:9/9/2023 最后编辑:fl4ash3r 更新时间:9/9/2023 访问量:15

问:

我有一个无法用 Android 解决的问题。我有一个由工具栏、工具栏下方的 SearchView 和 SearchView 下方的 TabLayout 组成的 UI。

我试图确保在滚动时,上面的 TabLayout 和 SearchView 都隐藏在工具栏后面并且不可见。同时,我需要工具栏标题以字体大小开头,并且在滚动时,大小会发生变化,直到它成为我定义的大小。 对于后者,我尝试过: app:collapsedTitleTextAppearance=“@style/TextAppearance.Finder.Step.Toolbar.Collapsed” app:expandedTitleTextAppearance=“@style/TextAppearance.Finder.Step.Toolbar.Expanded” 并有效。但是,我已经玩了很多scrollFlags,但是我还没有找到一种方法来隐藏工具栏后面的TabLayout和SearchView,而后者也被折叠了。我取得的最大成就是它们隐藏,但工具栏保持静止。有什么想法吗?我留下了一些我目前拥有它的图像。初始状态图像/滚动后的图像

如您所见,第一个图像是初始状态,第二个图像是当用户滚动并且工具栏保持静态时,不会折叠。我需要折叠工具栏,更改字体大小,并且搜索视图和选项卡布局隐藏在工具栏后面。

这是我当前用于该结果的 XML 代码:

<RelativeLayout
    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"
    android:background="@color/foundation"
    android:id="@+id/coordinatorLayout">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:background="@color/foundation">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/foundation"
            app:toolbarId="@id/toolbar"
           app:collapsedTitleTextAppearance="@style/TextAppearance.Finder.Step.Toolbar.Collapsed"
            app:expandedTitleTextAppearance="@style/TextAppearance.Finder.Step.Toolbar.Expanded"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="@dimen/dimen2XLarge"
                android:layout_marginTop="?actionBarSize"
                android:layout_marginBottom="?spacerSmall">

            </androidx.constraintlayout.widget.ConstraintLayout>

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                android:background="@color/foundation"
                android:paddingStart="0dp"
                android:paddingEnd="0dp"
                app:layout_collapseMode="pin"
                app:navigationIcon="@drawable/app_ic_back"
                app:titleTextColor="?android:textColorPrimary">

                <com.flasher.finder.ui.custom.UnderlinedButton
                    android:id="@+id/discardButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingEnd="@dimen/dimenMedium"
                    android:paddingStart="@dimen/dimenMedium"
                    android:layout_gravity="end"
                    style="@style/Widget.Finder.Button.Link"
                    android:text="@string/app_finder_all_files_text"/>

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

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

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

    <include
        layout="@layout/skeleton_files_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/appbarLayout"/>

    <com.finder.ui.custom.state.StateView
        android:id="@+id/errorStateView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_centerInParent="true"
        android:layout_marginStart="?spacerMedium"
        android:layout_marginEnd="?spacerMedium"
        android:visibility="gone" />

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/bottomCoordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/appbarLayout">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbarLayout2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:elevation="0dp"
            android:background="@color/foundation">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collapsingToolbarLayout2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/foundation"
                app:layout_scrollFlags="scroll|enterAlways">

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/searchViewContainer"
                    android:layout_width="match_parent"
                    android:layout_height="36dp"
                    android:layout_marginStart="@dimen/dimenMedium"
                    android:layout_marginEnd="@dimen/dimenMedium">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:paddingStart="@dimen/dimenMedium"
                        android:paddingEnd="@dimen/dimenMedium"
                        android:textColor="@color/textSupport"
                        android:textSize="17sp"
                        android:textAppearance="@style/TextAppearance.Finder.Subtitle2.Regular"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:drawableStartCompat="@drawable/app_ic_finder_search"
                        android:drawablePadding="@dimen/dimenMedium"
                        android:text="@string/app_finder_search_text"/>

                </androidx.constraintlayout.widget.ConstraintLayout>

                <com.google.android.material.tabs.TabLayout
                    android:id="@+id/tabLayout"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:layout_marginTop="36dp"
                    android:background="@color/foundation"/>

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

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

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="@dimen/dimenLarge"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</RelativeLayout>

另一方面,我在 Internet 上找到了许多 TabLayout + Toolbar + CollapsingToolbar 的例子,但在所有情况下,隐藏的是工具栏,而 TabLayout 仍然可见,我需要相反的东西。

安卓 android-toolbar android-tablayout android-coordinatorlayout android-collapsingtoolbarlayout

评论

0赞 Byte Code 9/10/2023
一种方法是侦听滚动状态,并根据滚动方向在 -/+y 轴上转换 TabLayout 和 SearchView。

答: 暂无答案