ViewPager を使用してタブ付きスワイプビューを作成する

スワイプビューとは、水平方向の指先ジェスチャー(スワイプ)を使用して、きょうだい画面(タブなど)の間を移動できるビューのことを指します。このナビゲーション パターンは、「水平方向ページング」とも呼ばれます。このトピックでは、タブを切り替えるスワイプビューを使用したタブレイアウトを作成する方法や、タブの代わりにタイトル ストリップを表示する方法について説明します。

スワイプビューを実装する

スワイプビューを作成するには、AndroidX の ViewPager ウィジェットを使用します。ViewPager とタブを使用するには、ViewPager に対する依存関係と Material Components に対する依存関係をプロジェクトに追加する必要があります。

ViewPager を使用してレイアウトをセットアップするには、<ViewPager> 要素を XML レイアウトに追加します。たとえば、スワイプビュー内の各ページがレイアウト全体を使用する場合、レイアウトは次のようになります。

<androidx.viewpager.widget.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    

各ページを示す子ビューを挿入するには、このレイアウトを PagerAdapter にフックする必要があります。次の 2 種類のビルトイン アダプターの中から選択できます。

  • FragmentPagerAdapter - 少数の固定的なきょうだい画面間を移動する場合に使用します。
  • FragmentStatePagerAdapter - ページング対象のページ数が不明な場合に使用します。FragmentStatePagerAdapter は、ユーザーの移動後にフラグメントを破棄することにより、メモリ使用量を最適化します。

たとえば、FragmentStatePagerAdapter を使用して、Fragment オブジェクトのコレクションをスワイプしていく方法を以下に示します。

Kotlin

    class CollectionDemoFragment : Fragment() {
        // When requested, this adapter returns a DemoObjectFragment,
        // representing an object in the collection.
        private lateinit var demoCollectionPagerAdapter: DemoCollectionPagerAdapter
        private lateinit var viewPager: ViewPager

        override fun onCreateView(inflater: LayoutInflater,
                container: ViewGroup?,
                savedInstanceState: Bundle?): View? {
           return inflater.inflate(R.layout.collection_demo, container, false)
        }

        override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
            demoCollectionPagerAdapter = DemoCollectionPagerAdapter(childFragmentManager)
            viewPager = view.findViewById(R.id.pager)
            viewPager.adapter = demoCollectionPagerAdapter
        }
    }

    // Since this is an object collection, use a FragmentStatePagerAdapter,
    // and NOT a FragmentPagerAdapter.
    class DemoCollectionPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {

        override fun getCount(): Int  = 100

        override fun getItem(i: Int): Fragment {
            val fragment = DemoObjectFragment()
            fragment.arguments = Bundle().apply {
                // Our object is just an integer :-P
                putInt(ARG_OBJECT, i + 1)
            }
            return fragment
        }

        override fun getPageTitle(position: Int): CharSequence {
            return "OBJECT ${(position + 1)}"
        }
    }

    private const val ARG_OBJECT = "object"

    // Instances of this class are fragments representing a single
    // object in our collection.
    class DemoObjectFragment : Fragment() {

       override fun onCreateView(inflater: LayoutInflater,
               container: ViewGroup?,
               savedInstanceState: Bundle?): View {
           return inflater.inflate(R.layout.fragment_collection_object, container, false)
       }

        override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
            arguments?.takeIf { it.containsKey(ARG_OBJECT) }?.apply {
                val textView: TextView = view.findViewById(android.R.id.text1)
                textView.text = getInt(ARG_OBJECT).toString()
            }
        }
    }
    

Java

    public class CollectionDemoFragment extends Fragment {
        // When requested, this adapter returns a DemoObjectFragment,
        // representing an object in the collection.
        DemoCollectionPagerAdapter demoCollectionPagerAdapter;
        ViewPager viewPager;

        @Nullable
        @Override
        public View onCreateView(@NonNull LayoutInflater inflater,
                @Nullable ViewGroup container,
                @Nullable Bundle savedInstanceState) {
            return inflater.inflate(R.layout.collection_demo, container, false);
        }

        @Override
        public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
            demoCollectionPagerAdapter = new DemoCollectionPagerAdapter(getChildFragmentManager());
            viewPager = view.findViewById(R.id.pager);
            viewPager.setAdapter(demoCollectionPagerAdapter);
       }
    }

    // Since this is an object collection, use a FragmentStatePagerAdapter,
    // and NOT a FragmentPagerAdapter.
    public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {
        public DemoCollectionPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int i) {
            Fragment fragment = new DemoObjectFragment();
            Bundle args = new Bundle();
            // Our object is just an integer :-P
            args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1);
            fragment.setArguments(args);
            return fragment;
        }

        @Override
        public int getCount() {
            return 100;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return "OBJECT " + (position + 1);
        }
    }

    // Instances of this class are fragments representing a single
    // object in our collection.
    public class DemoObjectFragment extends Fragment {
        public static final String ARG_OBJECT = "object";

        @Override
        public View onCreateView(LayoutInflater inflater,
                ViewGroup container, Bundle savedInstanceState) {
           return inflater.inflate(R.layout.fragment_collection_object, container, false);
        }

        @Override
        public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
            Bundle args = getArguments();
            ((TextView) view.findViewById(android.R.id.text1))
                    .setText(Integer.toString(args.getInt(ARG_OBJECT)));
        }
    }
    

以下のセクションでは、タブを追加することでページ間のナビゲーションを容易にする方法について説明します。

TabLayout を使用してタブを追加する

TabLayout を使用すると、タブを水平に表示することができます。ViewPagerTabLayout を併用すると、スワイプビュー内でページ間を移動するための一般的なインターフェースを実現できます。

図 1: 4 つのタブを持つ TabLayout

ViewPager 内に TabLayout を組み込むには、<ViewPager> 要素内に <TabLayout> 要素を追加します。以下をご覧ください。

<androidx.viewpager.widget.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </androidx.viewpager.widget.ViewPager>
    

次に、setupWithViewPager() を使用して、TabLayoutViewPager にリンクします。TabLayout の各タブに対して、PagerAdapter から取得したページタイトルが自動的に入力されます。

Kotlin

    class CollectionDemoFragment : Fragment() {
        ...
        override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
            val tabLayout = view.findViewById(R.id.tab_layout)
            tabLayout.setupWithViewPager(viewPager)
        }
        ...
    }

    class DemoCollectionPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {

        override fun getCount(): Int  = 4

        override fun getPageTitle(position: Int): CharSequence {
            return "OBJECT ${(position + 1)}"
        }
        ...
    }
    

Java

    public class CollectionDemoFragment extends Fragment {
        ...
        @Override
        public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
            TabLayout tabLayout = view.findViewById(R.id.tab_layout);
            tabLayout.setupWithViewPager(viewPager);
        }
        ...
    }

    public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {
        ...
        @Override
        public int getCount() {
            return 4;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return "OBJECT " + (position + 1);
        }

        ...
    }
    

タブレイアウトの詳細なデザインガイドについては、タブに関するマテリアル デザイン ドキュメントをご覧ください。