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

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

Android Studio
2021.2.1

ViewPager2

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

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

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

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

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

目次
1. Googleの例
　1.1 ビューを作成する
　1.2 フラグメントを作成する
　1.3 ViewPager2 を追加する
　1.4 ページ数を表示
2. Galleryっぽいサンプル
3. サンプルコード

Googleの例

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

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

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

ビューを作成する

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

fragment_screen_slide_page.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView style="?android:textAppearanceMedium"
        android:padding="16dp"
        android:lineSpacingMultiplier="1.2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/lorem_ipsum" />
</ScrollView>

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/content"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<TextView style="?android:textAppearanceMedium"

android:padding="16dp"

android:lineSpacingMultiplier="1.2"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/lorem_ipsum" />

</ScrollView>

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

フラグメントを作成する

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

ScreenSlidePageFragment.java

//package your.package.name;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;

public class ScreenSlidePageFragment extends Fragment {

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

    @Override
    public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }
}

//package your.package.name;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import androidx.annotation.NonNull;

import androidx.fragment.app.Fragment;

public class ScreenSlidePageFragment extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater,

ViewGroup container,

Bundle savedInstanceState) {

return inflater.inflate(

R.layout.fragment_screen_slide_page, container, false);

}

@Override

public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {

super.onViewCreated(view, savedInstanceState);

}

ViewPager2 を追加する

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

activity_screen_slide.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.viewpager2.widget.ViewPager2
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<?xml version="1.0" encoding="utf-8"?>

<androidx.viewpager2.widget.ViewPager2

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/pager"

android:layout_width="match_parent"

android:layout_height="match_parent" />

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

//package your.package.package;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;

public class MainActivity extends FragmentActivity {

    // The number of pages (wizard steps) to show in this demo.
    private static final int NUM_PAGES = 5;

    // The pager widget, which handles animation and allows swiping horizontally
    // to access previous and next wizard steps.
    private ViewPager2 viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_screen_slide);

        // Instantiate a ViewPager2 and a PagerAdapter.
        viewPager = findViewById(R.id.pager);

        // The pager adapter, which provides the pages to the view pager widget.
        FragmentStateAdapter pagerAdapter = new ScreenSlidePagerAdapter(this);

        viewPager.setAdapter(pagerAdapter);
    }

    @Override
    public void onBackPressed() {
        if (viewPager.getCurrentItem() == 0) {
            // If the user is currently looking at the first step,
            // allow the system to handle the Back button.
            // This calls finish() on this activity and pops the back stack.
            super.onBackPressed();
        } else {
            // Otherwise, select the previous step.
            viewPager.setCurrentItem(viewPager.getCurrentItem() - 1);
        }
    }

     // A simple pager adapter that represents 5 ScreenSlidePageFragment
     // objects, in sequence.
    private static class ScreenSlidePagerAdapter extends FragmentStateAdapter {

        public ScreenSlidePagerAdapter(FragmentActivity fa) {
            super(fa);
        }

        @NonNull
        @Override
        public Fragment createFragment(int position) {
            return new ScreenSlidePageFragment();
        }

        @Override
        public int getItemCount() {

            return NUM_PAGES;
        }

    }
}

//package your.package.package;

import androidx.annotation.NonNull;

import androidx.fragment.app.Fragment;

import androidx.fragment.app.FragmentActivity;

import androidx.viewpager2.adapter.FragmentStateAdapter;

import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;

public class MainActivity extends FragmentActivity {

// The number of pages (wizard steps) to show in this demo.

private static final int NUM_PAGES = 5;

// The pager widget, which handles animation and allows swiping horizontally

// to access previous and next wizard steps.

private ViewPager2 viewPager;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_screen_slide);

// Instantiate a ViewPager2 and a PagerAdapter.

viewPager = findViewById(R.id.pager);

// The pager adapter, which provides the pages to the view pager widget.

FragmentStateAdapter pagerAdapter = new ScreenSlidePagerAdapter(this);

viewPager.setAdapter(pagerAdapter);

}

@Override

