2017-04-12 71 views
0

我正在設計具有標籤佈局的摺疊工具欄。當摺疊工具欄佈局完全顯示時,它會顯示爲我想要的。材質設計 - 滾動時工具欄和標籤佈局重疊

即使發生任何滾動,我也想固定工具欄和選項卡欄。然而,當appbar摺疊時,工具欄和tablayout重疊,如下圖所示:

enter image description here

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/main_content" 
    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/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
     android:fitsSystemWindows="true"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed" 
      app:titleEnabled="false" 
      android:fitsSystemWindows="true"> 

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

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:gravity="top" 
       android:minHeight="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
       app:titleMarginTop="13dp" 
       app:title="sample_pager_tabs_parallax_image"/> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tabs" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_gravity="bottom" 
       app:layout_collapseMode="pin"/> 


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


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

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

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

我把

android:layout_marginTop="100dp" 
android:fitsSystemWindows="true" 

內TabLayout,但它不工作。

將TabLayout置於CollapsingToolbarLayout之外可解決重疊問題。但是,我想在狀態欄,工具欄和標籤欄顯示視差圖像,如下圖所示: enter image description here

回答

0

就拿TabLayoutCollapsingToolbarLayout的,並將其移動到AppBarLayout,這應該解決您的問題。

<?xml version="1.0" encoding="utf-8"?> 
    <android.support.design.widget.CoordinatorLayout 
     android:id="@+id/main_content" 
     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:id="@+id/appbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
      android:fitsSystemWindows="true"> 

      <android.support.design.widget.CollapsingToolbarLayout 
       android:id="@+id/collapsing_toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:contentScrim="?attr/colorPrimary" 
       app:layout_scrollFlags="scroll|exitUntilCollapsed" 
       app:titleEnabled="false" 
       android:fitsSystemWindows="true"> 

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

       <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar" 
        android:layout_width="match_parent" 
        android:layout_height="?attr/actionBarSize" 
        android:gravity="top" 
        android:minHeight="?attr/actionBarSize" 
        app:layout_collapseMode="pin" 
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
        app:titleMarginTop="13dp" 
        app:title="sample_pager_tabs_parallax_image"/> 
      </android.support.design.widget.CollapsingToolbarLayout> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tabs" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_gravity="bottom" 
       app:layout_collapseMode="pin"/> 

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

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

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

把TabLayout出CollapsingToolbarLayout解決重疊問題。但是,我想使狀態欄,工具欄和標籤欄中顯示視差圖像。 – metis

+0

這不是你原來的問題的背景,你能編輯它來詳細說明理想的結果是什麼嗎?真的應該是一個新問題,因爲在此之前你沒有提到它。 –

+0

好的。我編輯了這個問題。 – metis

0

做這些事情:

1.put的<android.support.design.widget.TabLayoutCollapsingToolbarLayoutAppBarLayout

2.取出android:fitsSystemWindows="true"下從CoordinatorLayout

添加它3.Also適用app:layout_scrollFlags="scroll|enterAlways"Toolbar使其固定在頂部的位置

+0

將TabLayout放在CollapsingToolbarLayout之外解決了重疊問題。但是,我想使狀態欄,工具欄和標籤欄中顯示視差圖像。 – metis

+0

當前顯示的視差圖像在哪裏? – rafsanahmad007

+0

我編輯了問題 – metis

0
  1. 更改您的Toolbar身高。使用android:layout_height="104dp"而不是android:layout_height="?attr/actionBarSize"
  2. TabLayout刪除屬性app:layout_collapseMode="pin"

試試這個:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/main_content" 
    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/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
     android:fitsSystemWindows="true"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed" 
      app:titleEnabled="false" 
      android:fitsSystemWindows="true"> 

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

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="104dp" 
       android:gravity="top" 
       android:minHeight="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
       app:titleMarginTop="13dp" 
       app:title="sample_pager_tabs_parallax_image"/> 

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

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

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

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