19. 【Android/Kotlin】ViewPagerとTabLayout

はじめに
設定事項
アプリ起動
終わりに

はじめに

DreamHanksのMOONです。

前回はカメラで写真を撮り、その写真を画面に表示しました。

18. 【Android/Kotlin】カメラの写真を処理

今回はViewPagerとTabLayoutでタブビュー機能をしていきます。

設定事項

今回は下記の作業が必要です。

・Fragmet.ktを作成

・Fragmentに対するPageAdapterを作成

・タブのアイテムのxmlを作成

・Activityとレイアウトのxmlを作成

Fragmet.ktを作成

FragmentTab.kt

package com.example.practiceapplication

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import kotlinx.android.synthetic.main.fragment_tab.view.*


class FragmentTab : Fragment() {
    var name = ""
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {

        val view =inflater.inflate(R.layout.fragment_tab, container, false)
        view.textView.text = name

        return view
    }

}

package com.example.practiceapplication

import android.os.Bundle

import androidx.fragment.app.Fragment

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

import kotlinx.android.synthetic.main.fragment_tab.view.*

class FragmentTab : Fragment() {

var name = ""

override fun onCreateView(

inflater: LayoutInflater, container: ViewGroup?,

savedInstanceState: Bundle?

): View? {

val view =inflater.inflate(R.layout.fragment_tab, container, false)

view.textView.text = name

return view

}

Fragmentに対するPageAdapterを作成

PageAdapter.kt

package com.example.practiceapplication

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentStatePagerAdapter

class PageAdapter(fm : FragmentManager) : FragmentStatePagerAdapter(fm){
    private var fragments : ArrayList<FragmentTab> = ArrayList()

    override fun getItem(position: Int): Fragment = fragments[position]

    override fun getCount(): Int = fragments.size

    fun addItems(fragment : FragmentTab){
        fragments.add(fragment)
    }
}

package com.example.practiceapplication

import androidx.fragment.app.Fragment

import androidx.fragment.app.FragmentManager

import androidx.fragment.app.FragmentStatePagerAdapter

class PageAdapter(fm : FragmentManager) : FragmentStatePagerAdapter(fm){

private var fragments : ArrayList<FragmentTab> = ArrayList()

override fun getItem(position: Int): Fragment = fragments[position]

override fun getCount(): Int = fragments.size

fun addItems(fragment : FragmentTab){

fragments.add(fragment)

}

タブのアイテムのxmlを作成

custom_tab_button.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/tab_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:src="@android:drawable/ic_menu_call"/>

    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="10sp"
        android:text="TextView" />
</LinearLayout>

<?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"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical">

<ImageView

android:id="@+id/tab_logo"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:src="@android:drawable/ic_menu_call"/>

<TextView

android:id="@+id/tab_text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:textSize="10sp"

android:text="TextView" />

</LinearLayout>

Activityとレイアウトのxmlを作成

TabActivity.kt

package com.example.practiceapplication

import android.content.Context
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import kotlinx.android.synthetic.main.activity_tablayout.*
import kotlinx.android.synthetic.main.custom_tab_button.view.*

class TabActivity : AppCompatActivity() {
    private lateinit var mContext : Context

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

        mContext = applicationContext
        initViewPager()
    }

    private fun createView(tabName: String): View {
        var tabView = LayoutInflater.from(mContext).inflate(R.layout.custom_tab_button, null)

        tabView.tab_text.text = tabName
        when (tabName) {
            "検索" -> {
                tabView.tab_logo.setImageResource(android.R.drawable.ic_menu_search)
                return tabView
            }
            "画像" -> {
                tabView.tab_logo.setImageResource(android.R.drawable.ic_menu_camera)
                return tabView
            }
            "電話" -> {
                tabView.tab_logo.setImageResource(android.R.drawable.ic_menu_call)
                return tabView
            }
            else -> {
                return tabView
            }
        }
    }

    private fun initViewPager(){
        val searchFragment = FragmentTab()
        searchFragment.name = "検索画面"
        val cameraFragment = FragmentTab()
        cameraFragment.name = "画像画面"
        val callFragment = FragmentTab()
        callFragment.name = "電話画面"


        val adapter = PageAdapter(supportFragmentManager) // PageAdapter 生成
        adapter.addItems(searchFragment)
        adapter.addItems(cameraFragment)
        adapter.addItems(callFragment)


        main_viewPager.adapter = adapter // ViewページャーにAdapterを設定
        main_tablayout.setupWithViewPager(main_viewPager)


        main_tablayout.getTabAt(0)?.setCustomView(createView("検索"))
        main_tablayout.getTabAt(1)?.setCustomView(createView("画像"))
        main_tablayout.getTabAt(2)?.setCustomView(createView("電話"))

    }
}

package com.example.practiceapplication

import android.content.Context

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import android.view.LayoutInflater

import android.view.View

import kotlinx.android.synthetic.main.activity_tablayout.*

import kotlinx.android.synthetic.main.custom_tab_button.view.*

class TabActivity : AppCompatActivity() {

private lateinit var mContext : Context

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_tablayout)

mContext = applicationContext

initViewPager()

}

private fun createView(tabName: String): View {

var tabView = LayoutInflater.from(mContext).inflate(R.layout.custom_tab_button, null)

tabView.tab_text.text = tabName

when (tabName) {

"検索" -> {

tabView.tab_logo.setImageResource(android.R.drawable.ic_menu_search)

return tabView

}

"画像" -> {

tabView.tab_logo.setImageResource(android.R.drawable.ic_menu_camera)

return tabView

}

"電話" -> {

tabView.tab_logo.setImageResource(android.R.drawable.ic_menu_call)

return tabView

}

else -> {

return tabView

}

private fun initViewPager(){

val searchFragment = FragmentTab()

searchFragment.name = "検索画面"

val cameraFragment = FragmentTab()

cameraFragment.name = "画像画面"

val callFragment = FragmentTab()

callFragment.name = "電話画面"

val adapter = PageAdapter(supportFragmentManager) // PageAdapter 生成

adapter.addItems(searchFragment)

adapter.addItems(cameraFragment)

adapter.addItems(callFragment)

main_viewPager.adapter = adapter // ViewページャーにAdapterを設定

main_tablayout.setupWithViewPager(main_viewPager)

main_tablayout.getTabAt(0)?.setCustomView(createView("検索"))

main_tablayout.getTabAt(1)?.setCustomView(createView("画像"))

main_tablayout.getTabAt(2)?.setCustomView(createView("電話"))

}

activity_tablayout.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".TabActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/main_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabMode="fixed"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/main_viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</LinearLayout>

<?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"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context=".TabActivity">

<com.google.android.material.tabs.TabLayout

android:id="@+id/main_tablayout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:tabGravity="fill"

app:tabIndicatorColor="@color/colorPrimary"

app:tabMode="fixed"/>

<androidx.viewpager.widget.ViewPager

android:id="@+id/main_viewPager"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</LinearLayout>

アプリ起動

・タブが「検索」になった場合

終わりに

今回はViewPagerとTabLayoutでタブビュー機能を説明しました。

次回はRecyclerViewについて説明していきます。

20. 【Android/Kotlin】RecyclerView