このページは Cloud Translation API によって翻訳されました。

ViewPager2 を使用してフラグメント間をスライドする

画面スライドは、ある画面全体から別の画面への遷移で、設定ウィザードやスライドショーを利用できますこのトピックでは、Google Chat でスクリーンスライドを実行する方法を説明します。 ViewPager2 渡されます。ViewPager2 オブジェクトは、画面スライドを自動的にアニメーション化できます。例コンテンツのある画面から次の画面に遷移する画面スライドの画像。

図 1. 画面スライドのアニメーション。

動作例全体を見るには表示サンプルアプリを GitHub で公開しています。

</ph> 注: アプリですでに ViewPager, ViewPager から ViewPager2 に移行するをご覧ください。

ViewPager2 を使用するには、いくつかの追加が必要ですに AndroidX 依存関係をできます。その後、以下のセクションに示す手順を行います。

ビューを作成する

後でフラグメントのコンテンツ用に使用するレイアウトファイルを作成します。また、Terraform で定義した文字列を渡します。次の例には、いくつかのビューを表示するテキストビューが含まれています。 text:

<!-- fragment_screen_slide_page.xml -->
<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>

フラグメントを作成する

作成: 次の Fragment クラスは、モジュールで作成したレイアウトが返されます。 onCreateView() メソッドを呼び出します。これで、必要なときにいつでも、このフラグメントのインスタンスを親アクティビティ内に作成できます。ユーザーに表示する新しいページ:

Kotlin

import androidx.fragment.app.Fragment

class ScreenSlidePageFragment : Fragment() {

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

Java

import androidx.fragment.app.Fragment;
...
public class ScreenSlidePageFragment extends Fragment {

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

ViewPager2 を追加する

ViewPager2 オブジェクトには、ページ間を移動するスワイプ操作が組み込まれています。デフォルトで画面スライドアニメーションが表示されるため、独自のアニメーションを作成する必要はありません。 ViewPager2 の用途 FragmentStateAdapter オブジェクトとして新しいページを表示するため、FragmentStateAdapter はあります。

まず、ViewPager2 オブジェクトを含むレイアウトを作成します。

<!-- activity_screen_slide.xml -->
<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" />

次の処理を行うアクティビティを作成します。

ViewPager2 を使用して、レイアウト用のコンテンツビューを設定します。
FragmentStateAdapter 抽象クラスを拡張するクラスを作成し、実装する createFragment() メソッドを使用して、ScreenSlidePageFragment のインスタンスを新しいページとして提供します。必要なこと実装する getItemCount() メソッド。アダプターが作成するページ数を返します。他にもこの例では 5 となっています。
FragmentStateAdapter を ViewPager2 オブジェクトに接続します。

Kotlin

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
...
/**
 * The number of pages (wizard steps) to show in this demo.
 */
private const val NUM_PAGES = 5

class ScreenSlidePagerActivity : FragmentActivity() {

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

    override fun onCreate(savedInstanceState: Bundle?) {
        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.
        val pagerAdapter = ScreenSlidePagerAdapter(this)
        viewPager.adapter = pagerAdapter
    }

    override fun onBackPressed() {
        if (viewPager.currentItem == 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.currentItem = viewPager.currentItem - 1
        }
    }

    /**
     * A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in
     * sequence.
     */
    private inner class ScreenSlidePagerAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {
        override fun getItemCount(): Int = NUM_PAGES

        override fun createFragment(position: Int): Fragment = ScreenSlidePageFragment()
    }
}

Java

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
...
public class ScreenSlidePagerActivity 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;

    /**
     * The pager adapter, which provides the pages to the view pager widget.
     */
    private FragmentStateAdapter pagerAdapter;

    @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);
        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 class ScreenSlidePagerAdapter extends FragmentStateAdapter {
        public ScreenSlidePagerAdapter(FragmentActivity fa) {
            super(fa);
        }

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

        @Override
        public int getItemCount() {
            return NUM_PAGES;
        }
    }
}

PageTransformer を使用してアニメーションをカスタマイズする

デフォルトの画面スライドアニメーションとは異なるアニメーションを表示するには、 ViewPager2.PageTransformer ViewPager2 オブジェクトに渡します。このインターフェースは単一のメソッド transformPage()。このメソッドは、画面の遷移の各時点で、表示されるページごとに 1 回呼び出されます。通常は 1 ページのみ表示され、画面外の隣接するページも対象になります。たとえば 3 ページ目でユーザーが 4 ページ目にドラッグすると、2 ページ目で transformPage() が呼び出されます。各ステップで 3、4 です。

transformPage() の実装では、カスタムスライドを作成できます。変換が必要なページを Google Cloud 上のページの位置に基づいて画面に表示されます。ページの position パラメータから、 transformPage() メソッドを使用します。

position パラメータは、ページの位置を画面中央に配置されます。このパラメータは、ユーザーがスクロールすると変化する動的なプロパティです。確認しましょう。ページが画面全体に表示される場合、その位置の値は 0 です。ページが画面の右側から描画される場合、位置の値は 1 です。ユーザーがスクロールした場合 1 ページ目と 2 ページ目の中間にあり、1 ページ目の位置は -0.5、2 ページ目の位置は 0.5 の位置。画面上のページの位置に基づいてスライドのアニメーションをカスタマイズするには、 setAlpha(), setTranslationX(), または setScaleY()。

新しい P-MAX キャンペーンを PageTransformer, 発信 setPageTransformer() カスタムアニメーションを適用します。たとえば、 PageTransformer（名前: ZoomOutPageTransformer）は、カスタム次のようなアニメーションになります。

