■ はじめに

https://dk521123.hatenablog.com/entry/2013/09/26/010117

で画面遷移について扱ったが、今回は、左から右へのスワイプで
画面遷移できるようにするやり方のひとつに ViewPagerってのがある。

また、iPhoneのように、ListViewでスワイプしたら、
削除ボタンが表示したかったので
調べてみたら、以下のサイトが見つかった。

http://yusuke-hata.hatenablog.com/entry/2014/01/16/021853

ViewPager を使うらしいので、手始めにViewPager の簡単なサンプルを作成してみる。

追記：ViewPager2

ViewPager2 ってのもあるので、それは、関連記事を参照のこと。

画面コンポーネント / ViewPager
https://dk521123.hatenablog.com/entry/2019/09/30/020307

■ 作成手順

* ViewPager / ViewPager2 どちらでも基本は同じで以下の通り。

１）Fragmentを追加・実装する
２）Activityに ViewPager を追加する
　⇒ その際に、id を設定する
３）Adapterを実装する
４）２）のActivityを実装する

■ サンプル

例１：Hello World

１）Fragmentを追加・実装する 
　=> 以下「QuestionFragment.kt」「AnswerFragment.kt」を参照

２）ActivityにViewPagerを追加する
~~~~~
* activity_main.xml から ViewPagerを追加する
　⇒ id を「pager」にする
~~~~~

３）FragmentPagerAdapterを実装する
　=> 以下「PagerAdapter.kt」を参照

４）２）のActivityを実装する
　=> 以下「MainActivity.kt」を参照

QuestionFragment.kt

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

class QuestionFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_question, container, false)
    }
}

AnswerFragment.kt

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

class AnswerFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_answer, container, false)
    }
}

PagerAdapter.kt

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentPagerAdapter

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

    init {
        getItem(0)
    }

    override fun getItem(position: Int): Fragment? {
        return fragments[position]
    }

    override fun getCount(): Int {
        return fragments.size
    }
}

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.FragmentManager
import androidx.viewpager.widget.ViewPager

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // ★追加★
        val fragments = arrayListOf(QuestionFragment(), AnswerFragment())
        val fragmentManager: FragmentManager = supportFragmentManager
        val adapter = PagerAdapter(fragmentManager = fragmentManager, fragments = fragments)
        val pager = this.findViewById<ViewPager>(R.id.pager)
        pager.adapter = adapter
    }
}

例２：例１の別解

MainActivity.kt (「viewPage」を追加)

import android.os.Bundle
import android.support.design.widget.Snackbar
import android.support.v4.view.ViewPager
import android.support.v7.app.AppCompatActivity

import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.content_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar)

        this.initializeViewPager(viewPager)
    }

    private fun initializeViewPager(pager: ViewPager?) {
        val adapter = SampleAdapter(this.supportFragmentManager)

        val fragment1 = BlankFragment.newInstance("This is a First Fragment!")
        adapter.addFragment(fragment1, "TAB 1")

        val fragment2 = BlankFragment.newInstance("This is a Second Fragment!!")
        adapter.addFragment(fragment2, "TAB 2")

        val fragment3 = BlankFragment.newInstance("This is a Third Fragment!!!")
        adapter.addFragment(fragment3, "TAB 3")

        pager?.adapter = adapter
    }
}

SampleAdapter.kt (アダプターが必要なので、Kotlin のクラスを追加)

import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentPagerAdapter

class SampleAdapter (manager: FragmentManager) : FragmentPagerAdapter(manager) {
    private val fragments = ArrayList<Fragment>()
    private val titles = ArrayList<String>()
    
    override fun getItem(position: Int): Fragment = fragments.get(position)

    override fun getCount(): Int = fragments.size

    override fun getPageTitle(position: Int): CharSequence? = titles.get(position)

    fun addFragment(fragment: Fragment, title: String) {
        this.fragments.add(fragment)
        this.titles.add(title)
    }
}

BlankFragment.kt

//   [app]を右クリックして、[New]-[Fragment]-[Fragment (Black)]を選択。
// 「textView」を配置。 
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import kotlinx.android.synthetic.main.fragment_blank.view.*

class BlankFragment : Fragment() {
    private var text = ""

    companion object {
        @JvmStatic
        fun newInstance(text: String): BlankFragment {
            val fragment = BlankFragment()
            val bundle = Bundle()
            bundle.putString("Text", text)
            fragment.arguments = bundle
            return fragment
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        this.text = arguments?.get("Text").toString()
    }

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

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        view.textView.setText(text)
    }
}

参考文献

https://shoheohtani.blogspot.com/2019/02/kotlin-fragment-viewpager.html
https://marketable-skill.biz/?p=860
https://qiita.com/shanonim/items/4bf31a203cc90d73aae8
https://v4all123.blogspot.com/2017/12/simple-example-of-using-viewpager-in.html

画面コンポーネント / ViewPager2 ～スワイプして画面遷移をするには～
https://dk521123.hatenablog.com/entry/2019/09/30/020307
画面コンポーネント / ListView ～入門編～
https://dk521123.hatenablog.com/entry/2013/10/10/005010
画面コンポーネント / ListView ～ Realm データを表示～
https://dk521123.hatenablog.com/entry/2018/09/02/130212

プログラムの超個人的なメモ

Memo for Programming.

【Android】画面コンポーネント / ViewPager

■ はじめに

追記：ViewPager2

■ 作成手順

■ サンプル

例１：Hello World

例２：例１の別解

参考文献

関連記事