首先让大家有个全局的认识,直接上个项目,看看仅仅通过这几行代码,竟然就能完成如此强悍的功能。下篇再结合API仔细讲讲为什么要这么写。
效果图:
实现了三个view间的相互滑动
第一个VIEW向第二个VIEW滑动 第二个VIEW向第三个VIEW滑动
一、新建项目,引入ViewPager控件
ViewPager。它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换。
1.在主布局文件里加入
1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. tools:context="com.example.testviewpage_1.MainActivity" >
6.
7. <android.support.v4.view.ViewPager
8. android:id="@+id/viewpager"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:layout_gravity="center" />
12.
13. </RelativeLayout>
其中 <Android.support.v4.view.ViewPager /> 是ViewPager对应的组件,要将其放到想要滑动的位置
2、新建三个layout,用于滑动切换的视图
从效果图中也可以看到,我们的三个视图都非常简单,里面没有任何的控件,大家当然可以往里添加各种控件,但这里是个DEMO,只详解原理即可,所以我这里仅仅用背景来区别不用layout布局。
布局代码分别如下:
layout1.xml
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:background="#ffffff"
6. android:orientation="vertical" >
7.
8.
9. </LinearLayout>
layout2.xml
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:background="#ffff00"
6. android:orientation="vertical" >
7.
8.
9. </LinearLayout>
layout3.xml
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:background="#ff00ff"
6. android:orientation="vertical" >
7.
8.
9. </LinearLayout><span style="color:#660000;">
10. </span>
二、代码实战
先上整体代码,然后逐步讲解。
1. package com.example.testviewpage_1;
2. /**
3. * @author harvic
4. * @date 2014.8.9
5. */
6. import java.util.ArrayList;
7. import java.util.List;
8. import java.util.zip.Inflater;
9.
10. import android.app.Activity;
11. import android.os.Bundle;
12. import android.support.v4.view.PagerAdapter;
13. import android.support.v4.view.ViewPager;
14. import android.view.LayoutInflater;
15. import android.view.View;
16. import android.view.ViewGroup;
17.
18.
19. public class MainActivity extends Activity {
20.
21. private View view1, view2, view3;
22. private ViewPager viewPager; //对应的viewPager
23.
24. private List<View> viewList;//view数组
25.
26.
27. @Override
28. protected void onCreate(Bundle savedInstanceState) {
29. super.onCreate(savedInstanceState);
30. setContentView(R.layout.activity_main);
31.
32. viewPager = (ViewPager) findViewById(R.id.viewpager);
33. LayoutInflater inflater=getLayoutInflater();
34. null);
35. null);
36. null);
37.
38. new ArrayList<View>();// 将要分页显示的View装入数组中
39. viewList.add(view1);
40. viewList.add(view2);
41. viewList.add(view3);
42.
43.
44. new PagerAdapter() {
45.
46. @Override
47. public boolean isViewFromObject(View arg0, Object arg1) {
48. // TODO Auto-generated method stub
49. return arg0 == arg1;
50. }
51.
52. @Override
53. public int getCount() {
54. // TODO Auto-generated method stub
55. return viewList.size();
56. }
57.
58. @Override
59. public void destroyItem(ViewGroup container, int position,
60. Object object) {
61. // TODO Auto-generated method stub
62. container.removeView(viewList.get(position));
63. }
64.
65. @Override
66. public Object instantiateItem(ViewGroup container, int position) {
67. // TODO Auto-generated method stub
68. container.addView(viewList.get(position));
69.
70.
71. return viewList.get(position);
72. }
73. };
74.
75.
76. viewPager.setAdapter(pagerAdapter);
77.
78. }
79.
80.
81. }
代码量很小,全部放在了OnCreate()函数中。
1、先看声明的变量的意义:
1. private View view1, view2, view3;
2. private List<View> viewList;//view数组
3. private ViewPager viewPager; //对应的viewPager
首先viewPager对应 <android.support.v4.view.ViewPager/>控件。
view1,view2 ,view3对应我们的三个layout,即layout1.xml,layout2.xml,layout3.xml
viewList是一个View数组,盛装上面的三个VIEW
2、接下来是他们的初始化过程:
1. viewPager = (ViewPager) findViewById(R.id.viewpager);
2. LayoutInflater inflater=getLayoutInflater();
3. view1 = inflater.inflate(R.layout.layout1, null);
4. view2 = inflater.inflate(R.layout.layout2,null);
5. view3 = inflater.inflate(R.layout.layout3, null);
6.
7. viewList = new ArrayList<View>();// 将要分页显示的View装入数组中
8. viewList.add(view1);
9. viewList.add(view2);
10. viewList.add(view3);
初始化过程难度不大,就是将资源与变量联系起来布局,最后将实例化的view1,view2,view3添加到viewList中
3、PageAdapter——PageView的适配器
适配器这个东东想必大家都不莫生,在ListView中也有适配器,listView通过重写GetView()函数来获取当前要加载的Item。而PageAdapter不太相同,毕竟PageAdapter是单个VIew的合集。
PageAdapter 必须重写的四个函数:
- boolean isViewFromObject(View arg0, Object arg1)
- int getCount()
- void destroyItem(ViewGroup container, int position,Object object)
- Object instantiateItem(ViewGroup container, int position)
先看看各个函数,我们上面都做了什么吧:
1. @Override
2. public int getCount() {
3. // TODO Auto-generated method stub
4. return viewList.size();
5. }
getCount():返回要滑动的VIew的个数
1. @Override
2. public void destroyItem(ViewGroup container, int position,
3. Object object) {
4. // TODO Auto-generated method stub
5. container.removeView(viewList.get(position));
6. }
destroyItem():从当前container中删除指定位置(position)的View;
1. @Override
2. public Object instantiateItem(ViewGroup container, int position) {
3. // TODO Auto-generated method stub
4. container.addView(viewList.get(position));
5.
6.
7. return viewList.get(position);
8. }
9. };
instantiateItem():做了两件事,第一:将当前视图添加到container中,第二:返回当前View
1. @Override
2. public boolean isViewFromObject(View arg0, Object arg1) {
3. // TODO Auto-generated method stub
4. return arg0 == arg1;
5. }