Android記錄6--ViewPage+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.     <Button  
7.         android:id="@+id/btn"  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:layout_alignParentBottom="true"  
11.         android:layout_centerHorizontal="true"  
12.         android:layout_marginBottom="54dp"  
13.         android:background="@drawable/butten"  
14.         />  
15. </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.     <Button  
7.         android:id="@+id/btn"  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:layout_alignParentBottom="true"  
11.         android:layout_centerHorizontal="true"  
12.         android:layout_marginBottom="54dp"  
13.         android:background="@drawable/butten" />  
14. </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. import java.util.List;  
3. import android.support.v4.app.Fragment;  
4. import android.support.v4.app.FragmentManager;  
5. import android.support.v4.app.FragmentPagerAdapter;  
6. public class FragAdapter extends FragmentPagerAdapter{  
7.     private List<Fragment> fragments;  
8.     public FragAdapter(FragmentManager fm) {  
9.         super(fm);  
10.     }  
11.     public FragAdapter(FragmentManager fm, List<Fragment> fragments) {  
12.         super(fm);  
13.         this.fragments = fragments;  
14.     }  
15.     @Override  
16.     public Fragment getItem(int position) {  
17.         return fragments.get(position);  
18.     }  
19.     @Override  
20.     public int getCount() {  
21.         return fragments.size();  
22.     }  
23. }  

兩個自定義的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. import com.wwj.vf.R;  
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. public class MyFragment1 extends Fragment {  
12.     private Button btn;  
13.     @Override  
14.     public void onCreate(Bundle savedInstanceState) {  
15.         super.onCreate(savedInstanceState);  
16.     }  
17.     @Override  
18.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
19.             Bundle savedInstanceState) {  
20.         View view = inflater.inflate(R.layout.viewpager1, container, false);  
21.         btn = (Button) view.findViewById(R.id.btn);  
22.         btn.setOnClickListener(new OnClickListener() {  
23.             @Override  
24.             public void onClick(View v) {  
25.                 Toast.makeText(getActivity(), "你點我啦，好壞！！！", Toast.LENGTH_LONG).show();  
26.             }  
27.         });  
28.         return view;  
29.     }  
30.     @Override  
31.     public void onActivityCreated(Bundle savedInstanceState) {  
32.         super.onActivityCreated(savedInstanceState);  
33.     }  
34.     @Override  
35.     public void onPause() {  
36.         super.onPause();  
37.     }  
38. }  

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

[java]  view plain copy

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

好啦，在Activity裡添加兩個Fragment

[java]  view plain copy

1. package com.wwj.vf;  
2. import java.util.ArrayList;  
3. import java.util.List;  
4. import android.os.Bundle;  
5. import android.support.v4.app.Fragment;  
6. import android.support.v4.app.FragmentActivity;  
7. import android.support.v4.view.ViewPager;  
8. import com.wwj.vf.adapter.FragAdapter;  
9. import com.wwj.vf.ui.MyFragment1;  
10. import com.wwj.vf.ui.MyFragment2;  
11. public class MainActivity extends FragmentActivity {  
12.     private ViewPager vp;  
13.     private FragAdapter adapter;  
14.     @Override  
15.     protected void onCreate(Bundle savedInstanceState) {  
16.         super.onCreate(savedInstanceState);  
17.         setContentView(R.layout.activity_main);  
18.         vp = (ViewPager) findViewById(R.id.viewpager);  
19.         List<Fragment> fragments = new ArrayList<Fragment>();  
20.         fragments.add(new MyFragment1());  
21.         fragments.add(new MyFragment2());  
22.         adapter = new FragAdapter(getSupportFragmentManager(), fragments);  
23.         vp.setAdapter(adapter);  
24.         vp.setCurrentItem(0);  
25.     }  
26. }  

簡單的ViewPage和Fragment的搭配使用就這樣了。