2013年11月18日月曜日

ActionBarを使ってみる(ナビゲーションドロワー Android 2.2以上)

今回は、ActionBarのナビゲーションドロワーを試したいと思います( ´∀`)bグッ!

スマートフォンのサイトでも見かける、
横からニョキって出てくるやつですね(゚д゚)(。_。)(゚д゚)(。_。) ウンウン

ナビゲーションドロワーを利用する場合には、
アクションバーのアイコンボタンを三本線にするのがガイドラインとのことです(´・∀・`)ヘー

それようの画像は提供されているのでこちらから落としてきて利用したいと思います( ̄ー ̄)ニヤリ
Android_Navigation_Drawer_Icon_20130516.zip
ダウンロードが完了したら解凍すると、
「holo-dark」、「」のディレクトリがあるので、どちらかの中身の
「drawable-hdpi」、「drawable-mdpi」、「drawable-xhdpi」に
そのまま上書きしますド━━━━m9(゚∀゚)━━━━ン!!

■AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.actionbar5"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.actionbar5.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

■res/values/styles.xml
<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>

</resources>
■res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">ActionBar5</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="open">開く</string>
    <string name="close">閉じる</string>
</resources>
■activity_main.xml

注意点として次の項目があるそうです。
Android : Navigation Drawer を使う
・DrawerLayout をルートビューとし、その中にメインのコンンテンツを表示するビューと、NavigationDrawer として利用するビューを入れる。

DrawerLayout を利用するうえでいくつか注意点がある
・メインのコンテンツ用のビュー(上の例だとFrameLayout)は、DrawerLayout の最初のビューでなければならない
・メインのコンテンツ用のビュー の layout_width と layout_height は match_parent にする
・NavigationDrawer 用のビュー(上の例だとListView)は、layout_gravity で horizontal gravity を指定しなければならない
・RTL言語をサポートするなら left ではなく start を使う
・NavigationDrawer 用のビューは dp 単位で幅を指定し、縦は patch_parent にする
・横幅は 320dp 以上にはしない

結構注意点がある:(;゙゚'ω゚'):
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <!-- メインコンテンツ -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
    <!-- ナビゲーションドロワー用 -->
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:background="#eee" />
 
</android.support.v4.widget.DrawerLayout>

■MainActivity.java

ナビゲーションドロワーのオープンと、クローズの設定は、
「ActionBarDrawerToggle」で行っています。
※ActionBarがあるときのみ有効?ActionBarが無い場合にはリスナーを実装させる

Android : Navigation Drawer を使う
Drawer が開いたり閉じたりしたのを検知するには、
DrawerLayout の setDrawerListener() を使って DrawerLayout.DrawerListener をセットする。
Drawer の開閉時にはそれぞれリスナーの onDrawerOpened() と onDrawerClosed() が呼ばれる。

アプリに ActionBar があるなら、DrawerLayout.DrawerListener よりもそれを implements した ActionBarDrawerToggle が便利。

アプリアイコンでオープン・クローズする

ActionBar のアプリアイコンをタッチして Navigation Drawer を開閉させるには ActionBarDrawerToggle を使えば簡単にできる。

package com.example.actionbar5;

