5

google play music android アプリの動作を再現したいと思います。そのアプリで「マイ ミュージック」のアルバム タブを使用すると、アルバムのリストが「拡張」されたまま、アクション バー (オレンジ色の部分) の上に表示されます。アルバムリストを上にスクロールすると、そのオレンジ色の部分が上にスクロールしますが、リストよりもゆっくりです。リストを下にスクロールすると、「オレンジ色のブロック」も下にスクロールします。この動作は、スクロールされるツールバーやタブとは無関係です。

新しいマテリアル デザイン ライブラリでこのような動作を再現しようとしています。Cheesquare の詳細アクティビティ xml を出発点として使用します。

<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/main_content"
    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="@dimen/detail_backdrop_height"
        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="match_parent"      
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/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.CollapsingToolbarLayout>

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

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">
        <....>
       </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

背景色付きの背景「imageview」を使用して、ネストされたビューと一緒に移動しようとしました。視差効果を使用してCollapsingToolbarLayout内にimageviewを配置すると、ネストされたscrollviewの下にその高さを大きくすることができないという問題があります。imageview を collapsingToolbarLayout の外側に置き、NestedScrollView の内側に置くと、viewScrolling の「速度」を変更できません。イメージビューを NestedScrollview の外に置くと、ツールバーが固定されていても、ツールバーの上に描画されます。

マテリアル デザイン ライブラリの前は、ビューとスクロールビューへのコールバックを使用してスクロール ビューを上下に移動していましたが、多くのボイラープレート コードを削除した非常にクリーンな新しいライブラリを使用したいと考えています。

何か案は？

4

1 に答える 1

8

実際、スクロール ビューを AppBarLayout でオーバーレイする場合、その必要はありません。オーバーラップ量を設定するには、app:behavior_overlayTop属性を使用できます。NestedScrollView

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    app:behavior_overlapTop="64dp">

属性を使用している動作であるため (属性が通常適用されるビューまたは親ビューグループではありません)、したがって接頭辞app:behavior_overlapTopを持つビューでのみ機能することに注意してください。app:layout_behavior="@string/appbar_scrolling_view_behavior"behavior_

または、setOverlayTop()を介してプログラムで設定します:

NestedScrollView scrollView = ...
CoordinatorLayout.LayoutParams params = 
    (CoordinatorLayout.LayoutParams) scrollView.getLayoutParams();
AppBarLayout.ScrollingViewBehavior behavior =
    (AppBarLayout.ScrollingViewBehavior) params.getBehavior();
behavior.setOverlayTop(128); // Note: in pixels
于 2015-06-20T04:21:32.127 に答える