CollapsingToolbar, Viewpager 有 recyclerview 和 NestedScrollview

Posted

技术标签:

【中文标题】CollapsingToolbar, Viewpager 有 recyclerview 和 NestedScrollview【英文标题】:CollapsingToolbar, Viewpager having recyclerview and NestedScrollview 【发布时间】:2021-03-10 23:21:04 【问题描述】:

这是我的布局的 xml,其中包含 CollapsingToolbar 和 viewpager。我正在使用 NestedScrollViews,以便 CollapsingToolbarLayout、swipetoreferesh 和 viewpager 工作顺利。

    <layout 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">
    
        <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_
            android:layout_
            android:orientation="vertical"
            tools:context=".wallet_staking_survey.ui.survey_main.SurveyMain2Fragment">
    
    
            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/appBarlayout"
                android:layout_
                android:layout_
                android:fitsSystemWindows="true"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    
                <com.google.android.material.appbar.CollapsingToolbarLayout
                    android:layout_
                    android:layout_
                    android:background="@android:color/white"
                    android:fitsSystemWindows="true"
                    app:contentScrim="@color/colorPrimary"
                    app:expandedTitleMarginEnd="64dp"
                    app:expandedTitleMarginStart="48dp"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed">
    
                    <ImageView
                        android:layout_
                        android:layout_
                        android:fitsSystemWindows="true"
                        android:scaleType="centerCrop"
                        android:src="@drawable/bg_kyc_progress_level"
                        app:layout_collapseMode="parallax" />
    
                    <LinearLayout
                        android:layout_
                        android:layout_
                        android:gravity="center"
                        android:orientation="vertical">
    
                        <FrameLayout
                            android:layout_
                            android:layout_
                            android:layout_gravity="center_horizontal"
                            android:layout_marginTop="@dimen/_20sdp"
                            android:orientation="vertical">
    
                            <com.realresearch.survey.customviews.DonutProgress
                                android:id="@+id/levelProgress"
                                android:layout_
                                android:layout_
                                android:layout_gravity="center"
                                app:donut_background_color="@android:color/transparent"
                                app:donut_circle_starting_degree="270"
                                app:donut_finished_color="@color/md_light_green_300"
                                app:donut_finished_stroke_
                                app:donut_text=""
                                app:donut_unfinished_color="@color/md_grey_100"
                                app:donut_unfinished_stroke_ />
    
                            <LinearLayout
                                android:layout_
                                android:layout_
                                android:layout_gravity="center"
                                android:gravity="center"
                                android:orientation="vertical">
    
                                <TextView
                                    android:id="@+id/tvLevel"
                                    android:layout_
                                    android:layout_
                                    android:fontFamily="@font/recipekorea"
                                    android:text="@string/level_2"
                                    android:textColor="@android:color/white"
                                    android:textSize="@dimen/_24sdp" />
                            <LinearLayout
                                android:id="@+id/llKycLevelProgress"
                                android:layout_
                                android:layout_
                                android:layout_gravity="center"
                                android:gravity="center"
                                android:orientation="horizontal">
    
                                <TextView
                                    android:id="@+id/tvUpgradKyc"
                                    android:layout_
                                    android:layout_
                                    android:layout_marginTop="@dimen/_5sdp"
                                    android:fontFamily="@font/recipekorea"
                                    android:text="@string/try_updating_your_kyc_level"
                                    android:textColor="@android:color/white"
                                    android:textSize="@dimen/_14sdp" />
    
                                <ImageView
                                    android:id="@+id/ivHelp"
                                    android:layout_
                                    android:layout_
                                    android:layout_marginTop="@dimen/_5sdp"
                                    android:layout_marginStart="@dimen/_4sdp"
                                    android:src="@drawable/ic_baseline_help_24"
                                    android:text="@string/try_updating_your_kyc_level"
                                    android:textColor="@android:color/white"
                                    android:textSize="@dimen/_14sdp" />
                            </LinearLayout>
                            </LinearLayout>
                        </FrameLayout>
    
                    <androidx.cardview.widget.CardView
                        android:id="@+id/cv_wallet_balance"
                        android:layout_
                        android:layout_
                        android:layout_marginStart="@dimen/_30sdp"
                        android:layout_marginTop="@dimen/_230sdp"
                        android:layout_marginEnd="@dimen/_30sdp"
                        android:layout_marginBottom="@dimen/_10sdp"
                        app:cardCornerRadius="@dimen/_35sdp">
    
    
                        <RelativeLayout
                            android:layout_
                            android:layout_
                            android:layout_gravity="center">
    
                            <TextView
                                android:id="@+id/title"
                                android:layout_
                                android:layout_
                                android:layout_centerHorizontal="true"
                                android:fontFamily="@font/recipekorea"
                                android:text="@string/my_tnc"
                                android:textColor="@color/textColor"
                                android:textSize="@dimen/_16sdp" />
    
                            <LinearLayout
                                android:layout_
                                android:layout_
                                android:layout_below="@id/title">
    
                                <TextView
                                    android:id="@+id/tvMyTNCBalance"
                                    android:layout_
                                    android:layout_
                                    android:fontFamily="@font/recipekorea"
                                    android:gravity="center"
                                    android:text="10,000"
                                    android:textColor="@color/pinkRed"
                                    android:textSize="@dimen/_20sdp" />
    
                                <TextView
                                    android:layout_
                                    android:layout_
                                    android:layout_marginStart="@dimen/_5sdp"
                                    android:fontFamily="@font/recipekorea"
                                    android:text="@string/tnc"
                                    android:textColor="@color/md_grey_400" />
    
                            </LinearLayout>
    
                        </RelativeLayout>
    
                    </androidx.cardview.widget.CardView>
    
                </com.google.android.material.appbar.CollapsingToolbarLayout>
    
                <!--- ADD TAB_LAYOUT HERE-->
                <com.google.android.material.tabs.TabLayout
                    android:id="@+id/surveyTabs"
                    android:layout_
                    android:layout_
                    android:fillViewport="true"
                    app:tabGravity="fill"
                    app:tabMode="scrollable" />
    
            </com.google.android.material.appbar.AppBarLayout>
    
    
            <androidx.core.widget.NestedScrollView
                android:layout_
                android:layout_
                android:layout_gravity="fill_vertical"
                android:clipToPadding="false"
                android:fillViewport="true"
                android:isScrollContainer="false"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
                <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
                    android:id="@+id/swipe_to_refresh"
                    android:layout_
                    android:layout_>
                    <androidx.core.widget.NestedScrollView
                        android:id="@+id/horizontalScrollView"
                        android:layout_
                        android:layout_
                        android:clipToPadding="false"
                        android:fillViewport="true"
                        android:isScrollContainer="false">
                    <androidx.viewpager2.widget.ViewPager2
                        android:id="@+id/surveyFilterPager"
                        android:layout_
                        android:layout_ />
                    </androidx.core.widget.NestedScrollView>
                </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
            </androidx.core.widget.NestedScrollView>
        </androidx.coordinatorlayout.widget.CoordinatorLayout>
    </layout>

