ButtonNavigationを使ってみる

最近アプリを使っていると、下の方でメニューを切り替えるヤツをよく見ます。

ドローワーあんまり使わないのかなあと思いながら調べてみるとButtonNavigationっていうのを知りました。(今更感.....)

大変なのかやってみました。

結論、まったく大変ではないですね。テンプレにあります。

プロジェクト開いてみると、シンプルな構成になっています。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        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:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <android.support.design.widget.BottomNavigationView
            android:id="@+id/nav_view"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="0dp"
            android:layout_marginStart="0dp"
            android:background="?android:attr/windowBackground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/bottom_nav_menu"/>

</android.support.constraint.ConstraintLayout>

activity_mainではBottomNavigationViewを設置しています。

メニューの詳細はmenu/bottom_nav_menuで設定されているようです。

bottom_nav_menu.xml

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

itemタグでメニューを設定しています。

今回だとこんな感じに表示されています。

ここまではレイアウトの作りです。

実際に切り替えているときにどんな処理をしているかを見ていきたいと思います。

MainActivity

class MainActivity : AppCompatActivity() {

    private lateinit var textMessage: TextView
    private val onNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_home -> {
                textMessage.setText(R.string.title_home)
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_dashboard -> {
                textMessage.setText(R.string.title_dashboard)
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_notifications -> {
                textMessage.setText(R.string.title_notifications)
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val navView: BottomNavigationView = findViewById(R.id.nav_view)

        navView.setOnNavigationItemSelectedListener(onNavigationItemSelectedListener)
    }
}

setOnNavigationItemSelectedListenerの引数にonNavigationItemSelectedListenerを設定することでメニューの切り替えができるようになります。

onNavigationItemSelectedListenerではidで判別して画面を切り替えるように設定しています。

基本的にはテンプレ通りで再現できるはずです。次回は個数を変えたり少し応用を実現したいと思います。