ViewPager和Fragment的组合使用

目录(?)[-]

1. 注释写的很详细了就不多说了其实也没什么深的技术就是对ViewPager的使用
2. httpdownloadcsdnnetdetailu0137587347477459

http://blog.csdn.net/u013758734/article/details/29848117

       

支持手指滑动切换页面，也支持点击导航按钮切换页面。

页面布局文件：

[html]  view plain copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context=".MainActivity" >  
6.       
7.     <!-- 底部四个导航按钮 -->  
8.     <LinearLayout   
9.         android:id="@+id/ll_tabs"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="50dp"  
12.         android:layout_alignParentBottom="true"  
13.         android:orientation="horizontal"  
14.         >  
15.           
16.         <Button   
17.             android:id="@+id/btn_one"  
18.             android:layout_width="0dp"  
19.             android:layout_height="match_parent"  
20.             android:layout_weight="1"  
21.             android:text="One"  
22.             android:background="#009eff"  
23.             android:textColor="#fff"  
24.             />  
25.         <Button   
26.             android:id="@+id/btn_two"  
27.             android:layout_width="0dp"  
28.             android:layout_height="match_parent"  
29.             android:layout_weight="1"  
30.             android:text="Two"  
31.             android:background="#009e00"  
32.             android:textColor="#fff"  
33.             />  
34.         <Button   
35.             android:id="@+id/btn_three"  
36.             android:layout_width="0dp"  
37.             android:layout_height="match_parent"  
38.             android:layout_weight="1"  
39.             android:text="Three"  
40.             android:background="#009eff"  
41.             android:textColor="#fff"  
42.             />  
43.         <Button   
44.             android:id="@+id/btn_four"  
45.             android:layout_width="0dp"  
46.             android:layout_height="match_parent"  
47.             android:layout_weight="1"  
48.             android:text="Four"  
49.             android:background="#009e00"  
50.             android:textColor="#fff"  
51.             />  
52.           
53.     </LinearLayout>  
54.       
55.     <!-- 覆盖在导航按钮上的覆盖层，表示选中项 -->  
56.     <ImageView   
57.         android:id="@+id/imgv_overtab"  
58.         android:layout_width="60dp"  
59.         android:layout_height="50dp"  
60.         android:background="@drawable/red"  
61.         android:layout_alignParentBottom="true"  
62.         />  
63.       
64.     <!-- 导航和视图的分割线 -->  
65.     <View   
66.         android:layout_width="match_parent"  
67.         android:layout_height="2dp"  
68.         android:background="#f00"  
69.         android:layout_above="@id/ll_tabs"  
70.         />  
71.       
72.     <!--   
73.     <RelativeLayout  
74.         android:id="@+id/fragment_content_view"  
75.         android:layout_width="match_parent"  
76.         android:layout_height="match_parent"  
77.         android:layout_above="@id/ll_tabs"  
78.         android:layout_marginBottom="2dp"  
79.         android:background="#fff"  
80.         />  
81.      -->  
82.        
83.      <!-- VIewPager 主要是加载内容的 -->  
84.      <android.support.v4.view.ViewPager  
85.         android:id="@+id/viewpager"  
86.         android:layout_above="@id/ll_tabs"  
87.         android:layout_marginBottom="2dp"  
88.         android:layout_width="match_parent"  
89.         android:layout_height="match_parent"/>  
90.      
91.   
92. </RelativeLayout>  

下面是具体的代码，由于代码比较少，很容易看明白，就不做多的讲述了：

[java]  view plain copy

