1. 程式人生 > >Android 基礎:Fragment的介紹與應用,QQ底欄,側滑選單

Android 基礎:Fragment的介紹與應用,QQ底欄,側滑選單


Fragment介紹

Android是在Android 3.0 (API level 11)開始引入Fragment的。可以把Fragment當成Activity的一個介面的一個組成部分,甚至Activity的介面可以完全有不同的Fragment組成,而且Fragment擁有自己的生命週期和接收、處理使用者的事件,這樣就不必在Activity寫一堆控制元件的事件處理的程式碼了。更為重要的是,你可以動態的新增、替換和移除某個Fragment

Fragment的生命週期

因為Fragment必須嵌入在Acitivity中使用,所以Fragment的生命週期和它所在的Activity是密切相關的。
如果Activity是暫停狀態,其中所有的Fragment都是暫停狀態;如果Activity是stopped狀態,這個Activity中所有的Fragment都不能被啟動;如果Activity被銷燬,那麼它其中的所有Fragment都會被銷燬。
但是,當Activity在活動狀態,可以獨立控制Fragment的狀態,比如加上或者移除Fragment。
當這樣進行fragment transaction(轉換)的時候,可以把fragment放入Activity的back stack中,這樣使用者就可以進行返回操作。

Fragment的使用相關

使用Fragment時,需要繼承Fragment或者Fragment的子類(DialogFragment, ListFragment, PreferenceFragment, WebViewFragment),所以Fragment的程式碼看起來和Activity的類似。

使用Support Library

Support Library是一個提供了API庫函式的JAR檔案,這樣就可以在舊版本的Android上使用一些新版本的APIs。
比如android-support-v4.jar.它的完整路徑是:
<sdk>/extras/android/support/v4/android-support-v4.jar.
它就提供了Fragment的APIs,使得在Android 1.6 (API level 4)以上的系統都可以使用Fragment。
為了確定沒有在舊版本系統上使用新版本的APIs,需要如下匯入語句:

  import android.support.v4.app.Fragment;    
    import android.support.v4.app.FragmentManager;

必須實現的回撥函式

onCreateView()

當第一次繪製FragmentUI時系統呼叫這個方法,必須返回一個View,如果Fragment不提供UI也可以返回null

注意,如果繼承自ListFragmentonCreateView()預設的實現會返回一個ListView,所以不用自己實現。

public class ExampleFragment extends Fragment {     
     @Override     
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
          // Inflate the layout for this fragment         
          return inflater.inflate(R.layout.example_fragment, container, false);     
     } 
}

Fragment加入Activity

Fragment有兩種載入方式:一種是在Activitylayout中使用標籤<fragment>宣告;另一種方法是在程式碼中把它加入到一個指定的ViewGroup中。

載入方式1:通過Activity的佈局檔案將Fragment加入Activity

Activity的佈局檔案中,將Fragment作為一個子標籤加入即可。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="horizontal"     android:layout_width="match_parent"     android:layout_height="match_parent">     <fragment android:name="com.example.news.ArticleListFragment"             android:id="@+id/list"             android:layout_weight="1"             android:layout_width="0dp"             android:layout_height="match_parent" />     <fragment android:name="com.example.news.ArticleReaderFragment"             android:id="@+id/viewer"             android:layout_weight="2"             android:layout_width="0dp"             android:layout_height="match_parent" /></LinearLayout>

載入方式2:通過程式設計的方式將Fragment加入到一個ViewGroup

Activity處於Running狀態下的時候,可以在Activity的佈局中動態地加入Fragment,只需要指定加入這個Fragment的父View Group即可。

  首先,需要一個FragmentTransaction例項: 

FragmentManager  fragmentManager = getFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

 (注,如果importandroid.support.v4.app.FragmentManager;那麼使用的是:FragmentManager fragmentManager = getSupportFragmentManager();

        之後,用add()方法加上Fragment的物件:

ExampleFragment fragment = new ExampleFragment();  
fragmentTransaction.add(R.id.fragment_container, fragment);  
fragmentTransaction.commit();

其中第一個引數是這個fragment的容器,即父控制元件組。

最後需要呼叫commit()方法使得FragmentTransaction例項的改變生效。

Fragment簡單的應用

1、新建工程

2.、建立若干個簡單的佈局(用於fragment的載入),如下:

            activiy_main為主佈局檔案,fragment1,fragment2fragment的佈局檔案

3、建立Fragment的類

建立Fragment1:建立過程與建立Activity類似,不過繼承的是android.support.v4.app.Fragment
                   複寫onCreateView函式載入fragment的佈局,R.layout.fragment1就是剛剛建立的佈局檔案。

建立Fragment2:同上

4、執行

Fragment擴充套件應用

底欄按鈕切換介面的實現(類似QQ底欄)

1、與上面類似,新建佈局檔案activity2.xml,具體佈局如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/bottom"
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:layout_alignParentBottom="true"
        android:background="@null"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/f1"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:text="fragment1" />

        <Button
            android:id="@+id/f2"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:text="fragment2" />
    </LinearLayout>

    <FrameLayout    <!--   注意,這裡是幀佈局不是Fragment  --!>
        android:id="@+id/content_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom"
        android:background="#fff" >
    </FrameLayout>

</RelativeLayout>

             兩個按鈕組成的佈局作為底欄,上面空白部分為幀佈局:

                 

2、新建兩個用於填充Fragment的佈局檔案,與上面類似。

          3、建立兩個Fragment類,與上面類似

          4、編寫主Activity程式碼:

public class Activity2 extends FragmentActivity {//注意!這裡繼承的是FragmentActivity
	private Button f1, f2;
	private Fragment mContent; //這裡是Fragment而不是幀佈局,幀佈局不用宣告

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity2);//載入activity的佈局
		f1 = (Button) findViewById(R.id.f1);//例項化兩個按鈕
		f2 = (Button) findViewById(R.id.f2);
		if (mContent == null) {
			mContent = new Fragment3(); //例項化Fragment
			
			//下面是重點!
          //Fragment通過FragmentManager來管理
			//beginTransaction()返回Fragment事務管理例項
			//replace()執行Fragment事務中的替換
			//R.id.content_fragment用來裝載Fragment的容器
			//mContent用於替換的Fragment的物件
			//commit()提交事務,完成操作
			getSupportFragmentManager().beginTransaction().replace(
					R.id.content_fragment, mContent).commit();

		}
		f1.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				mContent = new Fragment3();
				if (mContent != null) {

					getSupportFragmentManager().beginTransaction()
							.replace(R.id.content_fragment, mContent).commit();
				}
			}
		});
		f2.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				mContent = new Fragment4();
				if (mContent != null) {

					getSupportFragmentManager().beginTransaction()
							.replace(R.id.content_fragment, mContent).commit();
				}
			}
		});
	}
}

            5、執行除錯