Kotlin

val viewPager: ViewPager2 = findViewById(R.id.pager)
...
viewPager.setPageTransformer(ZoomOutPageTransformer())

Java

ViewPager2 viewPager = findViewById(R.id.pager);
...
viewPager.setPageTransformer(new ZoomOutPageTransformer());

ズームアウトページトランスフォーマーをご覧ください。深度ページトランスフォーマーの各セクションで、 PageTransformer。

ズームアウトページトランスフォーマー

このページトランスフォーマーは、隣接するページ間をスクロールするときにページを縮小またはフェードします。ページとして中央に近づくと元のサイズに戻りフェードインします

図 2. ZoomOutPageTransformer の例。

Kotlin

private const val MIN_SCALE = 0.85f
private const val MIN_ALPHA = 0.5f

class ZoomOutPageTransformer : ViewPager2.PageTransformer {

    override fun transformPage(view: View, position: Float) {
        view.apply {
            val pageWidth = width
            val pageHeight = height
            when {
                position < -1 -> { // [-Infinity,-1)
                    // This page is way off-screen to the left.
                    alpha = 0f
                }
                position <= 1 -> { // [-1,1]
                    // Modify the default slide transition to shrink the page as well.
                    val scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position))
                    val vertMargin = pageHeight * (1 - scaleFactor) / 2
                    val horzMargin = pageWidth * (1 - scaleFactor) / 2
                    translationX = if (position < 0) {
                        horzMargin - vertMargin / 2
                    } else {
                        horzMargin + vertMargin / 2
                    }

                    // Scale the page down (between MIN_SCALE and 1).
                    scaleX = scaleFactor
                    scaleY = scaleFactor

                    // Fade the page relative to its size.
                    alpha = (MIN_ALPHA +
                            (((scaleFactor - MIN_SCALE) / (1 - MIN_SCALE)) * (1 - MIN_ALPHA)))
                }
                else -> { // (1,+Infinity]
                    // This page is way off-screen to the right.
                    alpha = 0f
                }
            }
        }
    }
}

Java

public class ZoomOutPageTransformer implements ViewPager2.PageTransformer {
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0f);

        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well.
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1).
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            // Fade the page relative to its size.
            view.setAlpha(MIN_ALPHA +
                    (scaleFactor - MIN_SCALE) /
                    (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0f);
        }
    }
}

奥行きページトランスフォーマー

このページトランスフォーマーでは、ページを左にスライドする場合にデフォルトのスライドアニメーションを使用しますが、「深さ」ページを右にスライドさせるアニメーションです奥行きのあるアニメーションでページがフェードアウトし、線形にスケールダウンします

図 3. DepthPageTransformer の例。

奥行きアニメーションの間も、デフォルトのアニメーション（画面スライド）が実行されるため、マイナスの X 変換で画面スライドに対抗します例:

Kotlin

view.translationX = -1 * view.width * position

Java

view.setTranslationX(-1 * view.getWidth() * position);

次の例は、動作中のデフォルトの画面スライドアニメーションに対抗する方法を示しています。 Page Transformer:

Kotlin

private const val MIN_SCALE = 0.75f

@RequiresApi(21)
class DepthPageTransformer : ViewPager2.PageTransformer {

    override fun transformPage(view: View, position: Float) {
        view.apply {
            val pageWidth = width
            when {
                position < -1 -> { // [-Infinity,-1)
                    // This page is way off-screen to the left.
                    alpha = 0f
                }
                position <= 0 -> { // [-1,0]
                    // Use the default slide transition when moving to the left page.
                    alpha = 1f
                    translationX = 0f
                    translationZ = 0f
                    scaleX = 1f
                    scaleY = 1f
                }
                position <= 1 -> { // (0,1]
                    // Fade the page out.
                    alpha = 1 - position

                    // Counteract the default slide transition.
                    translationX = pageWidth * -position
                    // Move it behind the left page.
                    translationZ = -1f

                    // Scale the page down (between MIN_SCALE and 1).
                    val scaleFactor = (MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)))
                    scaleX = scaleFactor
                    scaleY = scaleFactor
                }
                else -> { // (1,+Infinity]
                    // This page is way off-screen to the right.
                    alpha = 0f
                }
            }
        }
    }
}

Java

@RequiresApi(21)
public class DepthPageTransformer implements ViewPager2.PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0f);

        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page.
            view.setAlpha(1f);
            view.setTranslationX(0f);
            view.setTranslationZ(0f);
            view.setScaleX(1f);
            view.setScaleY(1f);

        } else if (position <= 1) { // (0,1]
            // Fade the page out.
            view.setAlpha(1 - position);

            // Counteract the default slide transition.
            view.setTranslationX(pageWidth * -position);
            // Move it behind the left page
            view.setTranslationZ(-1f);

            // Scale the page down (between MIN_SCALE and 1).
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0f);
        }
    }
}

参考情報

ViewPager2 の詳細については、以下の参考リンクをご覧ください。

サンプル

ViewPager2 サンプル GitHub で管理できます。

動画

ページをめくる: ViewPager2 への移行（Android Dev Summit '19）

ViewPager2 を使用してフラグメント間をスライドする

ビューを作成する

フラグメントを作成する

Kotlin

Java

ViewPager2 を追加する

Kotlin

Java

PageTransformer を使用してアニメーションをカスタマイズする

Kotlin

Java

ズームアウト ページ トランスフォーマー

Kotlin

Java

奥行きページ トランスフォーマー

Kotlin

Java

Kotlin

Java

参考情報

サンプル

動画

ズームアウトページトランスフォーマー

奥行きページトランスフォーマー