LoginSignup
2
6

More than 5 years have passed since last update.

kotlinでandroid入門 サイドメニュー : NavigationView

Posted at

前回はメニュー

今回は左に表示されるサイドメニュー : NavigationView

サイドメニュー.png
こんなやつ

表示の設定

メニューの見た目

side_header.xml を作ってメニューの見た目を
(無くてもいいみたいですが)

side_header.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary">
    <!--アイコン -->
    <ImageView
        android:id="@+id/user_icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:background="@mipmap/ic_launcher_round"
        android:contentDescription="@string/todo" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/user_icon"
        android:layout_margin="10dp"
        android:lines="2"
        android:text="@string/hoge"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:textStyle="bold" />
</RelativeLayout>

メニュー項目

res/menu/に side_menu.xml を作成

side_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_item_0"
        android:title="Item001"
        android:icon="@mipmap/ic_launcher"
        />
    <item
        android:id="@+id/navigation_item_1"
        android:title="@string/sied_menu_item1"
        android:icon="@mipmap/ic_launcher"
        />
    <item android:title="sub title">
        <menu>
            <item
                android:id="@+id/sub_item0"
                android:title="sub 0" />
            <item
                android:id="@+id/sub_item1"
                android:title="sub 1"/>
        </menu>
    </item>
    <item
        android:id="@+id/navigation_item_2"
        android:title="item 2"
        android:icon="@mipmap/ic_launcher"
        />
    <group
        android:id="@+id/group_1">
        <!--groupにidをつけると線(セパレータ)が表示 -->
        <item android:title="group1"/>
    </group>
</menu>

 サイドバーの配置

onCreate()で

  // トグル(sw) : アクションバー(サイドメニュー)の表示切替に使用
  val drawerToggle: ActionBarDrawerToggle = object : ActionBarDrawerToggle(
                this,
                main_drawerlayout,
                main_toolbar,
                R.string.drawer_open,
                R.string.drawer_close
  ) {
    override fun onDrawerClosed(mview: View) {
      super.onDrawerClosed(mview)
    }
    override fun onDrawerOpened(mview: View) {
      super.onDrawerOpened(mview)
    }
  }
  // サイドメニュー項目を動的に変更する場合
  val tmpm: Menu = side_navigation.getMenu()
  tmpm.findItem(R.id.navigation_item_0).setTitle(getString(R.string.sied_menu_item0))
  tmpm.findItem(R.id.sub_item1).setVisible(false)
  //
  drawerToggle.isDrawerIndicatorEnabled = true
  main_drawerlayout.addDrawerListener(drawerToggle)
  drawerToggle.syncState()

選択された時の処理

onOptionsItemSelectedでも処理できるが、
メニュー併用すると、ごちゃごちゃになるので、分けて処理する時用に
setNavigationItemSelectedListenerで

  side_navigation.setNavigationItemSelectedListener {
  // サンプル見ると onNavigationItemSelected() ではなく無形関数で定義してる
    when (it.itemId) {
      R.id.navigation_item_0 -> {
        val intent = Intent(this, activity_gps::class.java)
        startActivity(intent)
      }
      R.id.navigation_item_1 -> {
        val intent = Intent(this, activity_graph::class.java)
        startActivity(intent)
      }
      R.id.navigation_item_2 -> {
        tmpLowDisp("item-2")
      }
      R.id.sub_item0 -> {
        val tmpm0: Menu = side_navigation.getMenu()
        tmpm0.findItem(R.id.sub_item0).setVisible(false)
        tmpm0.findItem(R.id.sub_item1).setVisible(true)
        tmpLowDisp("Sub item-0")
      }
      R.id.sub_item1 -> {
        val tmpm1: Menu = side_navigation.getMenu()
        tmpm1.findItem(R.id.sub_item0).setVisible(true)
        tmpm1.findItem(R.id.sub_item1).setVisible(false)
        tmpLowDisp("Sub item-1")
      }
      else -> {
        tmpLowDisp(it.itemId.toString())
      }
    }
    // ナビゲーションを閉じる
    main_drawerlayout.closeDrawer(GravityCompat.START)
    // setNavigationItemSelectedListener は Boolean型
    true
  }

としてます

一応動くコードはここ
他にも色々詰め込んでみずらいですが

2
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
6