【Kotlin】3ステップでサクッとFragment+ViewPagerでスワイプページを作る

※この記事の対象者は、早く実装する事が目的で作り方を完結に学びたい方です。

Fragment+ViewPagerでページングできるスワイプページをサクッと作ります。

手順

• ViewPagerを持つActivity作成
• FragmentPagerAdapter作成
• 表示させるFragment作成

ステップ1. ViewPagerを持つFragment作成

ページングできるViewを持つ大元の画面を作っていきます。

class RootViewActivity : AppCompatActivity() {
    val viewPager : ViewPager by lazy { view_pager }

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

        // ↓ Fragmentの配列, Adapterは後で作成します。
        val fragments = arrayListOf(ViewFragment(), ViewFragment(), ViewFragment())
        val adapter = PagerAdapter(fragmentManager, fragments)
        viewPager.adapter = adapter
    }

}

ステップ2. FragmentPagerAdapter作成

PagerAdapterはページの切り替えを行う仕組みを書く場所です。 ページングできるViewの配列を持たせておきます。

※ ここで利用するFragmentは「support.v4」の方です。

class PagerAdapter(fragmentManager: FragmentManager, private var fragments: ArrayList<Fragment>) : FragmentPagerAdapter(fragmentManager) {

    init {
        getItem(0)
    }

    override fun getItem(position: Int): Fragment? {
        // ※ どのFragmentを表示させるかを設定
        return fragments[position]
    }

    override fun getCount(): Int {
        // ※ ページングする画面の数を設定
        return fragments.size
    }

}

ステップ3. 表示させるFragment作成

最後に表示させるFragmentを作成します。

class ViewFragment : Fragment() {

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

}

最後に

以上がKotlinのFragment+PagerAdapterを使ったスワイプページの作成手順です。 これだけでページングができる画面を作れるのかぁって感じです。 Kotlin楽しいですね！