Collapsing Toolbar Wie Google Play Store

Question

Ich möchte eine kollabierende Symbolleiste wie Google Play Store implementieren. Ich habe die Funktionalität etwas erreicht, aber das funktioniert nur im Hochformat. Hier ist ein Beispiel eines Screenshots dessen, was ich konnte.

Nun, was ich tun möchte, ist, wenn ich in das Querformat mein Gerät Orientierung ändern sollte es genau so aussehen.

Also, was ist meine wichtigste Frage, wie man diese Orientierungsänderungen zu handhaben. Gibt es eine offizielle Android-Komponente, die diese Art von Sache tun kann, oder ich muss meine Layouts Z-indexieren, um diese Art von Layout-Verhalten zu erreichen. Bitte beachten Sie, dass das Layout genau so sein soll, mit den Seitenrändern und der Z-Indizierung oben auf dem Bild. Auch das Scrollverhalten muss genau wie im Google Play Store sein.

Ich füge meine Beispiel-XML an, die ich bisher geschrieben habe.

<?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

In diesem ziemlich ähnlichen Problem: collapsing toolbar layout like google play store, würden Sie eine Antwort als unten:

Blick in CollapsingToolbarLayout keine Notwendigkeit app:layout_scrollFlags einzustellen. Kein Effekt. Basis auf meinem Code, ändern app:layout_scrollFlags in CollapsingToolbarLayout zu app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" und Set minHeight dafür.

Da Ihre Symbolleiste ist "pin", so enterAlwaysCollapsed wird es anrufen, wenn Sie nach unten scrollen.

<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" /> 

Im Kommentar zu diesem Post, würden Sie auch einen Hinweis finden:

hinzufügen app:contentScrim="?attr/colorPrimary" zu Ihrem collapsingtoolbarlayout. Es besteht keine Notwendigkeit, zwei Symbolleiste diesen

Effekt

EDIT implementieren: Hier würden Sie ein Interview mit einem Mann finden, die für Google Play Store, er spricht darüber, wie er Design in Play Store App bauen:

[UDACITY] Interview with Kirill Grouchnikov, part 1

[UDACITY] Interview with Kirill Grouchnikov, part 2

es Hoffnung helfen