はじめに
AndroidのKotlinにおけるBottomNavigationViewとViewPagerを使ったタブ遷移の実装方法です。下のイメージを見てもらったほうがわかりやすいと思いますが、タブでの画面切り替えとフリックによるタブ切り替えができるようになっています。
コード
まずはメインのアクティビティです。
MainActivity.kt
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) {} } |
activity_main.xml
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> |
navigation.xml
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"?> <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> |
FirstFragment.kt
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) } } |
同じものをSecondFragment.kt、ThirdFragment.ktとして作成します。
fragment_first.xml
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> |
こちらも同様にfragment_second.xml、fragment_third.xmlとして作成します。