AppBarLayout與recyclerView在嵌套片段

由於圖像總是比單詞好，我向你展示my current layout。AppBarLayout與recyclerView在嵌套片段

工具欄/選項卡位於具有viewPager的activity.xml中，而recyclerView位於viewPager內的片段中。所以你可以左右滑動查看其他內容。

我的問題是，我想讓AppBarLayout在其滾動行爲中綁定到第一個片段的recyclerView，但是而不是到其他片段。

在下面的代碼中，我做了這個綁定，但它不起作用，因爲recyclerView無法識別外部佈局中的AppBarLayout。你有解決這個問題的方法嗎？

代碼的活動：

<android.support.design.widget.CoordinatorLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
xmlns:fab="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/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" > 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar_main" 
      android:layout_width="match_parent" 
      /* pretty stuff */ 
      app:layout_scrollFlags="scroll|enterAlways"> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tabs" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       /* pretty stuff */ /> 

     </android.support.v7.widget.Toolbar> 

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

    <android.support.v4.view.ViewPager 
     android:id="@+id/main_pager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" /> 

    <android.support.design.widget.SupportFloatingActionsMenu 
      ...> 
      /* Code for a fancy fab w/ menu */ 

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

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

對於含recyclerView片段：

<android.support.design.widget.CoordinatorLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="com.insa.burnd.view.MainActivity.NewsfeedFragment" 
    android:id="@+id/fragment_newsfeed"> 

    <android.support.v4.widget.SwipeRefreshLayout 
     android:id="@+id/swipe_layout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <android.support.v7.widget.RecyclerView 
      android:id="@+id/recyclerView" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" /> 

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

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

非常感謝你:)！

來源

2015-07-01 Mehdi

你問同樣的問題/代碼在這裏：http://stackoverflow.com/questions/ 31144526/tablayout-inside-toolbar –

不，這不是一回事。問題非常不同，代碼幾乎相同（並且gif是相同的）。 – Mehdi

您可以通過執行ViewPager.OnPageChangeListener並啓用/禁用AppBarLayout.LayoutParams滾動標誌來實現此目的。

這裏是一個示例代碼：

 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { 
     @Override 
     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 

     } 

     @Override 
     public void onPageSelected(int position) { 
      if (position == 0) { 
       //turn on scrolling 
       AppBarLayout.LayoutParams toolbarLayoutParams = (AppBarLayout.LayoutParams) mToolbar.getLayoutParams(); 
       toolbarLayoutParams.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL | AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS); 
       mToolbar.setLayoutParams(toolbarLayoutParams); 

       CoordinatorLayout.LayoutParams appBarLayoutParams = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams(); 
       appBarLayoutParams.setBehavior(new AppBarLayout.Behavior()); 
       appBarLayout.setLayoutParams(appBarLayoutParams); 
      } else { 
       //turn off scrolling 
       AppBarLayout.LayoutParams toolbarLayoutParams = (AppBarLayout.LayoutParams) mToolbar.getLayoutParams(); 
       toolbarLayoutParams.setScrollFlags(0); 
       mToolbar.setLayoutParams(toolbarLayoutParams); 

       CoordinatorLayout.LayoutParams appBarLayoutParams = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams(); 
       appBarLayoutParams.setBehavior(null); 
       appBarLayout.setLayoutParams(appBarLayoutParams); 
      } 
     } 

     @Override 
     public void onPageScrollStateChanged(int state) { 

     } 
    });

但它似乎並不像一個很好的UX模式。這會讓用戶感到困惑。

來源

2015-07-01 17:22:38

謝謝！有用：）！至於它是否是一個好的用戶體驗模式，我非常關心這一點，但其他片段不能滾動，所以也許它不那麼令人困惑...... – Mehdi

雖然有一個小故障，但我想這是沒有辦法的。 .. – Mehdi

什麼故障？你能形容它嗎？ –

我認爲解決您的問題的關鍵是從回收站視圖佈局中刪除Coordinatorlayout。

這是通過用一個佔位符佈局在MainActivity充氣acitivity_main.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" 
 
    xmlns:tools="http://schemas.android.com/tools" 
 
    android:id="@+id/drawer_layout" 
 
    android:layout_width="match_parent" 
 
    android:layout_height="match_parent" 
 
    android:fitsSystemWindows="true" 
 
    tools:openDrawer="start"> 
 

 
    <include 
 
     layout="@layout/app_bar_main" 
 
     android:layout_width="match_parent" 
 
     android:layout_height="match_parent" /> 
 

 

 
    <android.support.design.widget.NavigationView 
 
     android:id="@+id/nav_view" 
 
     android:layout_width="wrap_content" 
 
     android:layout_height="match_parent" 
 
     android:layout_gravity="start" 
 
     app:itemIconTint="@color/drawer_item" 
 
     app:itemTextColor="@color/drawer_item" 
 
     android:fitsSystemWindows="true" 
 
     app:headerLayout="@layout/nav_header_main" 
 
     app:menu="@menu/activity_main_drawer" /> 
 

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

這是內容佈局與標籤，appBar和ViewPager

<?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" 
 
    xmlns:tools="http://schemas.android.com/tools" 
 
    android:layout_width="match_parent" 
 
    android:layout_height="match_parent" 
 
    android:background="@color/grey_200" 
 
    tools:context=".activities.MainActivity"> 
 

 

 
    <android.support.design.widget.AppBarLayout 
 
     android:id="@+id/app_bar_layout" 
 
     android:layout_width="match_parent" 
 
     android:layout_height="wrap_content" 
 
     android:theme="@style/AppTheme.AppBarOverlay" 
 
     app:elevation="0dp"> 
 

 
     <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" 
 
      app:popupTheme="@style/AppTheme.PopupOverlay" /> 
 

 
     <android.support.design.widget.TabLayout 
 
      android:id="@+id/tabs" 
 
      style="@style/MyCustomTabLayout" 
 
      android:layout_width="match_parent" 
 
      android:layout_height="wrap_content" /> 
 

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

 

 
    <android.support.v4.view.ViewPager 
 
     android:id="@+id/container" 
 
     android:layout_width="match_parent" 
 
     android:layout_height="match_parent" 
 
     android:layout_marginLeft="8dp" 
 
     android:layout_marginRight="8dp" 
 
     android:layout_marginTop="12dp" 
 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"></android.support.v4.view.ViewPager> 
 

 

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

最後，RecyclerView佈局膨脹了一個片段。

<?xml version="1.0" encoding="utf-8"?> 
 

 
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android" 
 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
 
    android:id="@+id/your_recycler_view" 
 
    android:layout_width="match_parent" 
 
    android:layout_height="match_parent" 
 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

如果你想有一個良好的參考代碼，您可以檢查由克里斯·巴內斯從CoordinatorLayout的谷歌和其他設計支持庫功能創建的真棒演示。

完整的源代碼可以在github找到。這是我理解其背後邏輯的最簡單方法。

我希望它有幫助。（我終於在這裏發佈了一些東西！：D）

來源

2016-02-29 15:36:01 iurysza

app：layout_behavior =「@ string/appbar_scrolling_view_behavior」這將使viewpager將appBarLayout的高度轉化爲底部，以便在片段佈局內部有任何視圖layout_gravity =「bottom」時根本不可見。 – Sjd

什麼是所有瘋狂的代碼/佈局？

在你不想在工具欄滾動片段，在onCreateView()片段的做到這一點：

recyclerView.setNestedScrollingEnabled(false);

來源

2016-02-29 16:29:16

AppBarLayout與recyclerView在嵌套片段

回答

相關問題