[Kotlin][Android]BottomNavigationViewとViewPagerを用いたタブ遷移の実装

import android.os.Bundle
import android.support.design.widget.BottomNavigationView
import android.support.v4.view.ViewPager
import android.support.v7.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity(), ViewPager.OnPageChangeListener {

    private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_home -> {
                viewPager.currentItem = 0
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_dashboard -> {
                viewPager.currentItem = 1
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_notifications -> {
                viewPager.currentItem = 2
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }

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

        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)

        viewPager.addOnPageChangeListener(this)

        val tabAdapter = TabAdapter(supportFragmentManager, this)

        viewPager.adapter = tabAdapter
        
    }

    override fun onPageScrolled(p0: Int, p1: Float, p2: Int) {}

    override fun onPageSelected(p0: Int) {

        when(p0) {
            0 -> navigation.menu.getItem(0).isChecked = true
            1 -> navigation.menu.getItem(1).isChecked = true
            2 -> navigation.menu.getItem(2).isChecked = true
        }

    }

    override fun onPageScrollStateChanged(p0: Int) {}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

import android.os.Bundle

import android.support.design.widget.BottomNavigationView

import android.support.v4.view.ViewPager

import android.support.v7.app.AppCompatActivity

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

class MainActivity : AppCompatActivity(), ViewPager.OnPageChangeListener {

private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->

when (item.itemId) {

R.id.navigation_home -> {

viewPager.currentItem = 0

return@OnNavigationItemSelectedListener true

}

R.id.navigation_dashboard -> {

viewPager.currentItem = 1

return@OnNavigationItemSelectedListener true

}

R.id.navigation_notifications -> {

viewPager.currentItem = 2

return@OnNavigationItemSelectedListener true

}

false

}

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)

viewPager.addOnPageChangeListener(this)

val tabAdapter = TabAdapter(supportFragmentManager, this)

viewPager.adapter = tabAdapter

}

override fun onPageScrolled(p0: Int, p1: Float, p2: Int) {}

override fun onPageSelected(p0: Int) {

when(p0) {

0 -> navigation.menu.getItem(0).isChecked = true

1 -> navigation.menu.getItem(1).isChecked = true

2 -> navigation.menu.getItem(2).isChecked = true

}

override fun onPageScrollStateChanged(p0: Int) {}

}

<?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:fitsSystemWindows="true"
        tools:context=".MainActivity"
        android:orientation="vertical">

    <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>

    <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="0dp"
            android:layout_marginStart="0dp"
            android:background="?android:attr/windowBackground"
            app:menu="@menu/navigation"/>

</LinearLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<?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:fitsSystemWindows="true"

tools:context=".MainActivity"

android:orientation="vertical">

<android.support.v4.view.ViewPager

android:id="@+id/viewPager"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"/>

<android.support.design.widget.BottomNavigationView

android:id="@+id/navigation"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginEnd="0dp"

android:layout_marginStart="0dp"

android:background="?android:attr/windowBackground"

app:menu="@menu/navigation"/>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
            android:id="@+id/navigation_home"
            android:icon="@drawable/ic_home_black_24dp"
            android:title="@string/title_home"/>

    <item
            android:id="@+id/navigation_dashboard"
            android:icon="@drawable/ic_dashboard_black_24dp"
            android:title="@string/title_dashboard"/>

    <item
            android:id="@+id/navigation_notifications"
            android:icon="@drawable/ic_notifications_black_24dp"
            android:title="@string/title_notifications"/>

</menu>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<?xml version="1.0" encoding="utf-8"?>

<item

android:id="@+id/navigation_home"

android:icon="@drawable/ic_home_black_24dp"

android:title="@string/title_home"/>

<item

android:id="@+id/navigation_dashboard"

android:icon="@drawable/ic_dashboard_black_24dp"

android:title="@string/title_dashboard"/>

<item

android:id="@+id/navigation_notifications"

android:icon="@drawable/ic_notifications_black_24dp"

android:title="@string/title_notifications"/>

</menu>

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

class FirstFragment : Fragment() {

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

import android.os.Bundle

import android.support.v4.app.Fragment

import android.view.LayoutInflater

import android.view.View

import android.view.ViewGroup

class FirstFragment : Fragment() {

override fun onCreateView(

inflater: LayoutInflater, container: ViewGroup?,

savedInstanceState: Bundle?

): View? {

return inflater.inflate(R.layout.fragment_first, container, false)

}

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".FirstFragment">

    <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="First Fragment"/>

</FrameLayout>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout 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=".FirstFragment">

<TextView

android:id="@+id/textView"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:text="First Fragment"/>

</FrameLayout>

import android.content.Context
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentStatePagerAdapter

class TabAdapter(fm: FragmentManager, context: Context) : FragmentStatePagerAdapter(fm) {

    override fun getItem(p0: Int): Fragment {

        return when(p0) {
            0 -> FirstFragment()
            1 -> SecondFragment()
            2 -> ThirdFragment()
            else -> FirstFragment()
        }

    }

    override fun getCount(): Int {
        return 3
    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

import android.content.Context

import android.support.v4.app.Fragment

import android.support.v4.app.FragmentManager

import android.support.v4.app.FragmentStatePagerAdapter

class TabAdapter(fm: FragmentManager, context: Context) : FragmentStatePagerAdapter(fm) {

override fun getItem(p0: Int): Fragment {

return when(p0) {

0 -> FirstFragment()

1 -> SecondFragment()

2 -> ThirdFragment()

else -> FirstFragment()

}

override fun getCount(): Int {

return 3

}

[Kotlin][Android]BottomNavigationViewとViewPagerを用いたタブ遷移の実装

はじめに

コード

MainActivity.kt

activity_main.xml

navigation.xml

FirstFragment.kt

fragment_first.xml

TabAdapter.kt