2017-04-12 9 views
0

タブレイアウトの折り畳みツールバーを設計しています。ツールバーのレイアウトが完全に表示されているときは、そのレイアウトが表示されます。マテリアルデザイン - スクロール時にツールバーとタブレイアウトが重複する

スクロールが発生してもツールバーとタブバーを固定したいと考えています。アプリケーションバーが折りたたまれたときに、以下のようにしかし、ツールバーと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> 

私はTabLayout内

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

を入れて、しかし、それは動作しません。

CollapsingToolbarLayoutからTabLayoutを外すと、重複する問題が解決されます。しかし、私は、以下に示すように、ステータスバー、ツールバーとタブバーに示す視差画像にしたい: enter image description here

答えて

0

CollapsingToolbarLayoutの外にTabLayoutを取り、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

がCollapsingToolbarLayoutの外にTabLayoutを置く重複問題を解決します。しかし、私は、視差画像をステータスバー、ツールバー、タブバーに表示したい。 – metis

+0

それはあなたの元の質問の文脈ではありませんでしたが、あなたはそれを編集して、望みの結果がどんなものかを精緻化することができますか?あなたがこれに先立ってそれを言及していないので、本当に新しい質問になるはずです。 –

+0

OK。私はその質問を編集した。 – metis

0

これらの事ですか:CollapsingToolbarLayoutのうち<android.support.design.widget.TabLayout 1.put

をしてToolbarapp:layout_scrollFlags="scroll|enterAlways"を適用3.Also CoordinatorLayout

からAppBarLayout

2.Remove android:fitsSystemWindows="true"の下でそれを追加トップポーションで修正するようにする

+0

CollapsingToolbarLayoutからTabLayoutを外すと、重複する問題が解決されます。しかし、私は、視差画像をステータスバー、ツールバー、タブバーに表示したい。 – metis

+0

現在、視差画像はどこに表示されていますか? – rafsanahmad007

+0

私は質問 – metis

0
  1. Toolbarの身長を変更してください。 android:layout_height="?attr/actionBarSize"の代わりにandroid:layout_height="104dp"を使用してください。
  2. 属性app:layout_collapseMode="pin"TabLayoutから削除します。

これを試してみてください:

<?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> 
関連する問題