web-dev-qa-db-ja.com

NestedScrollView、AppBarLayout、およびCoordinatorLayoutによるスムーズなスクロールとフリング

CollapsingToolbarLayoutとNestedScrollViewでAppBarLayoutを使用しているアプリケーションで作業しています。私はこれをうまく実装し、うまく機能しています。

今私がやろうとしているのは、Nestedscrollviewのフリング(高速スワイプ)で完全に一番上までスクロールすることです。同様に、画面の下部に向かってフリング(高速スワイプ)すると、下部までスムーズにスクロールする必要があります。しかし、今では間に挟まってしまい、見苦しくなります。ここで利用可能な多くの利用可能なソリューションを試しましたが、何もうまくいきませんでした。現在の設定は次のとおりです。

    <Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
xmlns:card_view="http://schemas.Android.com/apk/res-auto"
xmlns:tools="http://schemas.Android.com/tools"
xmlns:zhy="http://schemas.Android.com/apk/res-auto"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
tools:ignore="RtlHardcoded">

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/main.appbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/main.collapsing"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            Android:id="@+id/placeholder"
            Android:layout_width="match_parent"
            Android:layout_height="246dp"
            Android:scaleType="fitXY"
            Android:tint="#11000000"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.9" />


        <FrameLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_gravity="top"
            Android:padding="10dp">


            <FrameLayout
                Android:id="@+id/back_frame"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_gravity="left|center_vertical"
                Android:paddingBottom="5dp"
                Android:paddingLeft="5dp"
                Android:paddingRight="10dp"
                Android:paddingTop="5dp">

                <ImageView
                    Android:id="@+id/back_image"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_gravity="center"
                    Android:src="@drawable/abc_ic_ab_back_mtrl_am_alpha" />
            </FrameLayout>


            <FrameLayout
                Android:id="@+id/frameLayoutheart"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"

                Android:layout_gravity="right|center_vertical"
                Android:paddingBottom="5dp"
                Android:paddingLeft="10dp"
                Android:paddingRight="5dp"
                Android:paddingTop="5dp">

                <ImageView
                    Android:id="@+id/favbtnicon"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_gravity="center"
                    Android:src="@drawable/heart_profile" />
            </FrameLayout>


        </FrameLayout>

        <FrameLayout
            Android:id="@+id/main.framelayout.title"
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            Android:layout_gravity="bottom|center_horizontal"
            Android:orientation="vertical"

            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.3">

            <LinearLayout
                Android:id="@+id/main.linearlayout.title"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_gravity="center"
                Android:gravity="top"
                Android:orientation="vertical">


                <LinearLayout
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_gravity="center_horizontal"

                    Android:orientation="horizontal">

                    <TextView
                        Android:id="@+id/profileName"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:layout_marginTop="25dp"
                        Android:inputType="textNoSuggestions"
                        Android:singleLine="true"
                        Android:text="Ankita arora"
                        Android:textColor="@Android:color/white"
                        Android:textSize="25sp"
                        Android:textStyle="bold" />


                    <ImageView
                        Android:id="@+id/onlinestatus"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:layout_marginTop="29dp"
                        Android:src="@drawable/online"
                        Android:visibility="visible" />
                </LinearLayout>


                <LinearLayout
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_gravity="center_horizontal"
                    Android:orientation="horizontal">

                    <TextView
                        Android:id="@+id/age"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:layout_gravity="center_horizontal"
                        Android:inputType="textCapSentences"
                        Android:text="asdas"
                        Android:textColor="@Android:color/white"
                        Android:textSize="13sp" />


                    <TextView
                        Android:layout_width="4dp"
                        Android:layout_height="4dp"
                        Android:layout_gravity="center"

                        Android:layout_marginLeft="4dp"
                        Android:layout_marginRight="4dp"
                        Android:background="@drawable/white_dot" />

                    <TextView
                        Android:id="@+id/sex"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:layout_gravity="center_horizontal"
                        Android:inputType="textCapSentences"
                        Android:text="asdas"
                        Android:textColor="@Android:color/white"
                        Android:textSize="13sp" />


                    <TextView
                        Android:id="@+id/loc_point"
                        Android:layout_width="4dp"
                        Android:layout_height="4dp"
                        Android:layout_gravity="center"

                        Android:layout_marginLeft="4dp"
                        Android:layout_marginRight="4dp"
                        Android:background="@drawable/white_dot" />


                    <TextView
                        Android:id="@+id/loc"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:layout_gravity="center_horizontal"
                        Android:inputType="textCapSentences"
                        Android:text="asdas"
                        Android:textColor="@Android:color/white"
                        Android:textSize="13sp" />

                </LinearLayout>


            </LinearLayout>
        </FrameLayout>
    </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"
    Android:scrollbars="none"
    app:behavior_overlapTop="10dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    >

    ------content--------------


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


