画像とappbarのタイトルをスクロールし、Androidではタブを残す

Question

私はアプリのサポートとCoordinatorLayoutを使用します。私はCollapsingToolbarLayoutを実装してImageViewとToolbarをスクロール時に隠すことができました。私はタブで苦労している - TabLayoutは崩壊していない、それは良いです。問題はそれがうまく見えないことです - 私はそれが背景として写真の下部を使用したいです。

TabLayoutをCollapsingToolbarLayoutの範囲内で移動し、背景として画像を使用しますが、画面の上部にタブがあり、スクロールするときにタブが隠されるという2つの問題があります。

は、私はそれが絵

の一番下に座って効果を実現したいと他の部分は

離れてスクロールされたときには、画面の上部に滞在します

レイアウト：

<android.support.design.widget.CoordinatorLayout 
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"> 

<android.support.design.widget.AppBarLayout 
    android:id="@+id/main.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/main.collapsing" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_scrollFlags="scroll|enterAlways|snap" 
     android:fitsSystemWindows="true" 
     app:contentScrim="?attr/colorPrimary" 
     app:expandedTitleMarginStart="4dp" 
     app:expandedTitleMarginEnd="64dp" 
     > 

     <ImageView 
      android:id="@+id/main.backdrop" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:scaleType="centerCrop" 
      android:fitsSystemWindows="true" 
      android:src="@drawable/digit1_hill" 
      app:layout_collapseMode="parallax" 
      /> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/main.toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
      app:layout_collapseMode="pin" 
      /> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/main.tabs" 
      android:layout_width="fill_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse" 
      app:tabIndicatorColor="?android:attr/textColorPrimaryInverse" 
      app:tabIndicatorHeight="4dp" 
      /> 
    </android.support.design.widget.CollapsingToolbarLayout> 
</android.support.design.widget.AppBarLayout> 

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

Answer 1

はあなたのTabLayoutがandroid:layout_gravity="bottom"

を持っている必要がありながら試してみてくださいあなたのToolbarapp:layout_scrollFlags="scroll|enterAlways"とapp:layout_scrollFlags="scroll|exitUntilCollapsed"にごCollapsingToolbarLayoutに指示する必要があります：あなたは切り替える必要があり、 さらに

<android.support.design.widget.CoordinatorLayout 
    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"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/main.appbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
     android:fitsSystemWindows="true"> 
     <!-- Fit the system windows for your CollapsingToolbarLayout 
     also set your height to wrap_content and give image a height--> 
     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/main.collapsing" 
      android:fitsSystemWindows="true" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:contentScrim="?attr/colorPrimary" 
      app:expandedTitleMarginStart="4dp" 
      app:expandedTitleMarginEnd="64dp"> 

      <ImageView 
       android:id="@+id/main.backdrop" 
       android:layout_width="match_parent" 
       android:layout_height="244dp" 
       android:scaleType="centerCrop" 
       android:fitsSystemWindows="true" 
       android:src="@drawable/digit1_hill" 
       app:layout_collapseMode="parallax"/> 
      <!-- Tell your toolbar to scroll|enterAlways --> 
      <android.support.v7.widget.Toolbar 
       android:id="@+id/main.toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
       app:layout_scrollFlags="scroll|enterAlways"/> 
      <!-- add layout_gravity="bottom" --> 
      <android.support.design.widget.TabLayout 
       android:id="@+id/main.tabs" 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content" 
       app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse" 
       app:tabIndicatorColor="?android:attr/textColorPrimaryInverse" 
       app:tabIndicatorHeight="4dp" 
       android:layout_gravity="bottom"/> 
     </android.support.design.widget.CollapsingToolbarLayout> 
    </android.support.design.widget.AppBarLayout> 

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

アップデートをお使いのテーマを追加するか、新しいテーマを追加してください：

<style name="NewAppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Include all items from original theming --> </style> 

10とタイトルがスタイルを作成隠すために：私はあなたがタブを除いて、ツールバーを非表示にしたいと思います

app:collapsedTitleTextAppearance="@style/Invisible"