public void onBackPressed() {

if (viewPager.getCurrentItem() == 0) {

// If the user is currently looking at the first step,

// allow the system to handle the Back button.

// This calls finish() on this activity and pops the back stack.

super.onBackPressed();

} else {

// Otherwise, select the previous step.

viewPager.setCurrentItem(viewPager.getCurrentItem() - 1);

}

// A simple pager adapter that represents 5 ScreenSlidePageFragment

// objects, in sequence.

private static class ScreenSlidePagerAdapter extends FragmentStateAdapter {

public ScreenSlidePagerAdapter(FragmentActivity fa) {

super(fa);

}

@NonNull

@Override

public Fragment createFragment(int position) {

return new ScreenSlidePageFragment();

}

@Override

public int getItemCount() {

return NUM_PAGES;

}

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

ページ数を表示

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

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

MainActivity.javaに追加

@NonNull
        @Override
        public Fragment createFragment(int position) {

            Fragment fagment =new ScreenSlidePageFragment();
            Bundle bundle = new Bundle();
            bundle.putInt("Page", position);
            fagment.setArguments(bundle);
            return fagment;

            //return new ScreenSlidePageFragment();
        }

@NonNull

@Override

public Fragment createFragment(int position) {

Fragment fagment =new ScreenSlidePageFragment();

Bundle bundle = new Bundle();

bundle.putInt("Page", position);

fagment.setArguments(bundle);

return fagment;

//return new ScreenSlidePageFragment();

}

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

ScreenSlidePageFragment.javaへの変更

    @Override
    public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        Bundle args = getArguments();
        assert args != null;
        int count = args.getInt("Page");
        String str = "Fragment: " + count;

        TextView textView = view.findViewById(R.id.text_view);
        textView.setText(str);
    }

@Override

public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {

super.onViewCreated(view, savedInstanceState);

Bundle args = getArguments();

assert args != null;

int count = args.getInt("Page");

String str = "Fragment: " + count;

TextView textView = view.findViewById(R.id.text_view);

textView.setText(str);

}

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

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    ...

    <TextView style="?android:textAppearanceMedium"
        android:id="@+id/text_view"
        ... />
</ScrollView>

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

...

<TextView style="?android:textAppearanceMedium"

android:id="@+id/text_view"

... />

</ScrollView>

Galleryっぽいサンプル

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

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

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

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

String[] flowers = {
    "bellflower", "bougainvillea","chamomile",
    "chamomile2", "cosmos", "cosmos_field",
    "delphinium", "flowers", "hibiscus",
    "hydrangea", "hydrangea_pink", "lotus",
    "rose", "spring_flowers"
};

String[] flowers = {

"bellflower", "bougainvillea","chamomile",

"chamomile2", "cosmos", "cosmos_field",

"delphinium", "flowers", "hibiscus",

"hydrangea", "hydrangea_pink", "lotus",

"rose", "spring_flowers"

};

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

ArrayList<Integer> flowerList = new ArrayList<>();

for (String member: flowers){
    int imageId = getResources().getIdentifier(member,"drawable", getPackageName());
    flowerList.add(imageId);
}

ArrayList<Integer> flowerList = new ArrayList<>();

for (String member: flowers){

int imageId = getResources().getIdentifier(member,"drawable", getPackageName());

flowerList.add(imageId);

}

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

...
ArrayList picture;

public ScreenSlidePagerAdapter(
        FragmentActivity fa, ArrayList flowerList) {
    super(fa);
    picture = flowerList;
}

public Fragment createFragment(int position) {

    Fragment fagment =new ScreenSlidePageFragment();
    Bundle bundle = new Bundle();
    ...
    bundle.putIntegerArrayList("Photo", picture);
    fagment.setArguments(bundle);

    return fagment;
}

...

ArrayList picture;

public ScreenSlidePagerAdapter(

FragmentActivity fa, ArrayList flowerList) {

super(fa);

picture = flowerList;

}

public Fragment createFragment(int position) {

Fragment fagment =new ScreenSlidePageFragment();

Bundle bundle = new Bundle();

...

bundle.putIntegerArrayList("Photo", picture);

fagment.setArguments(bundle);

return fagment;

}

Fragmentで受け取る

@Override
public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    Bundle args = getArguments();
    assert args != null;
    ArrayList<Integer> image = args.getIntegerArrayList("Photo");

    ImageView imageView = view.findViewById(R.id.image_view);
    imageView.setImageBitmap(
            BitmapFactory.decodeResource(this.getResources(), image.get(position)));
}

