27

私が使用している 1 つの Android アプリに取り組んでおりCoordinatorLayout、AppBarLayout折りたたみCollapsingToolbarLayoutツールバー機能を使用しています。

レイアウトで使用して、同じレイアウトでNestedScrollView展開および折りたたみます。AppBarLayout画面の中央から上にスクロールしようとするとうまくいきませんが、画面の右隅から上にスクロールしようとするとスムーズにスクロールします。

以下は私のxmlファイルです

レイアウト.xml

<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fillViewport="true"
    android:fitsSystemWindows="true"
    android:paddingBottom="2dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="5dp"
    android:layout_gravity="fill_vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/fragment_back_color"
            android:orientation="vertical">


            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="5dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:background="@drawable/new_recharge" />

                <com.spiceladdoo.views.RobotTextviewRegular
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:text="NEW PAYMENT"
                    android:textColor="@color/offer_name_text_color" />

            </LinearLayout>


            <RelativeLayout

                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:background="@color/white"
                android:paddingBottom="20dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:paddingTop="20dp">

                <HorizontalScrollView
                    android:id="@+id/hsv"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:fillViewport="true"
                    android:measureAllChildren="false"
                    android:scrollbars="none">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:orientation="horizontal">

                        <LinearLayout
                            android:id="@+id/wallet_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/wallet_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/wallet_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="WALLET"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />
                            >

                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"

                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/prepaid_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/prepaid_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/prepaid_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="PREPAID"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />
                            >

                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"

                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/postpaid_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/postpaid_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/postpaid_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="POSTPAID"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />
                            >

                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"
                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/dth_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/dth_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/dth_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="DTH"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />
                            >

                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"
                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/landline_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/landline_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/landline_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="LANDLINE"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />
                            >

                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"
                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/datacard_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/datacard_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/datacard_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="DATACARD"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />
                            >

                        </LinearLayout>
                    </LinearLayout>
                </HorizontalScrollView>
            </RelativeLayout>


            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"

                android:paddingBottom="10dp"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:paddingTop="10dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:background="@drawable/recent" />

                <com.spiceladdoo.views.RobotTextviewRegular
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:text="RECENT"
                    android:textColor="@color/offer_name_text_color" />

            </LinearLayout>

            <ListView
                android:id="@+id/recent_recharge_list"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp">

            </ListView>


        </LinearLayout>

        <FrameLayout xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/recharge_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="visible"
            tools:ignore="MergeRootFrame">

        </FrameLayout>
    </RelativeLayout>
</android.support.v4.widget.NestedScrollView>

望ましい結果は、画面の中央から上にスクロールしようとすると、モバイルの右隅から上にスクロールするのと同じくらいスムーズに機能するはずです。

以下のビデオを見て、問題をより明確に見てください。

https://www.dropbox.com/s/gscfc8vfc7kkpxp/device-2015-12-30-160119.mp4?dl=0

4

4 に答える 4

5

CoordinatorLayouthaving をAppbarLayout使用している場合CollapsingToolbarLayout、NestedScrollViewおよび子ビューとして作業している場合、私はほとんど同様の問題を抱えていました。

次のコードは、私のプロジェクト ワークスペースから直接作業する部分です。

<?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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/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/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:id="@+id/cover_pic"
                android:layout_width="match_parent"
                android:layout_height="256dp"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:src="@drawable/cookin"/>
            <android.support.v7.widget.Toolbar
                android:id="@+id/mToolbar"
                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.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            android:background="?attr/colorPrimary"
            app:tabMode="scrollable"/>

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


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

        <android.support.v4.view.ViewPager
            android:id="@+id/tab_viewpager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    </android.support.v4.widget.NestedScrollView>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_alignParentBottom="true"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_phone"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginRight="@dimen/fab_margin"
                android:visibility="invisible"
                app:backgroundTint="@color/colorFAB2"
                app:elevation="6dp"
                android:layout_margin="5dp"
                app:pressedTranslationZ="12dp"
                android:src="@drawable/ic_phone_white_24dp" />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_book"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_margin="5dp"
                android:layout_marginRight="@dimen/fab_margin"
                android:visibility="invisible"
                app:elevation="6dp"
                app:backgroundTint="@color/colorFAB1"
                app:pressedTranslationZ="12dp"
                android:src="@drawable/ic_receipt_white_24dp" />
            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_add"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                app:elevation="6dp"
                app:backgroundTint="@color/colorAccent"
                app:pressedTranslationZ="12dp"
                android:layout_margin="@dimen/fab_margin"
                android:src="@drawable/ic_add_white_24dp" />

        </LinearLayout>

    </RelativeLayout>


