web-dev-qa-db-ja.com

RecyclerViewおよびCollapsingヘッダーを含むCoordinatorLayout

次のようなレイアウトがあります。

enter image description here

（ツールバー、ヘッダービュー、テキストビュー、RecyclerView）

Recyclerviewのアイテムをスクロールするときにヘッダーを折りたたむ必要があります。ビュー「Choose item」とrecyclerviewが画面に残るように。

ツールバーが折りたたまれているときに例を見ましたが、ツールバーが常に存在する必要があります。

この作業を行うには、どのレイアウト/動作を使用する必要がありますか？

androidandroid-layoutmaterial-designandroid-coordinatorlayoutandroiddesignsupport
28
Oleg

これを実現するには、次のレイアウトを使用します。

<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.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- HEADER -->
            <RelativeLayout
                ...
                app:layout_collapseMode="parallax">
                .....
            </RelativeLayout>

            <Android.support.v7.widget.Toolbar
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

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

       <!-- IF YOU WANT TO KEEP "Choose Item" always on top of the RecyclerView, put this TextView here
        <TextView
             Android:layout_width="match_parent"
             Android:layout_height="wrap_content"
             Android:layout_gravity="bottom"
             Android:text="choose item" />
       -->
    </Android.support.design.widget.AppBarLayout>

    <Android.support.v7.widget.RecyclerView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

app:layout_collapseMode="pin"プロパティを設定して、ツールバーを固定します。 app:layout_behavior="@string/appbar_scrolling_view_behavior"を設定することにより、RecyclerViewを適切にスクロール可能にします。

NB！「アイテムの選択」TextViewの位置は、達成する特定の動作に依存します。

  • ユーザーがRecyclerViewのスクロールを開始すると、AdapterのRecyclerViewの最初の要素としてそれを含めてスクロールできます。
  • AppBarLayoutに追加して、スクロールするかどうかにかかわらず、常にRecyclerViewの上に貼り付けることができます。

詳細はこちら Android Design Support Library およびこちら Design Support Library（III）：Coordinator Layout

私はそれが役立つことを願っています！

54
Konstantin Loginov

以下のコードは機能していますが、スムーズなスクロールではありません。

<?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"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:id="@+id/activity_main"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">


    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">

        <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.sliderbanner.views.BannerSlider
                Android:id="@+id/banner_slider1"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                app:animateIndicators="true"
                app:defaultIndicators="dash"
                app:interval="5000"
                app:loopSlides="true"

                />

            <Android.support.v7.widget.Toolbar

                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?actionBarSize">

                <ImageView
                    Android:id="@+id/image_github"
                    Android:layout_width="36dp"
                    Android:layout_height="36dp"
                    Android:layout_gravity="right"
                    Android:layout_marginRight="8dp" />

                <TextView
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent"
                    Android:fontFamily="sans-serif-bold"
                    Android:gravity="center_vertical|left"
                    Android:text="Banner Slider"
                    Android:textColor="@Android:color/black"
                    Android:textSize="18sp" />
            </Android.support.v7.widget.Toolbar>
        </Android.support.design.widget.CollapsingToolbarLayout>


    </Android.support.design.widget.AppBarLayout>
    <Android.support.v7.widget.RecyclerView
        Android:id="@+id/recycler"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </Android.support.v7.widget.RecyclerView>


</Android.support.design.widget.CoordinatorLayout>
0
influx