import android.content.res.Configuration;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends ActionBarActivity {

 private DrawerLayout mDrawerLayout;
 private ListView mDrawerList;
 private ActionBarDrawerToggle mDrawerToggle;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  setContentView(R.layout.activity_main);

  ActionBar ab = getSupportActionBar();

  // アプリアイコンのクリックを有効化
  ab.setDisplayHomeAsUpEnabled(true);
  ab.setHomeButtonEnabled(true);

  // ナビゲーションドロワーの一覧を生成
  String[] list = { "Mercury", "Venus", "Earth", "Mars" };

  // DrawerLayout
  mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
  mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,
    GravityCompat.START);

  /*
   * ActionBarDrawerToggle 
   * 第1:Drawerを持っている Activity 
   * 第2:DrawerLayout
   * 第3:アイコン(UPアイコンの代わりに表示される)の drawable リソースID
   * 第4:開くというアクションの説明(アクセシビリティ用)の string リソースID
   * 第5:閉じるというアクションの説明(アクセシビリティ用)の string リソースID
   */
  // ナビゲーションドロワーの開く/閉じるトグルボタン
  mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
    R.drawable.ic_drawer, R.string.open, R.string.close) {
   /*
    * ナビゲーションドロワーが閉じた時
    * 
    * @see
    * android.support.v4.app.ActionBarDrawerToggle#onDrawerClosed(android
    * .view.View)
    */
   @Override
   public void onDrawerClosed(View drawerView) {
    Log.d("ActionBarDrawerToggle", "onDrawerClosed");
   }

   /*
    * ナビゲーションドロワーが開いた時
    * 
    * @see
    * android.support.v4.app.ActionBarDrawerToggle#onDrawerOpened(android
    * .view.View)
    */
   @Override
   public void onDrawerOpened(View drawerView) {
    Log.d("ActionBarDrawerToggle", "onDrawerOpened");
   }

   /*
    * ナビゲーションドロワーがスライド中
    * 
    * @see
    * android.support.v4.app.ActionBarDrawerToggle#onDrawerSlide(android
    * .view.View, float)
    */
   @Override
   public void onDrawerSlide(View drawerView, float slideOffset) {
    // ActionBarDrawerToggleクラス内の同メソッドにてアイコンのアニメーションの処理をしている。
    // overrideするときは気を付けること。
    super.onDrawerSlide(drawerView, slideOffset);
    Log.d("ActionBarDrawerToggle", "onDrawerSlide : " + slideOffset);
   }

   /*
    * ナビゲーションドロワーの状態が変化
    * 
    * @see
    * android.support.v4.app.ActionBarDrawerToggle#onDrawerStateChanged
    * (int)
    */
   @Override
   public void onDrawerStateChanged(int newState) {
    // 表示済み、閉じ済みの状態:0
    // ドラッグ中状態:1
    // ドラッグを放した後のアニメーション中:2
    Log.d("ActionBarDrawerToggle", "onDrawerStateChanged state : "
      + newState);
   }
  };
  // ナビゲーションドロワーのリスナー設定
  mDrawerLayout.setDrawerListener(mDrawerToggle);

  // ナビゲーションドロワーを取得する
  mDrawerList = (ListView) findViewById(R.id.left_drawer);
  // アダプターを生成する
  ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
    android.R.layout.simple_list_item_1, list);
  // アダプターの設定
  mDrawerList.setAdapter(adapter);
  // クリック時の挙動を設定
  mDrawerList.setOnItemClickListener(mOnItemClickListener);
 }

 /*
  * ナビゲーションドロワーがクリックされた時の挙動
  */
 private AdapterView.OnItemClickListener mOnItemClickListener = new AdapterView.OnItemClickListener() {
  @Override
  public void onItemClick(AdapterView<?> adapterView, View view, int i,
    long l) {
   // DrawerLayoutを閉じる
   mDrawerLayout.closeDrawer(mDrawerList);

   Log.d("AdapterView.OnItemClickListener",
     "closeDrawer : " + String.valueOf(i) + " : "
       + String.valueOf(l));
  }
 };

 @Override
 protected void onPostCreate(Bundle savedInstanceState) {
  // アニメーションを実行させる
  super.onPostCreate(savedInstanceState);
  // DrawerToggleの状態を同期する
  mDrawerToggle.syncState();
 }

 @Override
 public void onConfigurationChanged(Configuration newConfig) {
  // アニメーションを実行させる
  super.onConfigurationChanged(newConfig);
  // DrawerToggleの状態を同期する
  mDrawerToggle.onConfigurationChanged(newConfig);
 }

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  // アプリアイコンのタップ時にナビゲーションドロワーのオープン・クローズの処理
  if (mDrawerToggle.onOptionsItemSelected(item)) {
   return true;
  }
  return super.onOptionsItemSelected(item);
 }

}
実行結果は次のようになります。

 スワイプまたは、アプリアイコンを押すと、ナビゲーションドロワーが表示される。
以上です(`・ω・´)ゞビシッ!!

参考URL

0 件のコメント:

コメントを投稿