我正在使用具有 recyclerview 的单个片段在 viewpager 中显示三个片段,即 FragmentA、FragmentB 和 FragmentC。现在的问题是 FragmentB 的高度等于 FragmentA 的内容,导致 FragmentB 中的可滚动空间为空。 FragmentC 也是如此。下面是我的 Fragment 的 xml 有 recyclerview。

      <layout>

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_
        android:layout_
        android:orientation="vertical"
        android:weightSum="3">

        <LinearLayout
            android:id="@+id/ll_no_survey"
            android:layout_
            android:layout_
            android:layout_centerHorizontal="true"
            android:layout_marginTop="@dimen/_50sdp"
            android:gravity="center"
            android:visibility="gone"
            android:orientation="vertical">

            <ImageView
                android:layout_
                android:layout_
                android:src="@drawable/ic_info" />

            <TextView
                android:layout_
                android:layout_
                android:layout_margin="8dp"
                android:fontFamily="@font/open_sans_semi_bold"
                android:text="@string/no_survey_response"
                android:textColor="@color/defaultTextColor"
                android:textSize="17.3sp" />
        </LinearLayout>


        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/survey_recyclerview"
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:visibility="visible" />

        <TextView
            android:layout_
            android:layout_
            android:layout_marginTop="10dp"
            android:fontFamily="@font/open_sans_semi_bold"
            android:text="@string/all_surveys"
            android:textColor="@color/c_0078AB"
            android:textSize="17.3sp"
            android:visibility="gone" />
    </RelativeLayout>
</layout>

请帮助我,因为我无法找到任何解决方案。

【问题讨论】:

【参考方案1】:

