Android记录6--ViewPage+Fragment的使用例子

2013年9月6日Fragment学习

Fragment这个东西，我到现在才接触到，之前没有用到过，关于Fragment这个东西在官方文档已经介绍了非常清楚了，我还特地转载了官方API的中文翻译，在这我就不浪费口舌了。简单来说，Fragment就是为满足大屏幕的而诞生的，手机屏幕小而平板屏幕就大了，屏幕一大就会产生更多的交互，这是很容易想到的，那么单纯的Activity就不能满足我们的需求了。

今天这个例子是自己做的一个小Demo，简单使用了Fragment,是跟ViewPage结合一起使用的。我想实现的效果是，左右滑动可以从一个Fragment到另一个Fragment的过渡。

看看效果图：

可以看到，两个fragment都可有控件的点击事件，如果是两个Activity我不知道怎么实现，可能会稍微麻烦一点。

简单的ViewPage布局：

/2013.09.05_ViewPage_Fragment_Demo/res/layout/activity_main.xml

[html]  view plain copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.     <android.support.v4.view.ViewPager  
6.         android:id="@+id/viewpager"  
7.         android:layout_width="wrap_content"  
8.         android:layout_height="wrap_content"  
9.         android:flipInterval="30"  
10.         android:persistentDrawingCache="animation" />  
11. </RelativeLayout>  

/2013.09.05_ViewPage_Fragment_Demo/res/layout/viewpager1.xml

[html]  view plain copy

 

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:background="@drawable/guide_1" >  
6.   
7.     <Button  
8.         android:id="@+id/btn"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:layout_alignParentBottom="true"  
12.         android:layout_centerHorizontal="true"  
13.         android:layout_marginBottom="54dp"  
14.         android:background="@drawable/butten"  
15.         />  
16.   
17. </RelativeLayout>  

/2013.09.05_ViewPage_Fragment_Demo/res/layout/viewpager2.xml

[html]  view plain copy

 

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:background="@drawable/guide_2" >  
6.   
7.     <Button  
8.         android:id="@+id/btn"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:layout_alignParentBottom="true"  
12.         android:layout_centerHorizontal="true"  
13.         android:layout_marginBottom="54dp"  
14.         android:background="@drawable/butten" />  
15.   
16. </RelativeLayout>  

再来一个适配器：

/2013.09.05_ViewPage_Fragment_Demo/src/com/wwj/vf/adapter/FragAdapter.java

[java]  view plain copy

 

1. package com.wwj.vf.adapter;  
2.   
3. import java.util.List;  
4.   
5. import android.support.v4.app.Fragment;  
6. import android.support.v4.app.FragmentManager;  
7. import android.support.v4.app.FragmentPagerAdapter;  
8. /** 
9.  * FragmentPager适配器 
10.  * @author wwj 
11.  * 
12.  */  
13. public class FragAdapter extends FragmentPagerAdapter{  
14.       
15.     private List<Fragment> fragments;  
16.       
17.   
18.     public FragAdapter(FragmentManager fm) {  
19.         super(fm);  
20.     }  
21.       
22.     public FragAdapter(FragmentManager fm, List<Fragment> fragments) {  
23.         super(fm);  
24.         this.fragments = fragments;  
25.     }  
26.   
27.     @Override  
28.     public Fragment getItem(int position) {  
29.         return fragments.get(position);  
30.     }  
31.   
32.     @Override  
33.     public int getCount() {  
34.         return fragments.size();  
35.     }  
36. }  

两个自定义的Fragment

这里很简单，一张背景+一个按钮

/2013.09.05_ViewPage_Fragment_Demo/src/com/wwj/vf/ui/MyFragment1.java

[java]  view plain copy

 

1. package com.wwj.vf.ui;  
2.   
3. import com.wwj.vf.R;  
4.   
5. import android.os.Bundle;  
6. import android.support.v4.app.Fragment;  
7. import android.view.LayoutInflater;  
8. import android.view.View;  
9. import android.view.View.OnClickListener;  
10. import android.view.ViewGroup;  
11. import android.widget.Button;  
12. import android.widget.Toast;  
13. /** 
14.  * 第一个Fragment 
15.  *  
16.  * @author wwj 
17.  * 
18.  */  
19. public class MyFragment1 extends Fragment {  
20.     private Button btn;  
21.     @Override  
22.     public void onCreate(Bundle savedInstanceState) {  
23.         super.onCreate(savedInstanceState);  
24.           
25.     }  
26.       
27.       
28.     @Override  
29.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
30.             Bundle savedInstanceState) {  
31.         View view = inflater.inflate(R.layout.viewpager1, container, false);  
32.         btn = (Button) view.findViewById(R.id.btn);  
33.         btn.setOnClickListener(new OnClickListener() {  
34.               
35.             @Override  
36.             public void onClick(View v) {  
37.                 Toast.makeText(getActivity(), "你点我啦，好坏！！！", Toast.LENGTH_LONG).show();  
38.             }  
39.         });  
40.         return view;  
41.     }  
42.       
43.     @Override  
44.     public void onActivityCreated(Bundle savedInstanceState) {  
45.         super.onActivityCreated(savedInstanceState);  
46.     }  
47.       
48.     @Override  
49.     public void onPause() {  
50.         super.onPause();  
51.     }  
52.       
53. }  

