Navigation Drawer Views Activityへのメニューを追加

## はじめに
作りたいアプリがあり、メニュー付きのアプリを作りましたが、よく構成が分からないため、メモをしておきます。
初めてAndroid Studioを使うので、玄人向けはありません。


## 開発環境
Windows 11 Pro
Android Studio Flamingo | 2022.2.1 Patch 2

## 新規プロジェクト
今回使用するテンプレートは「Navigation Drawer Views Activity」です。
これ以外を使用した場合、どうなるかわかっておりません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/b4ca99f8-7477-b084-6d30-093cbb573acb.png)

## そのままRun
テンプレートがそのまま実行できるってとても良いですね。
ここからちょいちょい変えてRun、失敗したら戻して原因を調査することができるので、ちゃんと知識が無くてもなんとなく慣れることが出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/d0ac717a-99e5-2324-a459-8318486367bb.png)


## メニューの現在
キャプチャは追加済みですが、Pickupを増やしてます。
このPickupの増やし方を解説します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/e5a5eb2b-706e-4a3a-821f-783c1020dea9.png)


## メニュー関連のプロジェクト
・javaフォルダ配下のuiフォルダに画面に対してのプログラム(.kt)があります。
・resフォルダ配下にメニューのlayoutのファイル(.xml)があります。
・resフォルダ配下に文字列を管理するstring.xmlがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/a731f9f9-beca-698e-988e-d65778114954.png)

これらを色々やって、メニューを追加します。

## uiパッケージの作成、コピー

私は、pickupパッケージを作成しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/7bd296ac-94d1-6570-0e4f-8a2475afd64d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/bdc06dc3-dc4b-c808-2c43-4a341c68ac97.png)

作成したら、Homeパッケージ内のファイルを２つ一緒にコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/b3000db6-133f-817c-c101-a8bfb20281b9.png)

作成したパッケージに貼り付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/e47a437c-11a3-5388-6450-2283ead744a0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/4a11dd58-544f-bd0d-a515-32dbb2f8de38.png)

ファイル名を変更したいのですが、何故か右クリックメニューにないので、一度開いてから、タブを右クリックしてファイル名の変更を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/f22ea245-a923-8ea1-e141-bca89da473b4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/c6af2897-6d2e-365d-cd80-c1cb960d2b63.png)

HomeFragment.kt　→　PickupFragment.kt
修正できたらリファクタリングで、OK

同じようにもう一つのファイルも修正
HomeViewModel.kt　→　PickupViewModel.kt

次に中身のコードも、Home→Pickupへ変えていきます。

#### 変更点は、 [[Home→Pickup]]

```HomeFragment.kt
package jp.co.zos.mirrordance.ui.pickup

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.lifecycle.ViewModelProvider
import jp.co.zos.mirrordance.databinding.Fragment[[Home→Pickup]]Binding

class [[Home→Pickup]]Fragment : Fragment() {

    private var _binding: Fragment[[Home→Pickup]]Binding? = null

    // This property is only valid between onCreateView and
    // onDestroyView.
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val [[home→pickup]]ViewModel =
            ViewModelProvider(this)[[[Home→Pickup]]ViewModel::class.java]

        _binding = Fragment[[Home→Pickup]]Binding.inflate(inflater, container, false)
        val root: View = binding.root

        val textView: TextView = binding.text[[Home→Pickup]]
        [[home→pickup]]ViewModel.text.observe(viewLifecycleOwner) {
            textView.text = it
        }
        return root
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}
```


```PickupViewModel.kt
package jp.co.zos.mirrordance.ui.pickup

import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel

class [[Home→Pickup]]ViewModel : ViewModel() {

    private val _text = MutableLiveData<String>().apply {
        value = "This is [[home→Pickup]] Fragment"
    }
    val text: LiveData<String> = _text

}

```


## string.xml　の修正
文字列の表示を　"@string/xxx"　という形で置き換えることが出来ます。
定数みたいな形で文字列を管理している　string.xml　に追加をします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/387681fe-9cfd-e3cc-ead0-ab7b011a3c26.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/63753e6c-d45e-357f-08d8-941a2fc47911.png)

ここに、menu_pickup を追加します。

```xml:string.xml
<resources>
    <string name="app_name">MirrorDance</string>
    <string name="navigation_drawer_open">Open navigation drawer</string>
    <string name="navigation_drawer_close">Close navigation drawer</string>
    <string name="nav_header_title">Android Studio</string>
    <string name="nav_header_subtitle">android.studio@android.com</string>
    <string name="nav_header_desc">Navigation header</string>
    <string name="action_settings">Settings</string>

    <string name="menu_home">Home</string>
    <string name="menu_gallery">Gallery</string>
    <string name="menu_slideshow">Slideshow</string>
    <string name="menu_pickup">Pickup</string>
</resources>
```


## 最後にメニューに追加していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/31376d23-7084-94c7-ca99-ed05fc19d902.png)


このファイルにメニューを追加してきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/1e23a464-ee0f-be83-97ce-9c3bfeb97df6.png)

「android:id="@+id/nav_pickup"」を追加

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

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_menu_camera"
            android:title="@string/menu_home" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="@string/menu_gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="@string/menu_slideshow" />
        <item
            android:id="@+id/nav_[[home→pickup]]"
            android:icon="@drawable/[[ic_menu_camera→baseline_build_24]]"
            android:title="@string/menu_[[home→pickup]]" />
    </group>
</menu>
```

> android:icon="@drawable/baseline_build_24"

アイコンは、公式マニュアルから追加方法があるので、参考にして反映してください。
https://developer.android.com/studio/write/vector-asset-studio?hl=ja#running

インポートしたアイコンが 　drawable　に追加されるので、参照先を変更すればOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/3b0aab33-0712-c398-f82e-87c4ad7c23e8.png)

## 修正前後

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/e5a5eb2b-706e-4a3a-821f-783c1020dea9.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249830/c5ccc80c-acef-5bcf-a12a-7449dc501c6f.png)



## 感想
メニューを追加するだけでも思ったより設定が必要でしたが、テンプレートがあるだけでかなり楽。
これからUIを色々いじっていくので、最終的に慣れれば大丈夫かなと。