@Override

public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {

super.onViewCreated(view, savedInstanceState);

Bundle args = getArguments();

assert args != null;

ArrayList<Integer> image = args.getIntegerArrayList("Photo");

ImageView imageView = view.findViewById(R.id.image_view);

imageView.setImageBitmap(

BitmapFactory.decodeResource(this.getResources(), image.get(position)));

}

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    ...
    <ImageView
        android:id="@+id/image_view"
        android:padding="16dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        android:contentDescription="@string/description"/>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

...

<ImageView

android:id="@+id/image_view"

android:padding="16dp"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="fitCenter"

android:contentDescription="@string/description"/>

</LinearLayout>

サンプルコード

　
MainActivity.java

//package your.package.name;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;
import java.util.ArrayList;

public class MainActivity extends FragmentActivity {

    // The pager widget, which handles animation and allows swiping horizontally
    // to access previous and next wizard steps.
    private ViewPager2 viewPager;

    private static final String[] flowers = {
        "bellflower", "bougainvillea","chamomile",
        "chamomile2", "cosmos", "cosmos_field",
        "delphinium", "flowers", "hibiscus",
        "hydrangea", "hydrangea_pink", "lotus",
        "rose", "spring_flowers"
    };

    private final ArrayList<Integer> flowerList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_screen_slide);

        // Instantiate a ViewPager2 and a PagerAdapter.
        viewPager = findViewById(R.id.pager);

        // for-each member名をR.drawable.名前としてintに変換してarrayに登録
        for (String member: flowers){
            int imageId = getResources().getIdentifier(
                    member,"drawable", getPackageName());
            flowerList.add(imageId);
        }

        // The pager adapter, which provides the pages to the view pager widget.
        FragmentStateAdapter pagerAdapter = new ScreenSlidePagerAdapter(this, flowerList);

        viewPager.setAdapter(pagerAdapter);
    }

    @Override
    public void onBackPressed() {
        if (viewPager.getCurrentItem() == 0) {
            // If the user is currently looking at the first step,
            // allow the system to handle the Back button.
            // This calls finish() on this activity and pops the back stack.
            super.onBackPressed();
        } else {
            // Otherwise, select the previous step.
            viewPager.setCurrentItem(viewPager.getCurrentItem() - 1);
        }
    }

    // A simple pager adapter that represents 5 ScreenSlidePageFragment
    // objects, in sequence.
    private static class ScreenSlidePagerAdapter extends FragmentStateAdapter {

        ArrayList<Integer> picture;

        public ScreenSlidePagerAdapter(
                FragmentActivity fa, ArrayList<Integer> flowerList) {
            super(fa);
            picture = flowerList;
        }

        @NonNull
        @Override
        public Fragment createFragment(int position) {

            Fragment fagment =new ScreenSlidePageFragment();
            Bundle bundle = new Bundle();
            bundle.putInt("Page", position);
            bundle.putIntegerArrayList("Photo", picture);
            fagment.setArguments(bundle);

            return fagment;
        }

        @Override
        public int getItemCount() {
            return picture.size();
        }

    }
}

//package your.package.name;

import androidx.annotation.NonNull;

import androidx.fragment.app.Fragment;

import androidx.fragment.app.FragmentActivity;

import androidx.viewpager2.adapter.FragmentStateAdapter;

import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;

import java.util.ArrayList;

public class MainActivity extends FragmentActivity {

// The pager widget, which handles animation and allows swiping horizontally

// to access previous and next wizard steps.

private ViewPager2 viewPager;

private static final String[] flowers = {

"bellflower", "bougainvillea","chamomile",

"chamomile2", "cosmos", "cosmos_field",

"delphinium", "flowers", "hibiscus",

"hydrangea", "hydrangea_pink", "lotus",

"rose", "spring_flowers"

};

private final ArrayList<Integer> flowerList = new ArrayList<>();

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_screen_slide);

// Instantiate a ViewPager2 and a PagerAdapter.

