【Android/Kotlin】いまさら聞けない?NavigationDrawerのメニューをカスタマイズする方法

今回は、ハンバーガーメニューを左上に表示、タップすることでメニューが表示されるアプリを作っていきます。

Material Designとして定義されて4、5年立つので、ほとんどのアプリで採用されているものですね〜

例えば、メルカリ

Android端末を利用している人で、使ったことがない人はいないでしょう。

使うのはNavigationDrawerになります。

AndroidStudioで、アクティビティ作成時のGalleryの1つにあるもあり、作ること自体は難しいものではありません。

ただ、Galleryで作ったものですとカスタマイズがイマイチなので、メニュー自体を自作する方法を紹介していきます。

AndroidStudioのGalleryでベースのアプリを作る

まずは、ベースのアプリを作ります。

そちらをカスタマイズしていく流れで説明をしていきます。

GalleryからのActivity作成

AndroidStudioにてappを選択後、New → Activity → Galleryを選択してください。

こちらのダイアログが表示されますので、Navigation Drawer Activityを選択してください。

動くところまで実装されていますので、そのままアプリを実行してみてください。

メニューの表示と動作が見れると思います。

ここまで作ってくれるなんて…、簡単に作れるようになったものですw

メニュー表示のレイアウト

メニューは NavigationView を利用して表示されています。

この記述だけで、左側のメニューが表示されることになります。

app:headerLayoutという指定あがあると思いますが、こちらがメニュー上部のヘッダのレイアウトになります。

先程のスクショでいいうと、ドロイド君の顔と名称、アドレスが表示されている部分です。

nav_header_main.xmlというレイアウトファイルが作成されていますので、詳細はそちらで確認してみてください。

また、一番下に app:menu があります。

この設定にてメニュー用の定義ファイルを読み込み、メニューを表示しています。

そのメニューファイルはこちら

何となく分かると思いますが、group、item、menuがあり、こちらを設定することで表示内容がきまります。

<group>はメニューのグループ化をするものですね。囲むと最後のメニューの下に下線が表示されます。

<item> <menu> <item>の入れ子にすると、タイトルを付けることができます。

こちらがデフォルトで作成されているものの説明になります。

App:menuでの対応も簡単に、かつきれいに出力されるのでOKとも言えますが、カスタマイズ性に欠けるので、こちらをベースにカスタマイズしていきます。

自作レイアウトでメニュー表示

今回、実装していくのは、こちらの通り。

  • メニューリストを表示
  • メニューの下に固定画像を表示
  • メニューがタップされた場合、画面のメッセージを変更

難しいことをするのではなく、レイアウトを自分で作って対応していくイメージです。

自作したレイアウトファイルでメニューを表示する

ベースアプリでは、menuファイルの読み込みをしていたところを、自作したLayoutにて対応するように変更していきます。

メニューリストの表示をRecycleyViewを使って実装していきます。

RecyclerViewとはなんぞや?という方は、こちらを参照ください。

【Android開発】KotlinでRecyclerViewとCardViewを使ってリストを表示させる方法(3)

レイアウトの修正

まずは、RecyclerViewを追加したレイアウトです。メニュー下部に画像(ImageView)の追加もしています。

このようなイメージになります。

Cardview(リスト1行分の表示)の設定です。

メニューのところなので、アイコンとタイトルを追加しています。

こんなイメージですね。

リスト表示(Adapter/ViewHolder/Activity)

RecyclerViewを使う場合は、adapterとViewHolderを作り、それらを使ってレイアウトを表示する部分をActivityに追加していきます。

まずは1行分のデータ(メニューのアイコンとタイトル)を保持クラスを作成します。

なんで?って思うかもしれませんが、データを受け渡しなどで便利になるためですね。

次にAdapterです。

1点補足ですが、RecyclerViewのタップを検知するためには、ViewHolderにリスナ登録が必要です。

RecyclerViewにはListViewにあるsetOnClickListenerが用意されておらず、ViewHolderクラスにて実装する必要があるためです。

ViewHolderにリスナを登録しているところと、

リスナ内で呼び出しているメソット定義しています。

続いて、ViewHolderになります。

最後にActivityの実装です。

処理の流れを補足していきます。

1.データ作成

メニューに表示するためのデータを作成しています。今回は12個分のメニューデータを生成しています。

2.Adapterの作成

Adapterの作成を行います。1で作ったデータを引数としてい渡しています。

3.リスナ登録とタップ後の処理を追加

前述のようにリスナ登録はViewHolederにて実装しています。

Activityでは、その検知後の処理は記述していきます。

あくまでAdapterはリストのデータとその表示が責任範囲と考えるべきで、画面制御周りの動きはActivityで対応していくべき、という判断のためです。

今回はメニューの表示順を固定してあるので、引数のpositionで分岐させて、表示するメッセージを決めています。

4.メニューのクローズ

最後にメニューをクローズする処理です。

以上がNavigationVewのカスタマイズ方法でした。

メニューを作っているというよりは、RecyclerViewの実装をしていた、という感じじゃないでしょうか?

Galleryから作ってみるとある程度動くものが出来上がるので、それが正解のように見える部分もあります。

簡易な方法で対応しているところも多いので、そこを自作したものに置き換えていくイメージがついていれば、特段難しいものではありません。

つまり、レイアウトを自作していくイメージがついてるかどうか、が肝ですね。

それさえあれば、変更していく方法も見出していくことができると思います。

イメージが付いたら、ガシガシとカスタマイズしてみてください!