第二个NestedScrollView好像没必要,你可以试试下面的代码:

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_>

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarlayout"
        android:layout_
        android:layout_
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_
            android:layout_
            android:background="@android:color/white"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_
                android:layout_
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <LinearLayout
                android:layout_
                android:layout_
                android:gravity="center"
                android:orientation="vertical">

                <FrameLayout
                    android:layout_
                    android:layout_
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="@dimen/_20sdp"
                    android:orientation="vertical">

                    <com.realresearch.survey.customviews.DonutProgress
                        android:id="@+id/levelProgress"
                        app:donut_background_color="@android:color/transparent"
                        app:donut_circle_starting_degree="270"
                        app:donut_finished_color="@color/md_light_green_300"
                        app:donut_finished_stroke_
                        app:donut_text=""
                        app:donut_unfinished_color="@color/md_grey_100"
                        app:donut_unfinished_stroke_
                        android:layout_
                        android:layout_
                        android:layout_gravity="center" />

                    <LinearLayout
                        android:layout_
                        android:layout_
                        android:layout_gravity="center"
                        android:gravity="center"
                        android:orientation="vertical">

                        <TextView
                            android:id="@+id/tvLevel"
                            android:layout_
                            android:layout_
                            android:text="level_2"
                            android:textColor="@android:color/white"
                            android:textSize="@dimen/_24sdp" />

                        <LinearLayout
                            android:id="@+id/llKycLevelProgress"
                            android:layout_
                            android:layout_
                            android:layout_gravity="center"
                            android:gravity="center"
                            android:orientation="horizontal">

                            <TextView
                                android:id="@+id/tvUpgradKyc"
                                android:layout_
                                android:layout_
                                android:layout_marginTop="@dimen/_5sdp"
                                android:text="try_updating_your_kyc_level"
                                android:textColor="@android:color/white"
                                android:textSize="@dimen/_14sdp" />

                            <ImageView
                                android:id="@+id/ivHelp"
                                android:layout_
                                android:layout_
                                android:layout_marginStart="@dimen/_4sdp"
                                android:layout_marginTop="@dimen/_5sdp"
                                android:src="@drawable/ic_baseline_help_24"
                                android:text="try_updating_your_kyc_level"
                                android:textColor="@android:color/white"
                                android:textSize="@dimen/_14sdp" />
                        </LinearLayout>
                    </LinearLayout>
                </FrameLayout>

                <androidx.cardview.widget.CardView
                    android:id="@+id/cv_wallet_balance"
                    android:layout_
                    android:layout_
                    android:layout_marginStart="@dimen/_30sdp"
                    android:layout_marginTop="@dimen/_230sdp"
                    android:layout_marginEnd="@dimen/_30sdp"
                    android:layout_marginBottom="@dimen/_10sdp"
                    app:cardCornerRadius="@dimen/_35sdp">


                    <RelativeLayout
                        android:layout_
                        android:layout_
                        android:layout_gravity="center">

                        <TextView
                            android:id="@+id/title"
                            android:layout_
                            android:layout_
                            android:layout_centerHorizontal="true"
                            android:text="my_tnc"
                            android:textSize="@dimen/_16sdp" />

                        <LinearLayout
                            android:layout_
                            android:layout_
                            android:layout_below="@id/title">

                            <TextView
                                android:id="@+id/tvMyTNCBalance"
                                android:layout_
                                android:layout_
                                android:gravity="center"
                                android:text="10,000"
                                android:textSize="@dimen/_20sdp" />

                            <TextView
                                android:layout_
                                android:layout_
                                android:layout_marginStart="@dimen/_5sdp"
                                android:text="tnc" />

                        </LinearLayout>

                    </RelativeLayout>

                </androidx.cardview.widget.CardView>
            </LinearLayout>
        </com.google.android.material.appbar.CollapsingToolbarLayout>

        <!--- ADD TAB_LAYOUT HERE-->
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/surveyTabs"
            android:layout_
            android:layout_
            android:fillViewport="true"
            app:tabGravity="fill"
            app:tabMode="scrollable" />

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

    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/swipe_to_refresh"
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <androidx.core.widget.NestedScrollView
            android:id="@+id/horizontalScrollView"
            android:layout_
            android:layout_
            android:fillViewport="true">

            <androidx.viewpager2.widget.ViewPager2
                android:id="@+id/surveyFilterPager"
                android:layout_
                android:layout_ />

        </androidx.core.widget.NestedScrollView>
    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

【讨论】:

以上是关于CollapsingToolbar, Viewpager 有 recyclerview 和 NestedScrollview的主要内容,如果未能解决你的问题,请参考以下文章

滚动没有内容时如何禁用 CollapsingToolbar 的折叠?

使用 CollapsingToolbar 滚动时如何更新工具栏

如何在CollapsingToolbar中使用Map的点击事件

如何用CollapsingToolbar替换CoordinatorLayout中的CardView?

AppBarLayout 上的 EdgeEffect

anko的基本viewPager示例