2013年11月2日土曜日

Fragmentを使ってみる(バックスタック)

Fragmentはバックスタックという機能を持っているそうです。

どういうものかというと、
戻るボタンを押した時に前の画面(前のFragment)に戻すことが可能になるらしいです。
戻るボタンの制御は、勝手にやってくるのかと思ってたらそうでもないのか・・・(´・ω・`)ショボーン

サンプルとして作ったものの動作は、
上部にある追加を押すと、下部のFrameLayoutにFragmentが重なって追加されていきます。
(バックスタックに溜まっていきます)
下部には追加されたFragmentには「削除」「全て削除」のボタンが配置されています。

「削除」を押すと、Fragmentを1つ前の状態に戻します。
(戻るボタンでも前の状態に戻ります。バックスタックを1つ削除。)
「全て削除」を押すと、バックスタックに溜まっているものを全て削除されます。

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

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

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.fragment7.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>
■fragment_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#eeeeee"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp" />

    <Button
        android:id="@+id/button_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

</LinearLayout>
■activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_linearlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:orientation="vertical" >
    <LinearLayout
        android:id="@+id/layout_fragment_top"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_weight="1"
        android:background="#ff0000"
        android:orientation="vertical" />
    <FrameLayout
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />
</LinearLayout>

■MainFragmentTop.java
package com.example.fragment7;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainFragmentTop extends Fragment {

 public final static String TAG = "MainFragmentTop";

 private TextView mTextView;
 private Button mButtonView;
 // コールバック
 private FragmentTopCallback mCallback;

 /*
  * コールバックのインターフェイス
  */
 public static interface FragmentTopCallback {

  public void onClick(TextView v);

 }

 /*
  * Fragmentが Activityに対して何らかのコールバックを提供する場合、
  * Activityが必要なインタフェースを備えているかどうかチェックなどを行う。
  * 
  * @see android.support.v4.app.Fragment#onAttach(android.app.Activity)
  */
 @Override
 public void onAttach(Activity activity) {
  super.onAttach(activity);
  Log.d(TAG, "FragmentTop-onAttach");

  // Activityがコールバックを実装しているかチェック
  if (activity instanceof FragmentTopCallback == false) {
   throw new ClassCastException(
     "activity が FragmentTopCallback を実装していません.");
  }
  //
  mCallback = (FragmentTopCallback) activity;
 }

 /*
  * Fragment がユーザに見える状態になるまで保持しておくべきコンポーネントの初期化。
  * 
  * @see android.support.v4.app.Fragment#onCreate(android.os.Bundle)
  */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  Log.d(TAG, "FragmentTop-onCreate");

  // fragment再生成抑止。Fragment を破棄させないようにする。
  setRetainInstance(true);

 }

 /*
  * Fragment が持つ View を構築する状態です。 View を持たない Fragment は、ここで null を返す
  * 
  * @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) {
  Log.d(TAG, "FragmentTop-onCreateView");
  // Bundleで保存されたデータを復元
  String title = getArguments().getString("title");

  //
  Log.d("onCreateView", title);

  // FragmentからActivityの取得する
  LinearLayout linearLayout = (LinearLayout) getActivity().findViewById(
    R.id.layout_linearlayout);
  //
  Log.d(TAG, "onCreateView" + String.valueOf(linearLayout));

  // 第1引数:レイアウトXMLファイルのリソースID、
  // 第2引数:
  // 第3引数:trueにするかfalseにするかで戻り値となるルートビュー(View)が変わる。
  // trueの場合には、第2引数で渡したViewGrou、falseの場合には第1引数で渡したリソースIDがルートビューになる
  View view = inflater.inflate(R.layout.fragment_main, container, false);
  // FragmentのTextViewの取得
  mTextView = (TextView) view.findViewById(R.id.text_view);
  // テキストを挿入
  mTextView.setText(title);
  // タグを設定する
  mTextView.setTag(TAG);
  
  // FragmentのImageViewの取得
  mButtonView = (Button) view.findViewById(R.id.button_view);
  //
  mButtonView.setText("追加");
  // 画像クリック時のイベントリスナー
  mButtonView.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    if (mCallback != null) {
     mCallback.onClick(mTextView);
    }
   }
  });
  //
  return view;
 }

 /*
  * TextViewの設定
  */
 public void setText(String text){
  mTextView.setText(text);
 }

}
■MainFragmentBottom.java
下部にFragmentが追加されるタイミングで、「全て削除する」ボタンも追加してあります。
package com.example.fragment7;


import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainFragmentBottom extends Fragment {

 //
 public static String TAG = "MainFragmentBottom";

 private TextView mTextView;
 private Button mButtonView;
 
 // コールバック
 private FragmentBottomCallback mCallback;

 /*
  * コールバックのインターフェイス
  */
 public static interface FragmentBottomCallback {

  public void onClick(TextView v);
  public void onClick(Button button);

 }

 /*
  * Fragmentが Activityに対して何らかのコールバックを提供する場合、
  * Activityが必要なインタフェースを備えているかどうかチェックなどを行う。
  * 
  * @see android.support.v4.app.Fragment#onAttach(android.app.Activity)
  */
 @Override
 public void onAttach(Activity activity) {
  super.onAttach(activity);
  Log.d(TAG, "FragmentBottom-onAttach");

  // Activityがコールバックを実装しているかチェック
  if (activity instanceof FragmentBottomCallback == false) {
   throw new ClassCastException(
     "activity が FragmentBottomCallback を実装していません.");
  }

  //
  mCallback = (FragmentBottomCallback) activity;
  /*
   * try { mCallback = (FragmentBottomCallback) activity; } catch
   * (ClassCastException e) { // Fragment が組み込まれる先の Activity
   * に対して、FragmentCallbacks // インタフェースの実装を要求する為 //
   * キャストに失敗した場合は、実行時例外としてプログラムのミスであることを示す throw new
   * IllegalStateException(
   * "activity should implement FragmentTopCallback", e); }
   */
 }

 /*
  * Fragment がユーザに見える状態になるまで保持しておくべきコンポーネントの初期化。
  * 
  * @see android.support.v4.app.Fragment#onCreate(android.os.Bundle)
  */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  Log.d(TAG, "FragmentBottom-onCreate");

  // fragment再生成抑止。Fragment を破棄させないようにする。
  setRetainInstance(true);

 }

 /*
  * Fragment が持つ View を構築する状態です。 View を持たない Fragment は、ここで null を返す
  * 
  * @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) {
  Log.d(TAG, "FragmentBottom-onCreateView");
  // Bundleで保存されたデータを復元
  String count = "";
  Bundle bundle = this.getArguments();
  
  if(bundle != null && bundle.containsKey("count")){
   count = getArguments().getString("count");
  }
  
  //
  Log.d("onCreateView", count);

  // 第1引数:レイアウトXMLファイルのリソースID、
  // 第2引数:
  // 第3引数:trueにするかfalseにするかで戻り値となるルートビュー(View)が変わる。
  // trueの場合には、第2引数で渡したViewGrou、falseの場合には第1引数で渡したリソースIDがルートビューになる
  LinearLayout view = (LinearLayout) inflater.inflate(R.layout.fragment_main, container, false);
  // FragmentのTextViewの取得
  mTextView = (TextView) view.findViewById(R.id.text_view);
  // テキストを挿入
  mTextView.setText(count);
  // タグを設定する
  mTextView.setTag(TAG);
  
  // FragmentのImageViewの取得
  mButtonView = (Button) view.findViewById(R.id.button_view);
  //
  mButtonView.setText("削除");
  // 画像クリック時のイベントリスナー
  mButtonView.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    if (mCallback != null) {
     mCallback.onClick(mTextView);
    }
   }
  });
  
  //
  final Button button = new Button(getActivity());
  button.setText("全て削除");
  // 画像クリック時のイベントリスナー
  button.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    if (mCallback != null) {
     mCallback.onClick(button);
    }
   }
  });
  
  //
  view.addView(button);
  //
  view.setBackgroundColor(getColor());
  //
  return view;
 }

 /*
  * TextViewの設定
  */
 public void setText(String text){
  mTextView.setText(text);
 } 
 /**
  * カラーコードを生成する
  */
 public static int getColor() {
  // ランダムに色を追加する
  int R = (int) (Math.random() * 256);
  int G = (int) (Math.random() * 256);
  int B = (int) (Math.random() * 256);
  return Color.rgb(R, G, B);
 }

}

■MainActivity.java

各Fragmentのコールバックを経由して、
バックスタックの操作用を行うために次のメソッドが記述されています。

・addFrament
FrameLayoutにFragmentを追加する

・backFragment
バックスタックの状態を1つ前に戻す。

・deleteBackStackFragment
バックスタックを全て削除する
package com.example.fragment7;

import com.example.fragment7.MainFragmentBottom.FragmentBottomCallback;
import com.example.fragment7.MainFragmentTop.FragmentTopCallback;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.util.Log;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements
  FragmentTopCallback, FragmentBottomCallback {

 public final static String TAG = "MainActivity";

 private int countCreate = 0;

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

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

  // 既にFragmentが作成されているかチェック
  if (manager.findFragmentByTag("layout_fragment_top") == null) {

   // 1つ目のfragmentを生成
   MainFragmentTop fragment_top = new MainFragmentTop();
   Bundle bundle1 = new Bundle();
   bundle1.putString("title", "キタ――(゚∀゚)――!!");
   // フラグメントに渡す値をセット
   fragment_top.setArguments(bundle1);

   // Fragment をスタックに追加する
   // メインレイアウトに対して追加先のビューのID、Fragment、Fragmentのタグ。
   // add() したときに既にバックスタックに同じタグの Fragment が存在する場合、
   // Fragment は新規作成されず、既にインスタンス化してある Fragment が再表示される。
   tx.add(R.id.layout_fragment_top, fragment_top,
     "layout_fragment_top");
  }
  //
  tx.commit();

 }

 /*
  * 上下に配置されているFragmentの中にあるImageViewのクリックイベントのコールバック
  * 
  * @see com.example.fragment6.MainFragmentTop.FragmentTopCallback#oClick()
  */
 public void onClick(TextView v) {

  Log.d(TAG,
    "onClick TextView " + String.valueOf(v.getTag()) + " : "
      + v.getText());

  // TextViewに設定されているタグを元にどっちがクリックされたか判定する
  String tag = (String) v.getTag();
  if (tag == MainFragmentTop.TAG) {
   //
   Log.d(TAG, "onClick " + String.valueOf(v.getTag()));
   addFrament();
   //
   countCreate++;

  } else if (tag == MainFragmentBottom.TAG) {
   //
   Log.d(TAG, "onClick " + String.valueOf(v.getTag()));

   // FragmentManager#popBackStackでフラグメントのバックスタックの状態を一つ戻す
   backFragment();

  }

 }

 /*
  * (non-Javadoc)
  * 
  * @see
  * com.example.fragment7.MainFragmentBottom.FragmentBottomCallback#onClick
  * (android.widget.Button)
  */
 public void onClick(Button button) {
  deleteBackStackFragment();
 }

 /*
  * FrameLayoutにFragmentを追加する
  */
 public void addFrament() {

  Log.d(TAG, "addFrament");

  FragmentManager manager = getSupportFragmentManager();
  FragmentTransaction ft = manager.beginTransaction();

  MainFragmentBottom fragmentBottom = new MainFragmentBottom();
  Bundle bundle2 = new Bundle();
  bundle2.putString("count", String.valueOf(countCreate));
  // フラグメントに渡す値をセット
  fragmentBottom.setArguments(bundle2);

  // 生成するFragmentにつけるタグ名
  String tag = "fragment" + String.valueOf(countCreate);

  // Fragmentの作成
  ft.add(R.id.fragment_container, fragmentBottom, tag);

  // フラグメントをバックスタックに登録する。これを行うことで、後でこのフラグメントを参照したり、戻したりできる。
  ft.addToBackStack(null);

  // FragmentTransaction#commitでフラグメントのセットが完了する
  ft.commit();

 }

 /*
  * バックスタックの状態を1つ前に戻す。
  */
 public void backFragment() {

  FragmentManager manager = getSupportFragmentManager();
  // FragmentManager#popBackStackでフラグメントのバックスタックの状態を一つ戻す
  manager.popBackStack();

 }

 /*
  * バックスタックを全て削除する
  */
 public void deleteBackStackFragment() {

  FragmentManager manager = getSupportFragmentManager();
  manager.popBackStack();

  if (manager.getBackStackEntryCount() > 0) {
   manager.popBackStack(manager.getBackStackEntryAt(0).getName(),
     FragmentManager.POP_BACK_STACK_INCLUSIVE);
  }
  //トランザクションを直ちに実行
  manager.executePendingTransactions();

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



バックスタックに無尽蔵に貯めれるわけではなくて、溜め込んだ分だけメモリを消費するみたいなので、
使いすぎには注意が必要です!ご利用は計画的にっ!:(;゙゚'ω゚'):

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

参考URL

0 件のコメント:

コメントを投稿