[Android] ViewPager2 を使ってギャラリーっぽくしてみる

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

Android Studio
2021.2.1




ViewPager2

 
ViewPager2でGalleryのように作るうえで、写真の数は比較的多くまた削除されることもあります。Fragmentの作成は自動的にやらないとうまくいきません

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

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

ここでは、2と3を想定して以下のようにJavaで作成してみます

1x1.trans - [Android] ViewPager2 を使ってギャラリーっぽくしてみる 1x1.trans - [Android] ViewPager2 を使ってギャラリーっぽくしてみる 1x1.trans - [Android] ViewPager2 を使ってギャラリーっぽくしてみる

 

 

Googleの例

 
ViewPager2 を使用してフラグメント間をスライドする、に沿ってそのまま作ってみます

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

  • fragment_screen_slide_page.xml
  • ScreenSlidePageFragment.java
  • activity_screen_slide.xml
  • MainActivity.java
    • FragmentStateAdapterを継承したクラスを含む
 

ビューを作成する

フラグメントのコンテンツ用に使用するレイアウト ファイル

fragment_screen_slide_page.xml

lorem_ipsumは適当に何かstrings.xmlに設定しておきます
pageとか…

 

フラグメントを作成する

新しいページが必要になるたびに、親アクティビティ内にこのフラグメントのインスタンスを作成する

ScreenSlidePageFragment.java

 

ViewPager2 を追加する

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

activity_screen_slide.xml

FragmentStateAdapte オブジェクトを使用
createFragment() メソッドを実装して ScreenSlidePageFragment のインスタンスを新しいページとして供給
getItemCount() メソッドを実装し、アダプターが作成するページの数を返す
FragmentStateAdapter を ViewPager2 オブジェクトに接続
MainActivity.java

これで実行してみましょう
ページがスライドできたでしょうか

 

ページ数を表示

このままでもViewPager2は起動しますが、画面のテキストが同じなので
ページで変わるように変更を加えます

Bundleを使ってcreateFragmentmの引数positionを作成されるFragmentに
Key, Valueで渡します

MainActivity.javaに追加

FragmentでBundleから取り出してTextViewで設定

ScreenSlidePageFragment.javaへの変更

android:id=”@+id/text_view”を追加
fragment_screen_slide_page.xml

 

Galleryっぽいサンプル

 

Galleryっぽいというのは、画像を表示させるところだけの実装なので
端末に保存された画像を探し、外部ストレージにアクセスするところまではやりません
おそらくメモリ管理などの隠れた課題も潜んでいると思います

drawableに適当に画像を入れておきます

1x1.trans - [Android] ViewPager2 を使ってギャラリーっぽくしてみる

Googleの例を元に以下の追加をします

画像ファイルをArrayListに入れます

for-each member名を 「R.drawable.名前」としてintに変換してArrayListに登録

Fragmentの作成でBundleにArrayListを追加して渡す

Fragmentで受け取る

FragmentのレイアウトにImageViewを追加しておく

 

サンプルコード

 
MainActivity.java

ScreenSlidePageFragment.java

activity_screen_slide.xml

fragment_screen_slide_page.xml

strings.xml

 
 

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




シェアする

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

フォローする