2013年11月19日火曜日

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

今回は、前回のナビゲーションドロワーにFragmentを表示させてコンテンツの切り替えを試したと思います。
クリック時の動作に、Fragmentを生成するコードを追加しただけです(ΦωΦ)フフフ…

■AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.actionbar6"
    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.actionbar6.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">ActionBar6</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.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/frame_contents"
        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>

■TabFirstFragment.php
package com.example.actionbar6;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

public class TabFirstFragment extends Fragment {

 /*
  * フラグメントを作成するためのファクトリメソッド
  */
 public static TabFirstFragment newInstance(String title) {
  TabFirstFragment fragment = new TabFirstFragment();

  Bundle args = new Bundle();
  args.putString("title", title);
  // フラグメントに渡す値をセット
  fragment.setArguments(args);

  return fragment;
 }

 /**
  * 
  * @see android.support.v4.app.Fragment#onCreateView(android.view.LayoutInflater,
  *      android.view.ViewGroup, android.os.Bundle)
  */
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {

  // TextViewを生成する
  TextView textView = new TextView(getActivity());
  // 幅、高さの設定
  LinearLayout.LayoutParams layout = new LinearLayout.LayoutParams(
    LinearLayout.LayoutParams.MATCH_PARENT,
    LinearLayout.LayoutParams.MATCH_PARENT);
  textView.setLayoutParams(layout);
  // 文字の位置の設定
  textView.setGravity(Gravity.CENTER);
  // 文字を設定
  textView.setText(getArguments().getString("title"));
  // フォントサイズ変更
  textView.setTextSize(180.0f);

  //
  return textView;
 }
}
■TabSecondFragment.php
package com.example.actionbar6;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

public class TabSecondFragment extends Fragment {

 /*
  * フラグメントを作成するためのファクトリメソッド
  */
 public static TabSecondFragment newInstance(String title) {
  TabSecondFragment fragment = new TabSecondFragment();

  Bundle args = new Bundle();
  args.putString("title", title);
  // フラグメントに渡す値をセット
  fragment.setArguments(args);

  return fragment;
 }

 /**
  * 
  * @see android.support.v4.app.Fragment#onCreateView(android.view.LayoutInflater,
  *      android.view.ViewGroup, android.os.Bundle)
  */
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {

  // TextViewを生成する
  TextView textView = new TextView(getActivity());
  // 幅、高さの設定
  LinearLayout.LayoutParams layout = new LinearLayout.LayoutParams(
    LinearLayout.LayoutParams.MATCH_PARENT,
    LinearLayout.LayoutParams.MATCH_PARENT);
  textView.setLayoutParams(layout);
  // 文字の位置の設定
  textView.setGravity(Gravity.CENTER);
  // 文字を設定
  textView.setText(getArguments().getString("title"));
  // フォントサイズ変更
  textView.setTextSize(180.0f);

  //
  return textView;
 }

}

■TabThirdFragment.php
package com.example.actionbar6;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

public class TabThirdFragment extends Fragment {

 /*
  * フラグメントを作成するためのファクトリメソッド
  */
 public static TabThirdFragment newInstance(String title) {
  TabThirdFragment fragment = new TabThirdFragment();

  Bundle args = new Bundle();
  args.putString("title", title);
  // フラグメントに渡す値をセット
  fragment.setArguments(args);

  return fragment;
 }

 /**
  * 
  * @see android.support.v4.app.Fragment#onCreateView(android.view.LayoutInflater,
  *      android.view.ViewGroup, android.os.Bundle)
  */
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {

  // TextViewを生成する
  TextView textView = new TextView(getActivity());
  // 幅、高さの設定
  LinearLayout.LayoutParams layout = new LinearLayout.LayoutParams(
    LinearLayout.LayoutParams.MATCH_PARENT,
    LinearLayout.LayoutParams.MATCH_PARENT);
  textView.setLayoutParams(layout);
  // 文字の位置の設定
  textView.setGravity(Gravity.CENTER);
  // 文字を設定
  textView.setText(getArguments().getString("title"));
  // フォントサイズ変更
  textView.setTextSize(180.0f);

  //
  return textView;
 }

}

■MainActivity.java
package com.example.actionbar6;

import java.util.ArrayList;

import android.content.res.Configuration;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
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;

 //
 private static ArrayList<Fragment> mTabFragments = new ArrayList<Fragment>();

 // ドロップダウンナビゲーションの項目名
 private static String[] mItem = { "Item 1", "Item 2", "Item 3" };

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

  setContentView(R.layout.activity_main);

  ActionBar ab = getSupportActionBar();

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

  // 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, mItem);
  // アダプターの設定
  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));

   createMainContentsFragment(i);
  }
 };

 /*
  * クリックされた項目に合わせて、Fragmentを生成する
  */
 public void createMainContentsFragment(int i) {

  Fragment contents = null;
  String contentsName = String.valueOf(i);
  switch (i) {

  case 0:
   //
   Log.d("createMainContentsFragment", "1");
   contents = TabFirstFragment.newInstance("1");
   break;
  case 1:
   //
   Log.d("createMainContentsFragment", "2");
   contents = TabSecondFragment.newInstance("2");
   break;
  case 2:
   //
   Log.d("createMainContentsFragment", "3");
   contents = TabThirdFragment.newInstance("3");
   break;
  default:
   Log.d("createMainContentsFragment", "default");
   break;

  }

  Log.d("createMainContentsFragment", String.valueOf(contents));
  // Fragmentを管理するFragmentManagerを取得
  FragmentManager mFragmentManager = ((FragmentActivity) this)
    .getSupportFragmentManager();

  // 追加や削除などを1つの処理としてまとめるためのトランザクションクラスを取得
  FragmentTransaction ft = mFragmentManager.beginTransaction();

  // 新規フラグメントでコンテナの内容を置き換える
  // 選択位置の文字列に等しいタグをフラグメントに与える
  ft.replace(R.id.frame_contents, contents, contentsName);

  // バックスタックに登録
  ft.addToBackStack(null);

  // 変更をコミット
  ft.commit();

 }

 @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 件のコメント:

コメントを投稿