Android Code筆記本: Fragment元件介紹及使用方式

程式在平板或手機上執行，Fragment 1可能嵌入在一個Activity中，而另一個

Fragment 2可能嵌入在另一個Activity中，如下圖所示：

而如下圖程式運行在橫向模式的平板上由於寬度足夠，兩個Fragment就可以嵌入在同一個Activity中：

由此可以看出，使用Fragment可以讓我們更加充分地利用平板的螢幕空間，下面我們一起來探究下如何使用Fragment。

首先需要注意，Fragment是在3.0版本引入的，如果你使用的是3.0之前的系統，需要先導入android-support-v4的jar套件才能使用Fragment功能。

範例1: 如何建立Fragment

建立Fragment所要顯示的 XML UI

(1) Fragment1.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#00ff00" >

<TextView

android:id="@+id/fragment1_text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="This is fragment 1"

android:textColor="#000000"

android:textSize="25sp" />

</LinearLayout>

(2) Fragment2.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:background="#ffff00" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="This is fragment 2"

android:textColor="#000000"

android:textSize="25sp" />

<Button

android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Get fragment1 text" />

</LinearLayout>

建立 Fragment類別

(1) Fragment1.java

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class Fragment1 extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater,

ViewGroup container, Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment1, container, false);

}

(2) Fragment2.java

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class Fragment2 extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater,

ViewGroup container, Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment2, container, false);

}

在主要Activity 程式所需執行畫面定義上述兩個Fragment

注意: android:name="com.example.app1213.Fragment1" 必須有套件名稱

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:baselineAligned="false" >

<fragment

android:id="@+id/fragment1"

android:name="com.example.app1213.Fragment1"

android:layout_width="0dip"

android:layout_height="match_parent"

android:layout_weight="1" />

<fragment

android:id="@+id/fragment2"

android:name="com.example.app1213.Fragment2"

android:layout_width="0dip"

android:layout_height="match_parent"

android:layout_weight="1" />

</LinearLayout>

主程式 MainActivity.java

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

結果 :

範例2: 利用程式建立Fragment

Fragment真正的強大之處在於可以動態地添加到Activity當中，因此這也是你必須要掌握的東西。當你學會了在程式在Activity添加Fragment，程式的介面就可以更加多樣化。下面我們立刻來看看，如何動態添加Fragment。

定義一個空的layout畫面

1. activity_empty.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/main_layout"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:baselineAligned="false" >

</LinearLayout>

2. MainCodingFragment.java

import android.app.Activity;

import android.graphics.Point;

import android.os.Bundle;

import android.util.Log;

import android.view.Display;

public class MainCodingFragment extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_empty);

Display display = getWindowManager().getDefaultDisplay();

Point outSize=new Point();

//回傳畫面寬: x 高: y

display.getSize(outSize);

Log.e("X,Y",outSize.x+","+outSize.y);

if (outSize.x<outSize.y) {

Fragment1 fragment1 = new Fragment1(); getFragmentManager().beginTransaction().replace(R.id.main_layout, fragment3).commit();

} else {

Fragment2 fragment2 = new Fragment2();

getFragmentManager().beginTransaction().replace(R.id.main_layout, fragment2).commit();

}

範例3: Fragment 生命週期

建立Fragment生命週期程序方法

import android.app.Activity;

import android.app.Fragment;

import android.os.Bundle;

import android.util.Log;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class FragmentLife extends Fragment {

      public static final String TAG = "FragmentLife";

   @Override
   public void onAttach(Activity activity) {
       // TODO Auto-generated method stub
       super.onAttach(activity);
       Log.e(TAG, "onAttach");
   }

   @Override
   public void onCreate(Bundle bundle) {
       // TODO Auto-generated method stub
       super.onCreate(bundle);
       Log.e(TAG, "onCreate");
   }

   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup viewGroup,
           Bundle bundle) {
       // TODO Auto-generated method stub
       Log.e(TAG, "onCreateView");
       return super.onCreateView(inflater, viewGroup, bundle);

   }

   @Override
   public void onActivityCreated(Bundle savedInstanceState) {
       // TODO Auto-generated method stub
       super.onActivityCreated(savedInstanceState);
       Log.e(TAG, "onActivityCreated");
   }

   @Override
   public void onStart() {
       // TODO Auto-generated method stub
       super.onStart();
       Log.e(TAG, "onStart");
   }

   @Override
   public void onResume() {
       // TODO Auto-generated method stub
       super.onResume();
       Log.e(TAG, "onResume");
   }

   @Override
   public void onPause() {
       // TODO Auto-generated method stub
       super.onPause();
       Log.e(TAG, "onPause");
   }

   @Override
   public void onStop() {
       // TODO Auto-generated method stub
       super.onStop();
       Log.e(TAG, "onStop");
   }

   @Override
   public void onDestroyView() {
       // TODO Auto-generated method stub
       super.onDestroyView();
       Log.e(TAG, "onDestroyView");
   }

   @Override
   public void onDestroy() {
       // TODO Auto-generated method stub
       super.onDestroy();
       Log.e(TAG, "onDestroy");
   }

   @Override
   public void onDetach() {
       // TODO Auto-generated method stub
       super.onDetach();
       Log.e(TAG, "onDetach");
   }

}

這時點擊一下home鍵，列印日誌如下：

如果你再重新進入進入程式，列印日誌如下：

然後點擊back鍵退出程式，列印日誌如下：

onAttach方法：Fragment和Activity建立關聯的時候。

onCreateView方法：為Fragment載入畫面佈局時。

onActivityCreated方法：當Activity中的onCreate方法執行完後。

onDestroyView方法：Fragment中的畫面佈局被移除時。

onDetach方法：Fragment和Activity解除關聯的時候。

範例4: Fragment 間進行資料傳遞

Fragment2.java，加入onActivityCreated方法，並處理按鈕的點擊事件：

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.TextView;

import android.widget.Toast;

public class Fragment2 extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater,

ViewGroup container, Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment2, container, false);

}

@Override

public void onActivityCreated(Bundle savedInstanceState) {

super.onActivityCreated(savedInstanceState);

Button button = (Button) getActivity().findViewById(R.id.button);

button.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

TextView textView = (TextView) getActivity().findViewById(R.id.fragment1_text);

Toast.makeText(getActivity(), textView.getText(), Toast.LENGTH_LONG).show();

}

});

}

Fragment元件介紹及使用方式

沒有留言: