AppBarLayout with recyclerView in nested fragment

前端 未结 3 1347
长情又很酷
长情又很酷 2020-12-31 12:58

As images are always better than words, I present to you my current layout.

The toolbar/tabs is in an activity.xml with a viewPager, and the recycle

相关标签:
3条回答
  • 2020-12-31 12:58

    I think the key for solving your problem is removing the Coordinatorlayout from the recycler view layout.

    This is the acitivity_main.xml inflated by the MainActivity with a placeholder layout to include

    <?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>

    This is the content layout with the tabs, appBar and 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>

    And finally, the RecyclerView layout inflated by a fragment.

    <?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" />

    If you want a good reference code you can check the awesome demo created by Chris Banes from Google of the CoordinatorLayout and other design support library features.

    The full source code can be found on github. This was the easiest way for me to understand the logic behind it.

    I Hope it helps. (I've finally posted something here! :D)

    0 讨论(0)
  • 2020-12-31 13:06

    What's with all the crazy code/layouts?

    In the fragments where you don't want the toolbar to scroll, do this in the fragment's onCreateView():

        recyclerView.setNestedScrollingEnabled(false);
    
    0 讨论(0)
  • 2020-12-31 13:09

    You can do this by implementing ViewPager.OnPageChangeListener and enabling/disabling AppBarLayout.LayoutParams scrolling flags.

    Here is a sample code:

            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) {
    
            }
        });
    

    But it does not seem like a good UX pattern. It will be confusing for users.

    0 讨论(0)
提交回复
热议问题