TwitterアプリのようにTab選択時にリストを一番上にスクロールする

はじめに

リスト表示を行うTwitterクライアントのようなアプリでは、リストの一番上にスクロールする機能が必須ですよね。
今回はTwitterの公式Androidアプリで採用されている以下のような方法のスクロールを実装してみます。

• 選択済みTabをタップしたタイミングでリストの一番上までスクロールさせる
• 現在位置からリストの一番上までどれだけ離れているかで、一瞬で移動するのかスムーズに移動するのかを変える

この記事では以下の構成前提でコードを記載しています。

• MainActivityにTabLayoutとViewPagerを配置してタブ切り替える
• タブ選択で、RecyclerViewをメンバで持つFragmentを切り換える

選択済みのTabがタップされたことを検知する

選択済みTabを再選択した際の処理は、OnTabSelectedListenerのonTabReselectedで実装して
TabLayoutに設定してあげればOKです。

MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    (省略)

    mTab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            // 選択済みTabが再選択された際の処理はここに記載
            // リストを一番上にスクロールする処理を呼び出す
            Fragment fragment = mPagerAdapter.getItem(tab.getPosition());
            ((TestFragment) fragment).scrollToFirstPosition();
        }
    });

   (省略)
}

リスト最上段までスクロールする

RecyclerViewの表示位置取得には、RecyclerViewにセットしているLayoutManagerを使うのがコツです。
現在の表示位置が一定の閾値を超えているか判定し、閾値より離れている場合は一瞬でいちばん上まで移動させ、
そこまで離れていない場合はスムーズに一番上までスクロールさせます。

TestFragment.java

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        (省略)

        mLinearLayoutManager = new LinearLayoutManager(context, LinearLayoutManager.VERTICAL, false);
        mRecyclerView.setLayoutManager(mLinearLayoutManager);

        (省略)
}

public void scrollToFirstPosition() {
    if (mRecyclerView != null) {
        // 表示されているポジションが閾値(ここでは20)より後ろであれば一瞬でスクロール。閾値以下ならスムーズスクロール
        int position = mLinearLayoutManager.findLastCompletelyVisibleItemPosition();
        if (position > 20) {
            mRecyclerView.scrollToPosition(0);
            return;
        }
        mRecyclerView.smoothScrollToPosition(0);
    }
}

以上でTwitter公式アプリ風のリストスクロールが実装できます。
ぜひご自分のアプリに取り入れてみてくださいね。