思ったより難しくありませんでした。
画面を右にスワイプすると、画面左側からメニューがでるアプリがあるが、これはDrawerLayoutを利用すると簡単に実現できる。
まずはメインアクティビティのレイアウトをみてみよう。
android.support.v4.widget.DrawerLayoutで囲むだけで横スワイプによるメニューを表示することができる。このタグの直下には二つのViewを設置する。最初(上部)のViewがコンテンツとして画面に表示され、最後(下部)のViewが横スワイプ時に表示されるメニューとして表示される。
今回は上部にConstraintLayoutを設置し、下部にNavigationViewを設置してある。従って通常表示時にはConstraintLayoutが表示され、横スワイプ時にNavigationViewの内容が表示される。もちろんConstraintLayoutには他のUI部品を入れ子にできるので、様々なレイアウトをすることができる。また横スワイプで表示されるメニューはNavigationViewでなくてもよく、ConstraintLayoutなどでもいいので、こちらもやろうと思えば自由にメニューを表示させることができる。
ここで重要なのがメニュー表示されるUI部品にはgravityを設定しておくこと。これをしておかないとメニューが隠れない。
今回はツールバーにメニューを表示させるためのボタンも表示させるため、ツールバーも設定している。
画面を右にスワイプすると、画面左側からメニューがでるアプリがあるが、これはDrawerLayoutを利用すると簡単に実現できる。
まずはメインアクティビティのレイアウトをみてみよう。
android.support.v4.widget.DrawerLayoutで囲むだけで横スワイプによるメニューを表示することができる。このタグの直下には二つのViewを設置する。最初(上部)のViewがコンテンツとして画面に表示され、最後(下部)のViewが横スワイプ時に表示されるメニューとして表示される。
今回は上部にConstraintLayoutを設置し、下部にNavigationViewを設置してある。従って通常表示時にはConstraintLayoutが表示され、横スワイプ時にNavigationViewの内容が表示される。もちろんConstraintLayoutには他のUI部品を入れ子にできるので、様々なレイアウトをすることができる。また横スワイプで表示されるメニューはNavigationViewでなくてもよく、ConstraintLayoutなどでもいいので、こちらもやろうと思えば自由にメニューを表示させることができる。
ここで重要なのがメニュー表示されるUI部品にはgravityを設定しておくこと。これをしておかないとメニューが隠れない。
今回はツールバーにメニューを表示させるためのボタンも表示させるため、ツールバーも設定している。
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/dlDrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!--コンテンツ-->
<!--最初に記述したUI部品がアクティビティに表示される-->
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!--メニューを開くボタンを表示させるためツールバーを設定する-->
<android.support.v7.widget.Toolbar
android:id="@+id/tbToolbar01"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
<TextView
android:id="@+id/tvTextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<!--ナビゲーション-->
<!--後に記述されたUI部品がメニューとして表示される-->
<!--gravityの設定をしないとメニューが隠れないので注意が必要-->
<android.support.design.widget.NavigationView
android:id="@+id/nvNavView01"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>
このレイアウトを設定する前に、NavigationViewに表示されるメニューのレイアウトを作成しておく。今回はシンプルにitemを二つだけ表示させている。ファイル名はnav_menu.xmlとしてリソースフォルダのmenuフォルダに保存している。
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/itmItem01"
android:title="Item" />
<item
android:id="@+id/itmItem02"
android:title="Item" />
</menu>
さらにToolbarを自前で実装するので、テーマをNoActionBarのものにしておく。
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.to.testnavdrawerapplication">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.AppCompat.NoActionBar">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
あとぱメニューのアイテムをクリックしたときにコールバックさせる処理と、ツールバーにボタンを表示してメニューを開くように記述をする。
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//ツーバーを登録
setSupportActionBar(tbToolbar01)
//トグルボタンに関する設定を行う
//引数は最初から表示するアクティビティ、DrawerLayout、ツールバー、メニューを開くときの文字、メニューを閉じるときの文字
//文字というのはアクセサビリティで機能の読み上げ時にTextToSpeechなどで利用されるようだ
var actionBarDrawerToggle = ActionBarDrawerToggle(this, dlDrawerLayout, tbToolbar01, R.string.open, R.string.clode)
//リスナー登録して実行させるとボタンが表示される
dlDrawerLayout.addDrawerListener(actionBarDrawerToggle)
actionBarDrawerToggle.syncState();
//ナビゲーションイベント用コールバック
//ナビゲーションメニューを表示させてitemをクリックすると実行される
nvNavView01.setNavigationItemSelectedListener {
when (it.itemId) {
R.id.itmItem01 -> {
tvTextView01.text = "item01"
}
R.id.itmItem02 -> {
tvTextView01.text = "item02"
}
else -> {
}
}
//メニューを閉じる
dlDrawerLayout.closeDrawer(Gravity.START, true)
true
}
}
}