2013年11月18日月曜日

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

今回は、ActionBarのドロップダウンナビゲーションを選択した際に、
Fragmentを切り替えて表示を試したいと思います(ΦωΦ)フフフ…

基本的には、選択時のonNavigationItemSelectedを検知して、
その中でFragmentを生成する形になります。ワッショイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワッショイ

■AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.actionbar4"
    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.actionbar4.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>
■activity_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/framelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</FrameLayout>

■TabOneFragment.java
package com.example.actionbar4;

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 TabOneFragment extends Fragment {

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

  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.java
package com.example.actionbar4;

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.java
package com.example.actionbar4;

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.actionbar4;

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
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.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.view.Menu;
import android.widget.ArrayAdapter;

public class MainActivity extends ActionBarActivity {

 private static ArrayList<Fragment> mTabFragments = new ArrayList<Fragment>();
 // ドロップダウンナビゲーションの項目
 private static String[] item = { "Item 1", "Item 2", "Item 3" };

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  // ActionBar を取得する
  ActionBar ab = getSupportActionBar();

  // ドロップダウンナビゲーションに表示するアダプタを登録
  ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
    android.R.layout.simple_list_item_1, item);

  MainTabListener listener = new MainTabListener(this);

  // ナビゲーションのリストとコールバックを登録する
  ab.setListNavigationCallbacks(adapter, listener);

  // リストモードに設定
  ab.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);

  // アプリタイトルを非表示にする
  ab.setDisplayShowTitleEnabled(false);
  
  // タブに対するフラグメントインスタンスを生成
  mTabFragments.add(TabOneFragment.newInstance("1"));
  mTabFragments.add(TabSecondFragment.newInstance("2"));
  mTabFragments.add(TabThirdFragment.newInstance("3"));

 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }

 /*
  * ActionBarのタブリスナー
  */
 public static class MainTabListener implements
   ActionBar.OnNavigationListener {

  private final Activity activity;
  private FragmentManager mFragmentManager;

  public MainTabListener(Activity activity) {
   this.activity = activity;

   // Fragmentを管理するFragmentManagerを取得
   mFragmentManager = ((FragmentActivity) activity)
     .getSupportFragmentManager();
  }

  @Override
  public boolean onNavigationItemSelected(int itemPosition, long itemId) {
   // TODO Auto-generated method stub
   Log.d("ActionBar",
     "OnNavigationListener " + String.valueOf(itemPosition)
       + " : " + String.valueOf(itemId));

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

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

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

   return true;

  }
 }

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


以上です(`・ω・´)ゞビシッ!!

参考URL

0 件のコメント:

コメントを投稿