LoginSignup
37
40

More than 5 years have passed since last update.

ListViewでもリッチなスクロールがしたい

Last updated at Posted at 2015-12-23

CoordinatorLayoutとRecyclerViewを使うことでスクロール時に様々なことを行うことができます。
ちょっとCoordinatorLayoutを調べていて、もしかしたらListViewでもできるんじゃ、、とやってみました。
RecyclerViewではスクロールした時にAppBarLayoutが小さくなったり、といったことが行えました。これをListViewでもやりたい話です。

scroll.gif
https://www.google.com/design/spec/patterns/scrolling-techniques.html より

前置き

CoordinatorLayoutはAPI Level 21からViewにスクロールのイベントを親Viewに伝える仕組みがあり、それを利用しています。
http://developer.android.com/intl/ja/reference/android/view/ViewGroup.html#onStartNestedScroll(android.view.View, android.view.View, int)
ただSupport Libraryにもスクロールのイベントを親Viewに伝える仕組みをうまく使えるようにする仕組みがあります
NestedScrollingChild(インターフェース)を実装して、イベントをNestedScrollingChildHelperなどに渡すことで利用することができます。
http://developer.android.com/intl/ja/reference/android/support/v4/view/NestedScrollingChild.html

これはNestedScrollViewやRecyclerViewやSwipeRefreshLayoutの実装がそのようになっているためです。

ListViewはSupport Libraryで提供されているViewでないため、NestedScrollingChildを継承していませんし、イベントをNestedScrollingChildHelperに渡していません。
そのため、スクロールのイベントをCoordinatorLayoutに渡すことができません。

実装

ListViewを継承したViewを作り、NestedScrollingChild(インターフェース)を実装して、イベントをNestedScrollingChildHelperに渡すことで、CoordinatorLayoutにスクロールイベントが通知され、利用できるのではと考えました。
具体的には以下の様な実装になりました。
スクロール開始のタイミングでstartNestedScroll()を呼び、自分のスクロール前にdispatchNestedPreScroll()を呼び、スクロール後にdispatchNestedScroll()を呼ぶことによって実現しています。

public class NestedListView extends ListView implements NestedScrollingChild {
    private int mLastY;
    private final int[] mScrollOffset = new int[2];
    private final int[] mScrollConsumed = new int[2];
    private int mNestedOffsetY;
    private NestedScrollingChildHelper mChildHelper;

    public NestedListView(Context context) {
        this(context, null);
    }

    public NestedListView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public NestedListView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mChildHelper = new NestedScrollingChildHelper(this);
        setNestedScrollingEnabled(true);
    }

    /**
     *
     * @see android.support.v4.widget.NestedScrollView#onTouchEvent(MotionEvent)
     */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        boolean returnValue = false;

        MotionEvent event = MotionEvent.obtain(ev);
        final int action = MotionEventCompat.getActionMasked(event);
        if (action == MotionEvent.ACTION_DOWN) {
            mNestedOffsetY = 0;
        }
        event.offsetLocation(0, mNestedOffsetY);
        int eventY = (int) event.getY();
        switch (action) {
            case MotionEvent.ACTION_MOVE:
                int deltaY = mLastY - eventY;
                // NestedPreScroll
                if (dispatchNestedPreScroll(0, deltaY, mScrollConsumed, mScrollOffset)) {
                    deltaY -= mScrollConsumed[1];
                    mLastY = eventY - mScrollOffset[1];
                    event.offsetLocation(0, mScrollOffset[1]);
                    mNestedOffsetY += mScrollOffset[1];
                }
                returnValue = super.onTouchEvent(event);

                // NestedScroll
                if (dispatchNestedScroll(0, mScrollOffset[1], 0, deltaY, mScrollOffset)) {
                    event.offsetLocation(0, mScrollOffset[1]);
                    mNestedOffsetY += mScrollOffset[1];
                    mLastY -= mScrollOffset[1];
                }
                break;
            case MotionEvent.ACTION_DOWN:
                returnValue = super.onTouchEvent(event);
                mLastY = eventY;
                // start NestedScroll
                startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL);
                break;
            case MotionEvent.ACTION_UP:
                // TODO: fling
                returnValue = super.onTouchEvent(event);
                break;
            case MotionEvent.ACTION_CANCEL:
                returnValue = super.onTouchEvent(event);
                // end NestedScroll
                stopNestedScroll();
                break;
        }
        return returnValue;
    }


    // NestedScrollingChild
    @Override
    public void setNestedScrollingEnabled(boolean enabled) {
        mChildHelper.setNestedScrollingEnabled(enabled);
    }

    @Override
    public boolean isNestedScrollingEnabled() {
        return mChildHelper.isNestedScrollingEnabled();
    }

    @Override
    public boolean startNestedScroll(int axes) {
        return mChildHelper.startNestedScroll(axes);
    }

    @Override
    public void stopNestedScroll() {
        mChildHelper.stopNestedScroll();
    }

    @Override
    public boolean hasNestedScrollingParent() {
        return mChildHelper.hasNestedScrollingParent();
    }

    @Override
    public boolean dispatchNestedScroll(int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed,
                                        int[] offsetInWindow) {
        return mChildHelper.dispatchNestedScroll(dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, offsetInWindow);
    }

    @Override
    public boolean dispatchNestedPreScroll(int dx, int dy, int[] consumed, int[] offsetInWindow) {
        return mChildHelper.dispatchNestedPreScroll(dx, dy, consumed, offsetInWindow);
    }

    @Override
    public boolean dispatchNestedFling(float velocityX, float velocityY, boolean consumed) {
        return mChildHelper.dispatchNestedFling(velocityX, velocityY, consumed);
    }

    @Override
    public boolean dispatchNestedPreFling(float velocityX, float velocityY) {
        return mChildHelper.dispatchNestedPreFling(velocityX, velocityY);
    }

}

動作

output.gif

問題点

この実装にはいくつか問題点があるので実用できるレベルではないと思います。
見つかっている部分だとスクロール中に離した時にうまくスクロールしないことがあったり、
ListViewでスクロールの変化量を消費していないため、AppBarLayoutのexitUntilCollapsedフラグをつけている場合のスクロールの挙動が少し違うなどです。
誰か解決策を知っていたらプルリクエストなどをお願いします。。

ここにサンプルコードを置いておきます。
https://github.com/takahirom/NestedListView

ちなみにWebViewでも同じようなことができます。
https://github.com/takahirom/webview-in-coordinatorlayout

参考

NestedScrollViewの仕組み
http://qiita.com/takahirom/items/2978ede8e7d40b888832
AndroidのCoordinatorLayoutを使いこなして、モダンなスクロールを実装しよう
http://techblog.yahoo.co.jp/android/androidcoordinatorlayout/

37
40
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
37
40