[Android] ViewPager2 をRecyclerView.Adapterで作成する

フォトやGalleryのアプリなどは写真をスワイプで次々と遷移をさせていますが、これはViewPager2をRecyclerView.Adapterで利用すると可能です

Android Studio
2021.2.1




ViewPager2

 
ViewPager2でGalleryのように作るうえで、写真の数は比較的多くまた削除されることもあります。

ViewPager2では、様々なアプローチがありますが、

  1. 遷移する画面を個別に作成
  2. 毎回画面を自動で作成
  3. アダプターはFragmentStateAdapter
  4. アダプターはRecyclerView.Adapter

ここでは、2と4を想定して以下のように写真を3枚適当に用意してスライドさせてみます

1x1.trans - [Android] ViewPager2 をRecyclerView.Adapterで作成する 1x1.trans - [Android] ViewPager2 をRecyclerView.Adapterで作成する 1x1.trans - [Android] ViewPager2 をRecyclerView.Adapterで作成する

 

 

RecyclerView.Adapterの例

 
作成するファイルは以下の4つです

  • screen_slide_page.xml
  • activity_maine.xml
  • MainActivity.java
  • TestAdapter.java
    • RecyclerView.Adapterを継承したクラス
 

ビューを作成する

TextViewとImageViewを含む
スライドするコンテンツ用に使用するレイアウト ファイルを作成

screen_slide_page.xml

 

ViewPager2 を追加する

Activityのレイアウトにviewpager2の
<androidx.viewpager2.widget.ViewPager2
… />
を設定する

activity_main.xml

3ページ用の写真を適当に用意してdrawableに入れておきリストにします
また、その写真の名前もリストにします

MainActivity.java

 

RecyclerView.Adapterを継承したクラスの作成

写真と名前をArrayListに入れたので、それらをコンストラクタで受け取ります
RecyclerViewは定義された表示方法で動的に作成し、これらをリサイクルします

アイテムが画面外にスクロールされても、RecyclerViewはビューを破棄せず、画面上にスクロールされた新しいアイテムのビューを再利用します
これによりパフォーマンスの大幅な改善、アプリの応答性の向上、消費電力の削減になります

TestAdapter.java

 

サンプルコード

 
MainActivity.java

TestAdapter.java

activity_main.xml

screen_slide_page.xml

strings.xml

RecyclerViewでGrid表示にすることができますが
GridLayoutManager(this, 2, RecyclerView.VERTICAL, false));
このspanCountとorientationの引数を変える事で似たように作成することができます
 

as2021 recycler 00b 100x100 - [Android] ViewPager2 をRecyclerView.Adapterで作成する
GridViewのようにRecyclerViewを使って格子状に表示して、ドラッグ&ドロップとスワイプで削除を行うことができます

 

References:
ViewPager2 を使用してフラグメント間をスライドする
ViewPager2
ViewPager から ViewPager2 に移行する







アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう。

TECH ACADEMY
オンライン説明会


侍エンジニア塾
侍エンジニア塾 無料体験レッスン


とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


シェアする

  • このエントリーをはてなブックマークに追加

フォローする