CoordinatorLayout与ViewPager

时间:2015-07-01 15:31:58

标签: android android-viewpager android-coordinatorlayout android-appbarlayout

我的应用中有以下主页面布局:

<?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.v4.view.ViewPager
        android:id="@+id/mainPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/app_bar_scrolling_view_behavior">
    </android.support.v4.view.ViewPager>

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

        <android.support.v7.widget.Toolbar
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/actionToolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:title="@string/app_name"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways">
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|enterAlways">
        </android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

可滚动内容是ViewPager。我将ViewPager与TabLayout结合使用:

ViewPager viewPager = (ViewPager) v.findViewById(R.id.mainPager);
TabLayout tabLayout = (TabLayout) v.findViewById(R.id.tabLayout);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

ViewPager适配器中的所有片段都有一个RecyclerView。 当我第一次向上滚动RecyclerView的内容(以便隐藏应用栏)时,然后切换到ViewPager中的另一页数据并滚动RecyclerView的内容,应用栏是......隐身的。 导致此问题的主要步骤:

  1. 在API级别为11或更高的设备上运行(在api级别低于11的设备上运行正常);
  2. 滚动内容;
  3. 切换到另一个ViewPager的页面;
  4. 向下滚动内容以使应用栏可见;
  5. app栏无形。
  6. 我的问题在哪里?感谢。

    EDIT1:片段工具栏初始化

    Toolbar toolbar = (Toolbar) view.findViewById(R.id.actionToolbar);
    toolbar.setTitle(toolbarTitleResId);
    toolbar.inflateMenu(menuResId);
    toolbar.setOnMenuItemClickListener(listener);
    

    EDIT2:片段的布局

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <android.support.v7.widget.Toolbar
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/actionToolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:layout_alignParentTop="true"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:background="?attr/colorPrimary">
        </android.support.v7.widget.Toolbar>
    
        <View
            android:id="@+id/anchor"
            android:layout_height="8dp"
            android:layout_width="match_parent"
            android:background="@drawable/shadow_gradient_drawable"
            android:layout_below="@+id/actionToolbar">
        </View>
    
        <android.support.v7.widget.RecyclerView
            android:id="@+id/verticalRecyclerView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/anchor"/>
    </RelativeLayout>
    

2 个答案:

答案 0 :(得分:8)

我能够在我的API 16设备上重现这一点(在API 22上仍然没有问题)。这绝对是AppBarLayout中的一个错误,但是,有一个快速的解决方法。当AppBarLayout完全隐藏时,这只是一个问题。添加一个高度为1dp的视图到AppBarLayout,一切都应该工作,而不会在视图上显而易见。

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

    <!-- Toolbar and tab bar code -->
    ...

    <!-- Add this -->
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/colorPrimary" />
</android.support.design.widget.AppBarLayout>

答案 1 :(得分:0)

我们也可以将此解决方案应用于切换到另一个ViewPager的页面

appBarLayout.setExpanded(true, true);

这里是第二个参数如果它是真的,AppBarLayout将随动画扩展。