1. package com.example.switchfragment;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5. import android.os.Bundle;  
6. import android.support.v4.app.Fragment;  
7. import android.support.v4.app.FragmentActivity;  
8. import android.support.v4.app.FragmentManager;  
9. import android.support.v4.app.FragmentStatePagerAdapter;  
10. import android.support.v4.view.ViewPager;  
11. import android.view.View;  
12. import android.view.ViewGroup;  
13. import android.view.View.OnClickListener;  
14. import android.view.animation.TranslateAnimation;  
15. import android.widget.Button;  
16. import android.widget.ImageView;  
17. import android.widget.RelativeLayout;  
18.   
19. public class MainActivity extends FragmentActivity implements OnClickListener{  
20.   
21.     /** 
22.      * 四个导航按钮 
23.      */  
24.     Button buttonOne;  
25.     Button buttonTwo;  
26.     Button buttonThree;  
27.     Button buttonFour;  
28.       
29.     /** 
30.      * 作为页面容器的ViewPager 
31.      */  
32.     ViewPager mViewPager;  
33.     /** 
34.      * 页面集合 
35.      */  
36.     List<Fragment> fragmentList;  
37.       
38.     /** 
39.      * 四个Fragment（页面） 
40.      */  
41.     OneFragment oneFragment;  
42.     TwoFragment twoFragment;  
43.     ThreeFragment threeFragment;  
44.     FourFragment fourFragment;  
45.       
46.     //覆盖层  
47.     ImageView imageviewOvertab;  
48.       
49.     //屏幕宽度  
50.     int screenWidth;  
51.     //当前选中的项  
52.     int currenttab=-1;  
53.       
54.     @Override  
55.     protected void onCreate(Bundle savedInstanceState) {  
56.         super.onCreate(savedInstanceState);  
57.         setContentView(R.layout.activity_main);  
58.         buttonOne=(Button)findViewById(R.id.btn_one);  
59.         buttonTwo=(Button)findViewById(R.id.btn_two);  
60.         buttonThree=(Button)findViewById(R.id.btn_three);  
61.         buttonFour=(Button)findViewById(R.id.btn_four);  
62.           
63.         buttonOne.setOnClickListener(this);  
64.         buttonTwo.setOnClickListener(this);  
65.         buttonThree.setOnClickListener(this);  
66.         buttonFour.setOnClickListener(this);  
67.           
68.         mViewPager=(ViewPager) findViewById(R.id.viewpager);  
69.           
70.         fragmentList=new ArrayList<Fragment>();  
71.         oneFragment=new OneFragment();  
72.         twoFragment=new TwoFragment();  
73.         threeFragment=new ThreeFragment();  
74.         fourFragment=new FourFragment();  
75.           
76.         fragmentList.add(oneFragment);  
77.         fragmentList.add(twoFragment);  
78.         fragmentList.add(threeFragment);  
79.         fragmentList.add(fourFragment);  
80.           
81.         screenWidth=getResources().getDisplayMetrics().widthPixels;  
82.           
83.         buttonTwo.measure(0, 0);  
84.         imageviewOvertab=(ImageView) findViewById(R.id.imgv_overtab);  
85.         RelativeLayout.LayoutParams imageParams=new RelativeLayout.LayoutParams(screenWidth/4, buttonTwo.getMeasuredHeight());  
86.         imageParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);  
87.         imageviewOvertab.setLayoutParams(imageParams);  
88.           
89.         mViewPager.setAdapter(new MyFrageStatePagerAdapter(getSupportFragmentManager()));  
90.     }  
91.   
92.     /** 
93.      * 定义自己的ViewPager适配器。 
94.      * 也可以使用FragmentPagerAdapter。关于这两者之间的区别，可以自己去搜一下。 
95.      */  
96.     class MyFrageStatePagerAdapter extends FragmentStatePagerAdapter  
97.     {  
98.   
99.         public MyFrageStatePagerAdapter(FragmentManager fm)   
100.         {  
101.             super(fm);  
102.         }  
103.   
104.         @Override  
105.         public Fragment getItem(int position) {  
106.             return fragmentList.get(position);  
107.         }  
108.   
109.         @Override  
110.         public int getCount() {  
111.             return fragmentList.size();  
112.         }  
113.           
114.         /** 
115.          * 每次更新完成ViewPager的内容后，调用该接口，此处复写主要是为了让导航按钮上层的覆盖层能够动态的移动 
116.          */  
117.         @Override  
118.         public void finishUpdate(ViewGroup container)   
119.         {  
120.             super.finishUpdate(container);//这句话要放在最前面，否则会报错  
121.             //获取当前的视图是位于ViewGroup的第几个位置，用来更新对应的覆盖层所在的位置  
122.             int currentItem=mViewPager.getCurrentItem();  
123.             if (currentItem==currenttab)  
124.             {  
125.                 return ;  
126.             }  
127.             imageMove(mViewPager.getCurrentItem());  
128.             currenttab=mViewPager.getCurrentItem();  
129.         }  
130.           
131.     }  
132.       
133.     /** 
134.      * 移动覆盖层 
135.      * @param moveToTab 目标Tab，也就是要移动到的导航选项按钮的位置 
136.      * 第一个导航按钮对应0，第二个对应1，以此类推 
137.      */  
138.     private void imageMove(int moveToTab)  
139.     {  
140.         int startPosition=0;  
141.         int movetoPosition=0;  
142.           
143.         startPosition=currenttab*(screenWidth/4);  
144.         movetoPosition=moveToTab*(screenWidth/4);  
145.         //平移动画  
146.         TranslateAnimation translateAnimation=new TranslateAnimation(startPosition,movetoPosition, 0, 0);  
147.         translateAnimation.setFillAfter(true);  
148.         translateAnimation.setDuration(200);  
149.         imageviewOvertab.startAnimation(translateAnimation);  
150.     }  
151.       
152.       
153.     @Override  
154.     public void onClick(View v)  
155.     {  
156.         switch (v.getId())  
157.         {  
158.         case R.id.btn_one:  
159.             changeView(0);  
160.             break;  
161.         case R.id.btn_two:  
162.             changeView(1);  
163.             break;  
164.         case R.id.btn_three:  
165.             changeView(2);  
166.             break;  
167.         case R.id.btn_four:  
168.             changeView(3);  
169.             break;  
170.         default:  
171.             break;  
172.         }  
173.     }  
174.     //手动设置ViewPager要显示的视图  
175.     private void changeView(int desTab)  
176.     {  
177.         mViewPager.setCurrentItem(desTab, true);  
178.     }  
179.   
180. }  

注释写的很详细了，就不多说了。其实也没什么深的技术，就是对ViewPager的使用。

里面还有其他的布局文件以及java文件没有贴出来，有意向的可以到这个地址下载哦，免积分哦！

http://download.csdn.net/detail/u013758734/7477459