【Kotlin】EmptyActivityからサイドメニューを作成してみる

~追記(2018.11.25)~
新しい記事を書きました。
こちらのほうがサイドメニューの作成に関してわかりやすいと思います。
mtryo1021.hatenablog.com

はじめに

サイドメニューを作る機会があったので自分用のメモがてら書きます。
サイドメニュー自体はActivityを追加する段階でDrawerNavigationActivityから作成することができますが、今回はEmptyActivityから実装する方法です。
参考文献は一番下に書いておきます。

レイアウトの追加

サイドメニューにはいくつかレイアウトを作成する必要があるので作成します。
まず、サイドメニューの主となるレイアウトです。
layout>New>Layout resource fileからapp_bar_drawer.xmlを作成します。
親のタグをCoordinatorLayoutにすることに注意してください。

app_bar_drawer.xml

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#3366cc">
        </android.support.v7.widget.Toolbar>


    </android.support.design.widget.AppBarLayout>

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Message"
        android:textColor="@android:color/darker_gray"
        android:textSize="24dp"/>

</android.support.design.widget.CoordinatorLayout>

つぎに、ヘッダーのデザインをdrawer_header.xmlを作成します。

drawer_header.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@color/colorPrimary"
    android:padding="20dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:textSize="24dp"
        android:textColor="@android:color/white"
        android:text="SideMenu Header"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:textSize="24dp"
        android:textColor="@android:color/white"
        android:text="Mt.Ryo"/>

</LinearLayout>

サイドメニューの要素となる部分はMenuに追加します。
res下にmenuフォルダがない場合は作成後menu_drawer.xmlを作成します。

menu_drawer.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group>
        <item
            android:id="@+id/item1"
            android:title="Item1"/>
        <item
            android:id="@+id/item2"
            android:title="Item2"/>
        <item
            android:id="@+id/item3"
            android:title="Item3"/>
    </group>
</menu>

これまで作成したレイアウトをactivity_main.xmlに追加していきます。
親タグをDrawerLayoutにするのに注意してください。

activity_main.xml

<android.support.v4.widget.DrawerLayout 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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <include
        layout="@layout/app_bar_drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/menu_drawer"/>

</android.support.v4.widget.DrawerLayout>

strings.xmlの編集

サイドメニューを開閉するためにstrings.xmlを編集します。
書きを内に追加します。

strings.xml

<string name="nav_open">Open Navigation Drawer</string>
<string name="nav_close">Close Navigation Drawer</string>

サイドメニューを適用する

MainActivity.ktにサイドメニューの適用するための初期化関数を追加します。

MainActivity.kt

private fun init(){
        val toggle = ActionBarDrawerToggle(Activity(), drawer_layout, toolbar, R.string.nav_open, R.string.nav_close)
        drawer_layout.addDrawerListener(toggle)
        toggle.syncState()
        navigation_view.setNavigationItemSelectedListener(this)
}

サイドメニューのアイテムのリスナーを追加します。
MainActivity Classの継承にNavigationView.OnNavigationItemSelectedListenerを追加してリスナーをオーバーライドします。
リスナー内のwhen文を変えることでそれぞれの動きを書くことができます。

MainActivity.kt

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {

    override fun onCreate(savedInstanceState: Bundle?) {
    ....

    override fun onNavigationItemSelected(item: MenuItem): Boolean {
            when(item.itemId){
                item1->{
                    message.text = item.title
                }
                item2->{
                    message.text = item.title
                }
               item3->{
                    message.text = item.title
                }
                else->{

                }
            }
            drawer_layout.closeDrawer(GravityCompat.START)
            return true
    }
}

サイドメニューを許可する

このままだとBuildで
This Activity already has an action bar supplied by the window decor.
といわれエラーを吐かれてしまいます。

なので、解決します。
res/value/styles.xmlから編集します。

styles.xml

<style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
</style>

AndroidManifest.xmlを編集します。
themeの部分を先ほど作成したNoActionBarにします。

AndroidManifest.xml

<activity android:name=".MainActivity"
    android:theme="@style/AppTheme.NoActionBar">
</activity>

おわりに

完成！
ではでは...

Mt.Log

編入、編入後の勉強