kotlinでandroid入門 タブ(TabLayout)

Activityで画面を切り替えていましたが
タグでページの切り替え

こんなの

build.gradle (app)

build.gradle

    dependencies {
        implementation 'com.android.support:design:27.1.1'
    }

TabLayout のためにライブラリを追加

xml ：画面のレイアウト

tab_item.xml

タブ用のレイアウト
画像(teb_item_image)とタブ名(teb_item_text)を表示させるもの

tab_item.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/teb_item_image"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="0.6"
        android:scaleType="fitCenter"
        android:src="@mipmap/ic_launcher"
        app:srcCompat="@mipmap/ic_launcher"/>
    <TextView
        android:id="@+id/teb_item_text"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="0.4"
        android:gravity="center"/>
</LinearLayout>

fragment_page.xml

ページ番号を表示するだけのfragment

fragment_page.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Page"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

activity_main.xml

メインの画面にタブとページを配置

activity_main.xml

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tabs" />
    </RelativeLayout>
</android.support.constraint.ConstraintLayout>

kt : コード

PageFragment.kt

選択された時の表示用Fragment　番号を表示するだけ

PageFragment.kt

class PageFragment : Fragment() {
    //呼び出しもとのアクティビティのインスタンス
    private var mListener : OnFragmentInteractionListener? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
    //
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val page = arguments!!.getInt(PAGE, 0)
        // fragment_pageを複製しtextへページを表示
        val view = inflater.inflate(R.layout.fragment_page, container, false)
        view.findViewById<TextView>(R.id.textView).text = page.toString()
        return view
    }
    // 親アクティビティとの紐づけ発生イベント
    override fun onAttach(context: Context?) {
        super.onAttach(context)
        if (context is OnFragmentInteractionListener) {
            mListener = context
        } else {
            throw RuntimeException()
        }
    }
    override fun onDetach() {
        super.onDetach()
        mListener = null
    }
    internal interface OnFragmentInteractionListener {
        fun onFragmentInteraction(uri: Uri)
    }
    companion object {
        private val PAGE = "PAGE"
        // PageFragment生成
        fun newInstance(page: Int): PageFragment {
            val pageFragment = PageFragment()
            val bundle = Bundle()
            bundle.putInt(PAGE, page)
            pageFragment.arguments = bundle
            return pageFragment
        }
    }
}

TagAdapter.kt

タブのアダプター

TagAdapter.kt

class TagAdapter(fm: FragmentManager, private val context: Context) : FragmentStatePagerAdapter(fm) {
    private val pageTitle = arrayOf("PAGE1", "PAGE2", "PAGE3")
    //
    override fun getItem(position: Int): Fragment {
        // 要求時 新しい Fragment を生成して返す
        return PageFragment.newInstance(position + 1)
    }
    // タブの名前
    override fun getPageTitle(position: Int): CharSequence? {
        return pageTitle[position]
    }
    // タブの個数
    override fun getCount(): Int {
        return pageTitle.size
    }
    // タブの変更
    fun getTabView(tabLayout: TabLayout, position: Int): View {
        // tab_item.xml を複数
        val view = LayoutInflater.from(this.context).inflate(R.layout.tab_item, tabLayout, false)
        // タイトル
        val tab = view.findViewById<TextView>(R.id.teb_item_text)
        tab.text = pageTitle[position]
        // アイコン
        val image = view.findViewById<ImageView>(R.id.teb_item_image)
        image.setImageResource(R.mipmap.ic_launcher)
        return view
    }
}

MainActivity.kt

MainActivity.kt

class MainActivity : AppCompatActivity(), ViewPager.OnPageChangeListener, PageFragment.OnFragmentInteractionListener {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // 割り込み
        pager.addOnPageChangeListener(this)
        setTabLayout()
    }
    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {}
    override fun onPageSelected(position: Int) {}
    override fun onPageScrollStateChanged(state: Int) {}
    // Fragmentからのコールバックメソッド
    override fun onFragmentInteraction(uri: Uri) {
        // 今はなにもしてません
    }
    // タブの設定
    private fun setTabLayout() {
        val adapter = TagAdapter(supportFragmentManager, this)
        pager.adapter = adapter
        tabs.setupWithViewPager(pager)
        for (i in 0 until adapter.count) {
            val tab: TabLayout.Tab = tabs.getTabAt(i)!!
            tab.customView = adapter.getTabView(tabs, i)
        }
    }
}

TabLayout,ViewPagerとFragmentを関連させてます
一応コールバックも用意してます

コードはgitに置いてあります