/2013.09.05_ViewPage_Fragment_Demo/src/com/wwj/vf/ui/MyFragment2.java

[java]  view plain copy

 

1. package com.wwj.vf.ui;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.Fragment;  
5. import android.view.LayoutInflater;  
6. import android.view.View;  
7. import android.view.View.OnClickListener;  
8. import android.view.ViewGroup;  
9. import android.widget.Button;  
10. import android.widget.Toast;  
11.   
12. import com.wwj.vf.R;  
13. /** 
14.  * 第2个Fragment 
15.  *  
16.  * @author wwj 
17.  * 
18.  */  
19. public class MyFragment2 extends Fragment {  
20.       
21.     @Override  
22.     public void onCreate(Bundle savedInstanceState) {  
23.         super.onCreate(savedInstanceState);  
24.     }  
25.       
26.       
27.     @Override  
28.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
29.             Bundle savedInstanceState) {  
30.         View view = inflater.inflate(R.layout.viewpager2, container, false);  
31.         view.findViewById(R.id.btn).setOnClickListener(new OnClickListener() {  
32.               
33.             @Override  
34.             public void onClick(View v) {  
35.                 Toast.makeText(getActivity(), "这个Fragment2哦，要注意了！！", Toast.LENGTH_SHORT).show();  
36.             }  
37.         });  
38.         return view;  
39.     }  
40.       
41.     @Override  
42.     public void onActivityCreated(Bundle savedInstanceState) {  
43.         super.onActivityCreated(savedInstanceState);  
44.     }  
45.       
46.     @Override  
47.     public void onPause() {  
48.         super.onPause();  
49.     }  
50.       
51. }  

好啦，在Activity里添加两个Fragment

[java]  view plain copy

 

1. package com.wwj.vf;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import android.os.Bundle;  
7. import android.support.v4.app.Fragment;  
8. import android.support.v4.app.FragmentActivity;  
9. import android.support.v4.view.ViewPager;  
10.   
11. import com.wwj.vf.adapter.FragAdapter;  
12. import com.wwj.vf.ui.MyFragment1;  
13. import com.wwj.vf.ui.MyFragment2;  
14. /** 
15.  * 主Activity，包含两个fragment 
16.  *  
17.  * @author wwj 
18.  * 
19.  */  
20. public class MainActivity extends FragmentActivity {  
21.       
22.     private ViewPager vp;  
23.     private FragAdapter adapter;  
24.     @Override  
25.     protected void onCreate(Bundle savedInstanceState) {  
26.         super.onCreate(savedInstanceState);  
27.         setContentView(R.layout.activity_main);  
28.         vp = (ViewPager) findViewById(R.id.viewpager);  
29.           
30.         List<Fragment> fragments = new ArrayList<Fragment>();  
31.         fragments.add(new MyFragment1());  
32.         fragments.add(new MyFragment2());  
33.           
34.         adapter = new FragAdapter(getSupportFragmentManager(), fragments);  
35.         vp.setAdapter(adapter);  
36.         vp.setCurrentItem(0);  
37.     }  
38.   
39. }  

简单的ViewPage和Fragment的搭配使用就这样了。

我们来看一下Fragment完整的生命周期。

• 在Fragment生命周期开始，onInflate方法被调用。要注意的是，这个方法只在我们直接用标签在布局文件中定义的时候才会被调用。我们可以在这个方法中保存一些在xml布局文件中定义的配置参数和一些属性。
• 这一步过后就轮到onAttach被调用了。这个方法在Fragment绑定到它的父Activity中的时候被调用，我们可以在这里保存它和Activity之间的引用。
• 之后onCreate会被调用。这是最重要的步骤之一。Fragment就是在这一步中产生的，可以用这个方法来启动其它线程来检索数据，比如从远程服务器中启动。
• onCreateView这个方法是在Fragment创建自己的视图结构的时候被调用，在这个方法中我们会载入Fragment的布局文件，就像我们在ListView控件中载入布局一样。在这个过程中，我们不能保证父Activity是否已经创建，所以有一些操作我们不能在这里完成。
• 可以看到，在onActivityCreated后Activity才算是建立完成。到这一步，我们的Activity就创建成功并激活了。我们可以随时使用它了。
• 下一步就是onStart了，在这里我们做的事和Activity中的onStart一样，在这个方法中Fragment虽然可以显示，但是还不能和用户进行交互，只有在onResume后Fragment才能开始和用户进行交互操作。在这个过程后，Fragment就已经启动并运行起来了。
• 也许会暂停Activity。Activity的OnPause方法会被调用。这时候Fragment的onPause方法也会被调用。
• 系统也可能会销毁Fragment的视图显示，发生这种情况时onDestroyView方法就被调用了。
• 之后，如果系统需要完全销毁整个Fragment的话，onDestroy方法就会被调用了。这时候我们就需要释放掉所有可用的连接了，因为这个时候Fragment马上就要被杀掉了。虽然是在准备销毁的过程中，但是Fragment仍然绑定在父Activity中。
• 最后一步就是把Fragment从Activity中解绑，即调用onDetach方法。