簡體   English   中英

隱藏工具欄滾動與片段內的recyclerview

[英]Hiding Toolbar on scroll with recyclerview inside fragment

當滾動片段內的recyclerview時,我正試圖讓工具欄在滾動時折疊。 首先,繼承我的主要布局:

<DrawerLayout>

     <RelativeLayout
        android:id="@+id/mainRelativeLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

        <android.support.design.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"  
            >

            <android.support.design.widget.AppBarLayout
                android:id="@+id/appBarLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                >

                <Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:elevation="5dp"
                    app:layout_scrollFlags="scroll|enterAlways"
                    >

                </Toolbar>

            </android.support.design.widget.AppBarLayout>

            <FrameLayout
                android:id="@+id/container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />

        </android.support.design.widget.CoordinatorLayout>

    </RelativeLayout>

<!-- ignore -->
<drawercontents>
</DrawerLayout>

因此你可能猜到我的片段被加載到@id/container 我的第一個片段包含recyclerview,我在該recyclerview上設置app:layout_behavior="@string/appbar_scrolling_view_behavior" 這確實有效,工具欄在滾動時折疊。 問題是工具欄覆蓋了片段未折疊時的頂部內容。 在片段容器中添加一個等於工具欄大小的上邊距只會在工具欄崩潰時(顯然)導致留下空白。

什么不見​​了? 有任何想法嗎?

編輯:根據要求,這是包含recyclerview的片段的布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    android:id="@+id/feed"
    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="#00000000"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/tabanim_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tabanim_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

尚未測試過,但這是你必須做的:

  • app:layout_behavior="@string/appbar_scrolling_view_behavior"到帶有id containerFrameLayout
  • android:fitsSystemWindows = "true"AppBarLayout

這正是我在我的應用程序中所做的,它的工作原理。 如果這對您不起作用,請嘗試清理(在Android Studio上, 構建 - >清理項目 )您的項目並再次運行該應用程序。

我的朋友今天我做了這個並且工作完美,我有2個片段都有RecyclerView並且可以滾動Toolbar 我看了chrisbanes's CheeseSquareCheeseSquare

如果你看看MainActivityTabLayout有3個片段,所有片段都可以滾動Toolbar 所以我准備了這個布局,也許你會看看:

我的activity_home.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <include layout="@layout/content_home"/>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:layout_gravity="start"
        app:menu="@menu/homepage_leftdrawer">


    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

content_home.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme3.AppBarOverlay">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:layout_scrollFlags="scroll|enterAlways|snap" />


<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabTextColor="@color/Transparent_few_white"
    app:tabIndicatorColor="@color/White"
    app:tabTextAppearance="@style/TabLayoutTextStyle"
    app:tabIndicatorHeight="3dp"
    app:tabSelectedTextColor="@color/White"
    android:background="@color/ColorPrimary"
    app:tabPaddingStart="0dp"
    app:tabPaddingEnd="0dp"/>

</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/pager2"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</android.support.design.widget.CoordinatorLayout>

關鍵在哪里:

如果你看看我的ViewPager ,它有app:layout_behavior="@string/appbar_scrolling_view_behavior"屬性然后就是這樣。 不要在片段中添加任何其他行為。 試試這樣,請結果!

你需要類似於Play商店應用的東西。 在這里粘貼布局。 這個代碼很簡單,您可以自己編寫代碼。

  1. 的FrameLayout
    • ImageView的
    • 滾動型
      1. 的LinearLayout
      2. Horizo​​ntalScrollView
        • 的LinearLayout
    • 工具欄

使用上面的布局層次結構,您可以實現以下目標:

在此輸入圖像描述

將一個布局名稱設置為toolbar.xml並將其包含在您要使用的代碼中,但提醒一件事請不要使用其他任何布局,如Relativelayout,Linearlayout和其他布局

您可以通過向layout_scrollFlags屬性添加第三個標志 - snap來解決此問題。

<Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:elevation="5dp"
    app:layout_scrollFlags="scroll|enterAlways|snap" />

使用此選項將確定僅在部分減少視圖時要執行的操作。 如果滾動結束並且視圖大小已減小到原始視圖的小於50%,則此視圖將恢復為其原始大小。 如果尺寸大於其尺寸的50%,它將完全消失。

檢查此鏈接

我使用SwipeRefreshLayout或只是一個LinearLayoutRelativeLayout作為Fragment布局的根,它正在工作。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/swipe_refresh_layout_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/mycustomcolor"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.v4.widget.SwipeRefreshLayout>

使用RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fragment2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view_android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true" 
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</RelativeLayout>

那應該是好的去。

您可以使用折疊布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapse_toolbar"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/zxing_transparent"
            android:paddingBottom="2dip"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleGravity="bottom|center_horizontal"
            app:expandedTitleMarginBottom="50dip"
            app:collapsedTitleGravity="top|center_vertical"
            app:collapsedTitleTextAppearance="@style/collapseTitle">

            <Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:elevation="5dp"
                    app:layout_scrollFlags="scroll|enterAlways"
                    >
                </Toolbar>



        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

  <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />


</android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:contentScrim="?attr/colorPrimary"
        >
        <android.support.v7.widget.Toolbar
            android:id="@+id/appBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_collapseMode="pin" />

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_below="@+id/app_bar_layout"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:weightSum="1">
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent" 
            android:text="Your recycler view should go here"/>
        </FrameLayout>
</LinearLayout>

在此輸入圖像描述

也碰到了這個問題。 但是找到了解決方案。 使用xml返工的解決方案不可能,因此您需要以編程方式執行此操作。 我們需要的只是Inflater 是的,是的,那很簡單。 在飛行中更改xml以工作所有滾動。

在你的framelayout集中

android:layout_below="@+id/appBarLayout"

如果那不起作用,那試試這個:

android:layout_below="@+id/toolbar"

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM