【Android】画面をスライドさせる【ViewPagerを使う】

画面をスライドさせる方法を知りたい
画面全体を切り替える遷移方法を知りたい
チュートリアルのように、スライドショーで表示させたい

全部言ってくることは一緒ですw 画面をスライドさせる実装方法について解説します。

完成イメージは動画をご覧ください。

完成したソースコードをGitにアップしてます。
記事だけじゃ分からない方はこちらも参照してみてくださいー。

Gitに上げてるソースコードはこちら

結論！画面をスライドさせるためには、ViewPagerを使用する

ViewPagerとは？

Androidのサポートライブラリ（AndroidXの一部）の1つにViewPagerオブジェクトというものがあります。

こちらを使用すると、画面スライドを自動的にアニメーション付きで実装可能です。

注意

ViewPager2という改良版のライブラリが新しく出てます。新規でページビューを作る方は、こちらを使用するのがベストです。

今回は、個人的な勉強も含め通常のViewPagerを使用しています。

ViewPagerを使うのがベストですが、まだ使えますw

仮にサポートが終了しても、ViewPagerからViewPager2への移行方法も公式に記載されてるので安心。

1. スライドさせるページを作成する。View + Controller

画面となるXML（View）を作成します。中身は、スクロールViewの中に、TextViewが1つだけある単純なレイアウトです。

Text Viewにタイトルを表示します。タイトル名は単純に、「ページタイトル：○ページ目」を想定。

res/layout/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
    android:id="@+id/text"
    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>

Viewと紐付けるFragment（Controller）クラスを作成します。

タイトル名を取得する箇所は、後述するAdapterクラスから渡されるタイトル名を設定します。

ScreenSlidePageFragment

package com.example.myapplication

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView

class ScreenSlidePageFragment(): Fragment() {

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

        // タイトル名を取得して、設定する
        val textView = viewLayout.findViewById<TextView>(R.id.text)
        val value: String? = arguments?.getString(Constance.PAGE_TITLE, "")
        textView.text = if (value.isNullOrEmpty()) "No title" else value
        return viewLayout
    }
}

2.スライドするページと、その基盤となるクラスと接続するAdapterを作成する。

Adapter（アダプタ）とは、何かの何かの間に入って仲介役として活躍する部品のことです。

Adapterでは、ページ数と表示するページを作成します。

表示するページとは、1.で作成したページのことです。

ScreenSlidePagerAdapter

package com.example.myapplication

import android.os.Bundle
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentStatePagerAdapter


// ページ数を設定
private const val NUM_PAGES = 5
class ScreenSlidePagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {

    // ページ数を設定
    override fun getCount(): Int = NUM_PAGES

    // 各ページの画面を設定
    override fun getItem(position: Int): Fragment {
        val fragment = ScreenSlidePageFragment()
        // ScreenSlidePageFragment画面側で使用するタイトル名を設定
        val args = Bundle()
        args.putString(Constance.PAGE_TITLE, "ページタイトル：" + (position + 1) + "ページ目")
        fragment.arguments = args
        return fragment
    }

}

3.スライドさせる画面の基盤（下地）を作成する。View + Controller

スライドさせる画面の基盤（View）を作成します。

中身は、単純にViewPagerがあるのみです。この上に、1.で作成した各ページが乗っかるイメージです。

res/layout/<span>activity_screen_slide</span>.xml

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

次に、Controllerクラスを作成します。

ここでしていることは2つ！

ViewPagerとAdapterを接続する
OS側の戻るボタンの遷移処理

ScreenSlidePagerActivity

package com.example.myapplication

import android.os.Bundle
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentActivity
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentStatePagerAdapter
import android.support.v4.view.ViewPager

class ScreenSlidePagerActivity : FragmentActivity() {

    // ViwePager
    private lateinit var mPager: ViewPager

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_screen_slide)

        // xml側で定義したViewPagerの基盤となるIDと紐付け
        mPager = findViewById(R.id.pager)

        // Adapterクラスを定義する
        val pagerAdapter = ScreenSlidePagerAdapter(supportFragmentManager)
        // AdapterをViewPagerに接続する
        mPager.adapter = pagerAdapter
    }

    override fun onBackPressed() {
        if (mPager.currentItem == 0) {
            // 最初の画面からOSのバックボタンを押した場合、前画面に遷移させる
            super.onBackPressed()
        } else {
            // 最初の画面以外の場合は、前のページに戻す
            mPager.currentItem = mPager.currentItem - 1
        }
    }
}