viewPager = findViewById(R.id.pager);

// for-each member名をR.drawable.名前としてintに変換してarrayに登録

for (String member: flowers){

int imageId = getResources().getIdentifier(

member,"drawable", getPackageName());

flowerList.add(imageId);

}

// The pager adapter, which provides the pages to the view pager widget.

FragmentStateAdapter pagerAdapter = new ScreenSlidePagerAdapter(this, flowerList);

viewPager.setAdapter(pagerAdapter);

}

@Override

public void onBackPressed() {

if (viewPager.getCurrentItem() == 0) {

// If the user is currently looking at the first step,

// allow the system to handle the Back button.

// This calls finish() on this activity and pops the back stack.

super.onBackPressed();

} else {

// Otherwise, select the previous step.

viewPager.setCurrentItem(viewPager.getCurrentItem() - 1);

}

// A simple pager adapter that represents 5 ScreenSlidePageFragment

// objects, in sequence.

private static class ScreenSlidePagerAdapter extends FragmentStateAdapter {

ArrayList<Integer> picture;

public ScreenSlidePagerAdapter(

FragmentActivity fa, ArrayList<Integer> flowerList) {

super(fa);

picture = flowerList;

}

@NonNull

@Override

public Fragment createFragment(int position) {

Fragment fagment =new ScreenSlidePageFragment();

Bundle bundle = new Bundle();

bundle.putInt("Page", position);

bundle.putIntegerArrayList("Photo", picture);

fagment.setArguments(bundle);

return fagment;

}

@Override

public int getItemCount() {

return picture.size();

}

ScreenSlidePageFragment.java

//package your.package.name;

import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import java.util.ArrayList;

public class ScreenSlidePageFragment extends Fragment {

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

        return  inflater.inflate(
                R.layout.fragment_screen_slide_page, container, false);
    }

    @Override
    public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        Bundle args = getArguments();
        assert args != null;
        int position = args.getInt("Page");
        ArrayList<Integer> image = args.getIntegerArrayList("Photo");

        String str = "Fragment: " + position;

        TextView textView = view.findViewById(R.id.text_view);
        textView.setText(str);

        ImageView imageView = view.findViewById(R.id.image_view);
        imageView.setImageBitmap(
                BitmapFactory.decodeResource(this.getResources(), image.get(position)));
    }
}

//package your.package.name;

import android.graphics.BitmapFactory;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.TextView;

import androidx.annotation.NonNull;

import androidx.fragment.app.Fragment;

import java.util.ArrayList;

public class ScreenSlidePageFragment extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater,

ViewGroup container,

Bundle savedInstanceState) {

return inflater.inflate(

R.layout.fragment_screen_slide_page, container, false);

}

@Override

public void onViewCreated(@NonNull View view, Bundle savedInstanceState) {

super.onViewCreated(view, savedInstanceState);

Bundle args = getArguments();

assert args != null;

int position = args.getInt("Page");

ArrayList<Integer> image = args.getIntegerArrayList("Photo");

String str = "Fragment: " + position;

TextView textView = view.findViewById(R.id.text_view);

textView.setText(str);

ImageView imageView = view.findViewById(R.id.image_view);

imageView.setImageBitmap(

BitmapFactory.decodeResource(this.getResources(), image.get(position)));

}

その他のファイル

activity_screen_slide.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.viewpager2.widget.ViewPager2
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<?xml version="1.0" encoding="utf-8"?>

<androidx.viewpager2.widget.ViewPager2

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/pager"

android:layout_width="match_parent"

android:layout_height="match_parent" />

fragment_screen_slide_page.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#000"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text_view"
        android:textColor="#fff"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/image_view"
        android:padding="16dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        android:contentDescription="@string/description"/>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:background="#000"

tools:context=".MainActivity">

<TextView

android:id="@+id/text_view"

android:textColor="#fff"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

<ImageView

android:id="@+id/image_view"

android:padding="16dp"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="fitCenter"

android:contentDescription="@string/description"/>

</LinearLayout>

strings.xml

<resources>
    <string name="app_name"YourAppName</string>
    <string name="description">folwer</string>
</resources>

<string name="description">folwer</string>

</resources>

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