Google Playで映画をクリックして横向きモードに移動すると、画像が背景に表示され、映画の詳細が背景の上のレイアウトに表示されます。これらの2つのサーフェスは一緒にスクロールします。どうやってやるの?
映画セクションGooglePlayムービーの例
折りたたみツールバーがあり(背景画像はこちら)、ネストされたスクロールビュー全体をアプリバーに固定してみました。しかし、それはうまくいきません。
<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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="200dp"
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:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:expandedTitleMargin="16dp">
<ImageView
android:id="@+id/iv_movie_detail_backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<View
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_gravity="bottom"
android:background="@drawable/scrim"/>
<android.support.v7.widget.Toolbar
android:id="@+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include
layout="@layout/scrollview_movie_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
にImageView
は通常のフラグ(parallax
)がapp:layout_collapseMode="parallax"
必要です:そしてそれはCollapsingToolbarLayout
。にある必要があります。
表示されるコンテンツについて、次を追加するだけです。
app:behavior_overlapTop="100dp" // 100dp for example
あなたにNestedScrollView
(またはそのようなRecyclerView
ものに:) app:layout_behavior="@string/appbar_scrolling_view_behavior"
。
ここに使用できる良いサンプルがあります:https://github.com/saulmm/CoordinatorBehaviorExample
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加