</android.support.design.widget.CoordinatorLayout>
于 2016-01-07T11:34:51.217 に答える
5

以下のLikeandroid:clickable="true"の子ビューで試してください:NestedScrollView

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:clickable="true">
        </LinearLayout>
   </android.support.v4.widget.NestedScrollView>
于 2017-03-16T11:26:43.703 に答える
3

これの複製のように見えます。「解決済み」のスレッドを指していますが、もう 1 つは RecyclerView に関連しています。

RecyclerView スレッドのManolo GarciaとKirill Boyarshinovによって作成されたソリューションに基づいて、自分の動作を記述しました。私の場合、onNestedFling()フリングジェスチャーを作成するときに呼び出されなかったので、ハッキングしonNestedPreScroll()ました。私は今日、NestedScroll を使用して ViewPager 内で作業してきましたが、別のシナリオで以下のソリューションをテストしていません (ただし、1 年前に RecyclerView 用に書いた同様のコードに基づいています)。

最初に更新された動作 (のように xml に追加app:layout_behavior="your.package.FlingBehavior">) android.support.design.widget.AppBarLayout:

public final class FlingBehavior extends AppBarLayout.Behavior {

    private static final String TAG = FlingBehavior.class.getName();
    private static final int TOP_CHILD_FLING_THRESHOLD = 1;
    private static final float OPTIMAL_FLING_VELOCITY = 3500;
    private static final float MIN_FLING_VELOCITY = 20;

    boolean shouldFling = false;
    float flingVelocityY = 0;

    public FlingBehavior() {
    }

    public FlingBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target,
                                  int velocityX, int velocityY, int[] consumed) {

        super.onNestedPreScroll(coordinatorLayout, child, target, velocityX, velocityY, consumed);

        if (velocityY > MIN_FLING_VELOCITY) {
            shouldFling = true;
            flingVelocityY = velocityY;
        } else {
            shouldFling = false;
        }
    }

    @Override
    public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout abl, View target) {
        super.onStopNestedScroll(coordinatorLayout, abl, target);
        if (shouldFling) {
            Log.d(TAG, "onNestedPreScroll: running nested fling, velocityY is " + flingVelocityY);
            onNestedFling(coordinatorLayout, abl, target, 0, flingVelocityY, true);
        }
    }

    @Override
    public boolean onNestedFling(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target,
                                 float velocityX, float velocityY, boolean consumed) {

        if (target instanceof RecyclerView && velocityY < 0) {
            Log.d(TAG, "onNestedFling: target is recyclerView");
            final RecyclerView recyclerView = (RecyclerView) target;
            final View firstChild = recyclerView.getChildAt(0);
            final int childAdapterPosition = recyclerView.getChildAdapterPosition(firstChild);
            consumed = childAdapterPosition > TOP_CHILD_FLING_THRESHOLD;
        }

        // prevent fling flickering when going up
        if (target instanceof NestedScrollView && velocityY > 0) {
            consumed = true;
        }

        if (Math.abs(velocityY) < OPTIMAL_FLING_VELOCITY) {
            velocityY = OPTIMAL_FLING_VELOCITY * (velocityY < 0 ? -1 : 1);
        }
        Log.d(TAG, "onNestedFling: velocityY - " + velocityY + ", consumed - " + consumed);

        return super.onNestedFling(coordinatorLayout, child, target, velocityX, velocityY, consumed);
    }
}

これでスムーズにスクロールするはずですが、NestedScrollView (および RecyclerView) のコンテンツは、AppBarLayout が折りたたまれる前にスクロールでき、奇妙に見えることがあります。それを解決するには、この回答に従ってください。fullScroll(ScrollView.FOCUS_UP)メソッドを使用する代わりに小さな変更を加えるscrollTo(0, 0)高速スクロール中に小さなちらつきが発生する場合があります。

AppBarLayout appBarLayout = findViewById(...);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                shouldScroll = Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange();
            }
        });
NestedScrollView nestedScrollView = findViewById(...);
nestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
            @Override
            public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                if (!shouldScroll)
                    nestedScrollView.fullScroll(ScrollView.FOCUS_UP);
            }
        });

以上で終了とさせていただきますが、Google Play のようにスクロールをもっとスムーズにしたい場合は、ここに (未解決だと思います) スレッドがあります。

于 2016-09-09T15:37:09.777 に答える