Google Playストアのような折りたたみツールバー

Question

Google Playストアのような折りたたみツールバーを実装したいと考えています。私は幾分か機能を達成しましたが、それはポートレイトスクリーンでのみ機能しています。ここに私ができることのスクリーンショットのサンプルがあります。

は、今私が何をしたいのか、私は風景モードに私のデバイスの向きを変更すると、それはまさにこのようになるはずです。

だから私の主な質問は、これらの向きの変更を処理する方法は何か。このようなレイアウト動作を実現するために、この種のことを行うことができる正式なアンドロイドコンポーネントがありますか、または私のレイアウトにZインデックスを付ける必要があります。レイアウトは、両面のマージンと写真の上にZ-インデックスを付けることで正確に同じようになり、スクロールの動作はGoogle Playストアとまったく同じである必要があります。

これまでに書いたサンプルのxmlを添付しています。

このかなり類似した問題で

<?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:fitsSystemWindows="true" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

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

     <com.group3amd.materializeyourapp.widgets.SquareImageView 
      android:id="@+id/image" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:fitsSystemWindows="true" 
      android:scaleType="centerCrop" 
      app:layout_collapseMode="parallax" /> 

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

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

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

<android.support.v4.widget.NestedScrollView 
    android:id="@+id/scroll" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:clipToPadding="false" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

    <FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <android.support.v7.widget.CardView 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="24dp" 
      app:cardElevation="@dimen/spacing_medium" 
      app:cardUseCompatPadding="true"> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:orientation="vertical"> 

       <TextView 
        android:id="@+id/title" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="@dimen/spacing_large" 
        android:layout_marginRight="@dimen/spacing_large" 
        android:layout_marginTop="@dimen/spacing_large" 
        android:textAppearance="@style/TextAppearance.AppCompat.Headline" /> 

       <TextView 
        android:id="@+id/description" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_margin="@dimen/spacing_large" 
        android:text="@string/lorem_ipsum" 
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" /> 

      </LinearLayout> 

     </android.support.v7.widget.CardView> 

    </FrameLayout> 

</android.support.v4.widget.NestedScrollView> 

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab" 
    style="@style/FabStyle" 
    app:layout_anchor="@id/app_bar_layout" 
    app:layout_anchorGravity="bottom|right|end" /> 

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

Answer 1

：collapsing toolbar layout like google play store、あなたは以下のように答えを見つけるだろう：CollapsingToolbarLayout内部

ビュー app:layout_scrollFlagsを設定する必要はありません。無効。私のコードをベースに、 app:layout_scrollFlagsをCollapsingToolbarLayoutから app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"と に設定してください。minHeightを設定してください。

ツールバーは"pin"なのでenterAlwaysCollapsedは をスクロールすると呼び出されます。

があなたの collapsingtoolbarlayoutにapp:contentScrim="?attr/colorPrimary"を追加します。

<android.support.design.widget.CoordinatorLayout 
xmlns:app="http://schemas.android.com/apk/res-auto" 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:focusableInTouchMode="true"> 

<android.support.design.widget.AppBarLayout 
    android:id="@+id/appBarLayout" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.CollapsingToolbarLayout 
     android:id="@+id/seffafCollapsingToolbarLayout" 
     android:layout_width="match_parent" 
     android:layout_height="240dp" 
     android:minHeight="?attr/actionBarSize" 
     app:expandedTitleMarginEnd="164dp" 
     app:expandedTitleMarginStart="148dp" 
     app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> 

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

     <android.support.v7.widget.Toolbar 
      android:id="@+id/haber_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:theme="@style/ToolbarColoredBackArrow" 
      app:layout_collapseMode="pin"/> 

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

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


<android.support.v7.widget.RecyclerView 
    android:id="@+id/newsRecyclerView" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:scrollbars="vertical" 
    android:clickable="true" 
    android:background="@color/mainBackground" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

その投稿のコメントで

は、あなたもヒントを見つけるだろう。それは、この 効果

EDIT実装する必要2つのツールバーではありません。ここでは、Google Playストアをする責任の男とのインタビューを見つけるだろうし、彼は彼がPlayストアアプリの中でデザインを構築する方法について話しています：

[UDACITY] Interview with Kirill Grouchnikov, part 1

[UDACITY] Interview with Kirill Grouchnikov, part 2

それはその場合には