Android 程式开发：（三）初识Fragment —— 3.1简介

    在之前的教程中，我们已经学习了什么是Activity以及如何使用它。在一个小屏幕的设备上，一个activity通常占据了整个屏幕，同时显示各种UI视图组件。Activity实际上就是视图的容器。然后，当一个activity被显示在一个大屏幕的设备上，例如平板电脑，总会显得有些不适应。因为屏幕太大了，activity中的所有UI组件要充满整个屏幕，这样一来，视图的层次结构就很复杂了。一个更好的办法是使用一种“轻量级”的activity，每个“轻量级”activity包含自己的视图，互不干扰。在运行期间，根据屏幕的方向和尺寸，一个activity可以包含一个或多个“轻量级”activity。在Android3.0以上的版本，这种“轻量级”的activity叫做Fragment.

    可以把Fragment想象成Activity的另外一种形式。你创建fragments去包含UI组件，就像创建activities那样。但是，Fragment总是被嵌在Activity中。

    1.创建一个名为Fragments的工程。

    2.在res/layout文件夹下，新建一个叫fragment1.xml的文件。

[java] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:background="#00FF00"  
6.     android:orientation="vertical" >  
7.   
8.     <TextView  
9.         android:id="@+id/lblFragment1"  
10.         android:layout_width="fill_parent"  
11.         android:layout_height="wrap_content"  
12.         android:text="This is fragment #1"  
13.         android:textColor="#000000"  
14.         android:textSize="25sp" />  
15.   
16. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#00FF00" android:orientation="vertical" > <TextView android:id="@+id/lblFragment1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="This is fragment #1" android:textColor="#000000" android:textSize="25sp" /></LinearLayout>    3.在res/layout文件夹下，新建一个叫fragment2.xml的文件。

[java] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:background="#FFFE00"  
6.     android:orientation="vertical" >  
7.   
8.     <TextView  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="wrap_content"  
11.         android:text="This is fragment #2"  
12.         android:textColor="#000000"  
13.         android:textSize="25sp" />  
14.   
15.     <Button  
16.         android:id="@+id/btnGetText"  
17.         android:layout_width="wrap_content"  
18.         android:layout_height="wrap_content"  
19.         android:onClick="onClick"  
20.         android:text="Get text in Fragment #1"  
21.         android:textColor="#000000" />  
22.   
23. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FFFE00" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="This is fragment #2" android:textColor="#000000" android:textSize="25sp" /> <Button android:id="@+id/btnGetText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onClick" android:text="Get text in Fragment #1" android:textColor="#000000" /></LinearLayout>    4.main.xml中的代码。

[java] view plaincopyprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="horizontal" >  
6.   
7.     <fragment  
8.         android:id="@+id/fragment1"  
9.         android:name="net.learn2develop.Fragments.Fragment1"  
10.         android:layout_width="0px"  
11.         android:layout_height="match_parent"  
12.         android:layout_weight="1" />  
13.   
14.     <fragment  
15.         android:id="@+id/fragment2"  
16.         android:name="net.learn2develop.Fragments.Fragment2"  
17.         android:layout_width="0px"  
18.         android:layout_height="match_parent"  
19.         android:layout_weight="1" />  
20.   
21. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" > <fragment android:id="@+id/fragment1" android:name="net.learn2develop.Fragments.Fragment1" android:layout_width="0px" android:layout_height="match_parent" android:layout_weight="1" /> <fragment android:id="@+id/fragment2" android:name="net.learn2develop.Fragments.Fragment2" android:layout_width="0px" android:layout_height="match_parent" android:layout_weight="1" /></LinearLayout>    5.新建两个类：Fragment1.java和Fragment2.java。

    6.Fragment1.java中的代码。

[java] view plaincopyprint?

1. package net.learn2develop.Fragments;  
2.   
3. import android.app.Activity;  
4. import android.app.Fragment;  
5. import android.os.Bundle;  
6. import android.util.Log;  
7. import android.view.LayoutInflater;  
8. import android.view.View;  
9. import android.view.ViewGroup;  
10.   
11. public class Fragment1 extends Fragment {  
12.     @Override  
13.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
14.             Bundle savedInstanceState) {  
15.   
16.         Log.d("Fragment 1", "onCreateView");  
17.   
18.         // ---Inflate the layout for this fragment---  
19.         return inflater.inflate(R.layout.fragment1, container, false);  
20.     }  
21. }  

package net.learn2develop.Fragments;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 Fragment1 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { Log.d("Fragment 1", "onCreateView"); // ---Inflate the layout for this fragment--- return inflater.inflate(R.layout.fragment1, container, false); }}    7.Fragment2.java中的代码。

[java] view plaincopyprint?

1. package net.learn2develop.Fragments;  
2.   
3. import android.app.Fragment;  
4. import android.os.Bundle;  
5. import android.view.LayoutInflater;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8. import android.widget.Button;  
9. import android.widget.TextView;  
10. import android.widget.Toast;  
11.   
12. public class Fragment2 extends Fragment {  
13.     @Override  
14.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
15.             Bundle savedInstanceState) {  
16.         // ---Inflate the layout for this fragment---  
17.         return inflater.inflate(R.layout.fragment2, container, false);  
18.     }  
19. }  

package net.learn2develop.Fragments;import android.app.Fragment;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;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) { // ---Inflate the layout for this fragment--- return inflater.inflate(R.layout.fragment2, container, false); }}    8. 调试。

效果图：