First, let us have a global understanding, direct to the last project, to see that only through these lines of code, can we complete such a powerful function. In the next part, I will combine API to explain why I write this way carefully.

Design sketch:

The sliding between three view s is realized.

The first VIEW slides to the second VIEW and the second VIEW slides to the third VIEW.

   

1. New project, introducing ViewPager control

ViewPager. It is a class of additional packages in google SDk, which can be used to switch between screens.

1. Add in the main layout file

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 /> is the component corresponding to ViewPager, which is placed where you want to slide.

2. Create three new layout s for sliding switching views

As can be seen from the effect map, our three views are very simple. There are no controls in them. Of course, you can add various controls to them. But here is a DEMO, just explain the principle, so I just use the background to distinguish the layout without layout.

The layout codes are as follows:

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>  

II. Code Actual Warfare

First, the whole code, and then step by step.

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;  //The corresponding viewPager  
23.       
24.     private List<View> viewList;//view array  
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.         view1 = inflater.inflate(R.layout.layout1, null);  
35.         view2 = inflater.inflate(R.layout.layout2,null);  
36.         view3 = inflater.inflate(R.layout.layout3, null);  
37.           
38.         viewList = new ArrayList<View>();//Load the View to be paginated into an array  
39.         viewList.add(view1);  
40.         viewList.add(view2);  
41.         viewList.add(view3);  
42.           
43.           
44.         PagerAdapter pagerAdapter = 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. }  

The amount of code is very small, all in the OnCreate() function.

1. Look first at the meaning of the declared variable:

1. private View view1, view2, view3;  
2. private List<View> viewList;//view array  
3. private ViewPager viewPager;  //The corresponding viewPager  

First viewPager corresponds to the <android.support.v4.view.ViewPager/> control.

View1, view2, and view3 correspond to our three layouts: layout1. xml, layout2. xml, and layout3. xml.

The viewList is a View array that dresses up the three VIEW above.

2. Next is their initial process:

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>();//Load the View to be paginated into an array  
8. viewList.add(view1);  
9. viewList.add(view2);  
10. viewList.add(view3);  

Initialization process is not very difficult, that is, to link resources and variables layout, and finally to instantiate view1,view2,view3 added to the viewList

3. PageAdapter - PageView's adapter

The adapter must be something that everyone can't live without. There are adapters in ListView. ListView obtains the Item to load by rewriting the GetView () function. PageAdapter is not the same, after all, PageAdapter is a collection of individual VIew s.

PageAdapter must rewrite four functions:

• boolean isViewFromObject(View arg0, Object arg1)
• int getCount() 
• void destroyItem(ViewGroup container, int position,Object object)
• Object instantiateItem(ViewGroup container, int position)

Let's look at the functions first. What have we done above?

1. @Override  
2. public int getCount() {  
3.     // TODO Auto-generated method stub  
4.     return viewList.size();  
5. }  

getCount(): Returns the number of VIew s to slide

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 (): Delete the View at the specified position from the current container;

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(): Two things are done. First, add the current View to the container, and second, return to the current View.

1. @Override  
2. public boolean isViewFromObject(View arg0, Object arg1) {  
3.     // TODO Auto-generated method stub  
4.     return arg0 == arg1;  
5. }  

isViewFromObject(): Let's not explain this function first. Now you know that it needs to be rewritten like this. We'll rewrite it later.