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>