1、側滑選單+Fragment

側滑選單的介紹

市場上很多應用均採取的框架,從螢幕左側劃出選單,點選菜單,右側介面進行相應的切換。安卓5.0以前實現這種效果只能通過別人的開原始碼實現,從5.0安卓開始提供了自帶的側滑選單元件DrawerLayout,該元件在supportv4包下,相容之前的版本。

1、新建工程,與相應的佈局檔案

2Activity的佈局如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v4.widget.DrawerLayout
        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" />
        <!-- The navigation drawer -->


        <!-- 左滑選單佈局 -->

        <LinearLayout
            android:id="@+id/left_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"  表示左邊選單
            android:background="#ffffff"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/one"
                android:layout_width="240dp"
                android:layout_height="55dp"
                android:drawableLeft="@drawable/ic_launcher"
                android:gravity="center"
                android:text="第一個介面"
                android:textColor="#353535"
                android:textSize="23dp" />

            <TextView
                android:id="@+id/two"
                android:layout_width="240dp"
                android:layout_height="55dp"
                android:drawableLeft="@drawable/ic_launcher"
                android:gravity="center"
                android:text="第二個介面"
                android:textColor="#353535"
                android:textSize="23dp" />

            <TextView
                android:id="@+id/three"
                android:layout_width="240dp"
                android:layout_height="55dp"
                android:drawableLeft="@drawable/ic_launcher"
                android:gravity="center"
                android:text="第三個介面"
                android:textColor="#353535"
                android:textSize="23dp" />
        </LinearLayout>

        <!-- 增加右邊抽屜顯示 -->

        <TextView
            android:id="@+id/right_drawer"
            android:layout_width="280dp"
            android:layout_height="match_parent"
            android:layout_gravity="end"  表示右邊選單
            android:background="#ffffff"
            android:gravity="center"
            android:text="@string/right_drawer_info"
            android:textColor="#444444"
            android:textSize="30sp" >
        </TextView>
    </android.support.v4.widget.DrawerLayout>

</LinearLayout>


3、主Acitity的編寫

public class MainActivity extends FragmentActivity {// 整合的是FragmentActivity
	private DrawerLayout mDrawerLayout;// 側滑選單
	private LinearLayout mDrawerList;// 側滑選單的佈局
	private MenuListener menuListener;// 監聽
	private TextView one, two, three;// 側滑選單中的三個TextView

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
				// 例項化操作
		mDrawerList = (LinearLayout) findViewById(R.id.left_drawer);
		mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
		one = (TextView) findViewById(R.id.one);
		two = (TextView) findViewById(R.id.two);
		three = (TextView) findViewById(R.id.three);
		menuListener = new MenuListener();
		one.setOnClickListener(menuListener);
		two.setOnClickListener(menuListener);
		three.setOnClickListener(menuListener);
		// 設定選單被拉出時的陰影
		mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,
				GravityCompat.START);
		// 預設顯示第一個Fragment
		Fragment fragment = new Fragment1().getNewInstance();
		FragmentManager fragmentManager = getSupportFragmentManager();
		fragmentManager.beginTransaction()
				.replace(R.id.content_frame, fragment).commit();
	}

	// 主要是三個TextView的監聽事件
	private class MenuListener implements View.OnClickListener {

		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			Fragment fragment = null;
			switch (v.getId()) {
			case R.id.one:
				fragment = new Fragment1().getNewInstance();

				break;
			case R.id.two:
				fragment = new Fragment2();

				break;
			case R.id.three:
				fragment = new Fragment3();

				break;
			default:
				break;
			}
			FragmentManager fragmentManager = getSupportFragmentManager();
			fragmentManager.beginTransaction()
					.replace(R.id.content_frame, fragment).commit();
          
           // 點選後關閉側滑選單
			mDrawerLayout.closeDrawer(mDrawerList);
		}

	}

}