<Android.support.v7.widget.Toolbar
    Android:id="@+id/main.toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="?attr/actionBarSize"
    Android:background="@color/pinkColor"
    Android:visibility="invisible"
    app:contentInsetEnd="0dp"
    app:contentInsetStart="0dp"
    app:layout_anchor="@id/main.framelayout.title"
    app:theme="@style/ThemeOverlay.AppCompat.Dark"
    app:title="">

    <LinearLayout
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:orientation="horizontal">

        <ImageView
            Android:id="@+id/back"
            Android:layout_width="25dp"
            Android:layout_height="25dp"
            Android:layout_gravity="left|center_vertical"
            Android:layout_marginLeft="4dp"
            Android:src="@drawable/abc_ic_ab_back_mtrl_am_alpha"
            Android:visibility="invisible" />

        <Space
            Android:layout_width="@dimen/image_final_width"
            Android:layout_height="@dimen/image_final_width" />


        <LinearLayout
            Android:layout_width="wrap_content"
            Android:layout_height="match_parent"
            Android:layout_marginLeft="8dp"
            Android:gravity="center"
            Android:orientation="vertical">

            <TextView
                Android:id="@+id/main.textview.title"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"

                Android:layout_gravity="left"
                Android:text="@string/quila_name2"
                Android:textColor="@Android:color/white"
                Android:textSize="20sp" />

            <TextView
                Android:id="@+id/status"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_gravity="left"
                Android:layout_marginTop="-4dp"
                Android:text="@string/quila_name2"
                Android:textColor="@Android:color/white"
                Android:textSize="12sp" />


        </LinearLayout>

    </LinearLayout>
</Android.support.v7.widget.Toolbar>

<de.hdodenhof.circleimageview.CircleImageView
    Android:id="@+id/profileimg"
    Android:layout_width="@dimen/image_width"
    Android:layout_height="@dimen/image_width"
    Android:layout_gravity="center_horizontal"

    app:border_color="@Android:color/white"
    app:border_width="2dp"
    app:finalHeight="@dimen/image_final_width"
    app:finalYPosition="2dp"
    app:layout_behavior="com.sdl.apps.yaarri.views.AvatarImageBehavior"
    app:startHeight="2dp"
    app:startToolbarPosition="2dp"
    app:startXPosition="2dp" />

以下に示す最も受け入れられた回答の1つは、私にとってもうまくいきませんでした。

NestedScrollViewでAppBarLayoutと折りたたみツールバーをスムーズにスクロールできない

17
Harry Sharma

真夜中の油を燃やしていたとき、このライブラリはバットマンのようになりました

https://github.com/henrytao-me/smooth-app-bar-layout

次の手順に従うことにより、動作を改善できます。

1.変更

 Android.support.design.widget.AppBarLayout

 me.henrytao.smoothappbarlayout.SmoothAppBarLayout and set Android:id

2.削除

 app:layout_behavior="@string/appbar_scrolling_view_behavior"

3. NestedScrollViewまたはRecyclerViewにヘッダーを追加します

実際にそれは魅力のように動作するようになりました。

最終的なセットアップは次のようになります

                <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.v4.widget.NestedScrollView
                    Android:id="@+id/nested_scroll_view"
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent">

                    <LinearLayout
                      Android:layout_width="match_parent"
                      Android:layout_height="wrap_content"
                      Android:orientation="vertical"
                      Android:paddingLeft="16dp"
                      Android:paddingRight="16dp"
                      Android:paddingTop="@dimen/app_bar_height">

                      <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:layout_marginBottom="16dp"
                        Android:layout_marginTop="16dp"
                        Android:text="@string/text_short" />

                      <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:layout_marginBottom="16dp"
                        Android:text="@string/text_long" />
                    </LinearLayout>
                  </Android.support.v4.widget.NestedScrollView>

                  <me.henrytao.smoothappbarlayout.SmoothAppBarLayout
                    Android:id="@+id/smooth_app_bar_layout"
                    Android:layout_width="match_parent"
                    Android:layout_height="@dimen/app_bar_height">

                    <Android.support.design.widget.CollapsingToolbarLayout
                      Android:id="@+id/collapsing_toolbar_layout"
                      Android:layout_width="match_parent"
                      Android:layout_height="match_parent"
                      app:layout_scrollFlags="scroll|exitUntilCollapsed">

                      <Android.support.v7.widget.Toolbar
                        Android:id="@+id/toolbar"
                        app:layout_collapseMode="pin"
                        app:navigationIcon="@drawable/ic_menu_arrow_back"
                        style="@style/AppStyle.MdToolbar" />
                    </Android.support.design.widget.CollapsingToolbarLayout>
                  </me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
                </Android.support.design.widget.CoordinatorLayout> 

これを実装する際にまだ問題に直面している場合は、この質問に答えてください。

10
Harry Sharma

Support-library 26.0.1バージョンを使用します。

この問題は、バージョン26.0.0以降のサポートライブラリからGoogleによって解決されました

https://developer.Android.com/topic/libraries/support-library/revisions.html#26-0-1

5
Eniz Bilgin