CollapsingToolBarLayout与TabLayout和ViewPager

Question

上午尝试创建类似于使用CordinatorLayout和CollapsingToolbarLayout，TabLayout和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" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/app_bar_layout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="?attr/colorPrimary" 
     android:fitsSystemWindows="true"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed" 
      app:contentScrim="?attr/colorPrimary" 
      app:expandedTitleMarginStart="48dp" 
      app:expandedTitleMarginEnd="64dp" 
      android:fitsSystemWindows="true"> 

      <ImageView 
       android:id="@+id/image" 
       android:src="@drawable/thumb_placeholder" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:scaleType="centerCrop" 
       android:fitsSystemWindows="true" 
       app:layout_collapseMode="parallax"/> 

      <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_collapseMode="pin" /> 

      <android.support.design.widget.TabLayout 
       xmlns:android="http://schemas.android.com/apk/res/android" 
       xmlns:app="http://schemas.android.com/apk/res-auto" 
       android:id="@+id/movie_tabs" 
       app:tabGravity="fill" 
       app:tabMode="fixed" 
       android:background="@color/colorPrimary" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:tabTextColor="@color/textColorPrimary" 
       app:tabSelectedTextColor="@color/textColorPrimary" 
       app:tabIndicatorColor="@color/textColorPrimary" 
       app:tabIndicatorHeight="4dp" 
       app:paddingStart="20dp" 
       app:paddingEnd="20dp"> 
      </android.support.design.widget.TabLayout> 

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

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

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

    </android.support.v4.view.ViewPager> 

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

测试它在我的设备上我得到这个

的ViewPager碎片覆盖的TabLayout如果有内容，并显示TabLayout上的ImageView时的顶没有内容。 我在做什么错，我仍然有点像Android的noob。

Answer 1

1. CollapsingToolbarLayout需要minHeight。这告诉父母AppBarLayout它可以折叠多少。我假设你想要Toolbar和TabLayout留在屏幕的顶部（因为你正在使用滚动标志exitUntilCollapsed）。我会让这两个人都有android:layout_height="?attr/actionBarSize"，并使用该值的两倍作为CollapsingToolbarLayout的minHeight。

2. ViewPager需要app:layout_behavior="@string/appbar_scrolling_view_behavior"。

Answer 2

最好是使用

<RelativeLayout 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" 

    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    tools:context="com.example.ehryourway.ehryourway.PatientChart" 
    tools:showIn="@layout/app_bar_patient_chart"> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/tablayout" 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     app:tabTextColor="@color/colorPrimary" 
     android:elevation="4dp" 
     android:minHeight="?attr/actionBarSize"> 

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

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

     android:layout_below="@id/tablayout"> 
     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 

    </android.support.v4.view.ViewPager> 

</RelativeLayout> 

Answer 3

旧的答案，但也许有人认为它是有用

<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:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:titleEnabled="false" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <VideoView 
       android:id="@+id/video_view" 
       android:layout_width="match_parent" 
       android:layout_height="200dp" /> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_marginBottom="48dp" 
       app:layout_collapseMode="pin" /> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tab_layout" 
       android:layout_width="match_parent" 
       android:layout_height="48dp" 
       android:layout_gravity="bottom" 
       app:tabMode="scrollable" /> 

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

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

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

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