1月30日。 2018 – 3 min read
Hello guys! この投稿では、もう 1 つのよく使われる UI パターンである「ナビゲーション ドローワ」に関して説明します。 ナビゲーション ドロワーでは、「ハンバーガー」アイコンをクリックすることにより、アプリの多くの画面や機能に移動することができます。 左からスワイプすることでも、ドロワーを表示させることができ、画面がスライドして、多くの項目が表示されます。 これらの項目をクリックすると、その画面に移動して、アプリの機能を利用することができます。 それでは、始めましょう！
Create a brand new Android Studio project and name it ‘NavigationDrawer’. 画面を一から作り上げるので、MainActivityとして「空のアクティビティ」を選択します。
32 行目のヘッダー ファイルを含む部分でエラーになる可能性があります。 心配しないでください。次のステップでヘッダー ファイルを作成し、エラーを解消します。
サポート デザイン ライブラリの一部である ‘NavigationView’ ウィジェットを使用しているので、最新の gradle 依存関係が Build にあることを確認してください。Gradle ファイル (アプリ レベル) :
compile 'com.android.support:design:X.X.X'
‘Xs’ を最新のバージョン番号に置き換えることを忘れないでください、もしわからない場合は、グーグルで検索するとよいでしょう。 以下はその方法です。
resフォルダーを右クリック→新規作成をクリック→レイアウトリソースファイルを選択します。 ファイル名を「nav_header.xml」とし、Enterキーをクリックします。 新しく作成されたレイアウト ファイルに次のコードをコピー ペーストして、ナビゲーション ドローワーのヘッダー部分を定義する
ヘッダーを作成し終わったら、ドローワーに表示する項目を格納するメニュー リソース ファイルを作成する必要があります。
res フォルダを右クリック →新規作成 →Android リソースファイル →リソースタイプのドロップダウンリストから ‘menu’ を選択します。
ファイルに ‘navigation_menu.xml’ という名前を付けて、次のコードをコピーして貼り付けます。
上のコードによって、3 つのアイテムがドロワー用に作られ、プレビュー モードでそれらを確認できます。 これらは「オーバーフロー」メニューの項目のように見えますが、このリソース ファイルはドロワー内の項目の入力に使用されます。
Find out Quick Code on various programming languages.
Step 3:
この最後のステップでは、MainActivity.java ファイルに、ナビゲーション ドロワーの動作に責任を持つ、頭脳として機能する Java コードを記述します。
Rename the package name to whatever you had chosen in the beginning, you can find the package name in the Manifest.xml file.
14-16 行では、ナビゲーション ドロワーに必要なインスタンス変数を宣言し、後で onCreate() 関数の中の findViewById メソッドを使用してそれらを見つけます。 次に、ナビゲーションビューである変数 ‘nv’ に ‘setNavigationItemSelectedListener’ を追加し、ドロワーから特定のアイテムを選択する際のクリックイベントをリスンするようにしています。 onNavigationItemSelected’ メソッド内のコードは、単にトースト・メッセージを表示しています。
最後に、メニューリソースファイルで指定されたアイテムに正しく応答するための ‘onOptionsItemSelected()’ メソッドをオーバーライドします。 簡潔にするために、多くの細かい点を省略しています;)
すべてのステップを正しく実行した場合、次のようなものになります。 これで完全に機能するナビゲーションドロワーが完成しました！おめでとうございます。
皆様がこれを楽しんで、「拍手」ボタンを押して、このようなものをさらに書くように励んでいただければ幸いです。 いつものように、ハッピーコーディング:D
。