android ViewPager多页面手势滑动

ViewPager,它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换,这个附加包是android-support-v4.jar.
 现在来看看它的实现过程：
 1、界面设计很简单，第一行三个头标，第二行页卡内容展示。
 
 

01	<?xml version="1.0" encoding="utf-8"?>

02	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

03	xmlns:umadsdk="http://schemas.android.com/apk/res/com.LoveBus"

04	android:layout_width="fill_parent"

05	android:layout_height="fill_parent"

06	android:orientation="vertical" >

07

08	<LinearLayout

09	android:id="@+id/linearLayout1"

10	android:layout_width="fill_parent"

11	android:layout_height="100.0dip"

12	android:background="#FFFFFF" >

13

14

<TextView

15	android:id="@+id/text1"

16	android:layout_width="fill_parent"

17	android:layout_height="fill_parent"

18	android:layout_weight="1.0"

19	android:gravity="center"

20	android:text="页卡1"

21	android:textColor="#000000"

22	android:textSize="22.0dip" />

23

24

<TextView

25	android:id="@+id/text2"

26	android:layout_width="fill_parent"

27	android:layout_height="fill_parent"

28	android:layout_weight="1.0"

29	android:gravity="center"

30	android:text="页卡2"

31	android:textColor="#000000"

32	android:textSize="22.0dip" />

33

34	</LinearLayout>

35

36	<android.support.v4.view.ViewPager

37	android:id="@+id/vPager"

38	android:layout_width="wrap_content"

39	android:layout_height="wrap_content"

40	android:layout_gravity="center"

41	android:layout_weight="1.0"

42	android:background="#000000"

43	android:flipInterval="30"

44	android:persistentDrawingCache="animation" />

45

46	</LinearLayout>

   
 2、我们要展示两个页卡，所以还需要两个页卡内容的界面设计布局： 
  
 

01	<?xml version="1.0" encoding="utf-8"?>

02	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

03	xmlns:umadsdk="http://schemas.android.com/apk/res/com.LoveBus"

04	android:layout_width="fill_parent"

05	android:layout_height="fill_parent"

06	android:orientation="vertical" >

07

08

<TextView

09	android:id="@+id/text1"

10	android:layout_width="fill_parent"

11	android:layout_height="fill_parent"

12	android:layout_weight="1.0"

13	android:gravity="center"

14	android:text="页卡1"

15	android:textColor="#000000"

16	android:textSize="22.0dip" />

17

18	</LinearLayout>

  
 

01	<?xml version="1.0" encoding="utf-8"?>

02	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

03	xmlns:umadsdk="http://schemas.android.com/apk/res/com.LoveBus"

04	android:layout_width="fill_parent"

05	android:layout_height="fill_parent"

06	android:orientation="vertical" >

07

08

<TextView

09	android:id="@+id/text1"

10	android:layout_width="fill_parent"

11	android:layout_height="fill_parent"

12	android:layout_weight="1.0"

13	android:gravity="center"

14	android:text="页卡1"

15	android:textColor="#000000"

16	android:textSize="22.0dip" />

17

18	</LinearLayout>

  
 3、定义好了布局文件，我们来看看代码： 
  
 我们的ViewPager实现需要下面这几个 
 

1	private TextView t1, t2; // 页卡头标

2	private ViewPager mPager; //页卡内容

3	private List<View> listViews;  // Tab页面列表

     
     
 我们首先来看页卡头标t1，t2，就是显示tab选项卡的那两项，当然你可以在这里设置它的背景，选中及不选中背景不同来区分，要更好的效果还可以模拟手机新浪微博中 
的这种效果 
    

   


    
 可以直接在背景图片中设置。 
  
 然后我们再看重点ViewPager，它的表现类似ListView，只不过它是横向滑动的，既然和ListView相似，那么必有相同之处，它的实现也要Item View适配器来装配， 
它装配的是每个选项卡对应的视图，即：

          

01	listViews = new ArrayList<View>();

02	LayoutInflater mInflater = getLayoutInflater();

03	listViews.add(mInflater.inflate(R.layout.lay1, null));

04	listViews.add(mInflater.inflate(R.layout.lay2, null));

05	listViews.add(mInflater.inflate(R.layout.lay3, null));

06	mPager.setAdapter(new MyPagerAdapter(listViews));

07

08

09

10	public class MyPagerAdapter extends PagerAdapter{

11

12	private List<View> mListViews;

13

14

/**

15

*

16	*@desc  构造方法，参数是每页要显示的视图

17

*

18

*/

19	public MyViewPagerAdapter(List<View> mListViews) {

20	this.mListViews = mListViews;

21

}

22

23

@Override

24	public void destroyItem(ViewGroup container, int position, Object object)   {

25	container.removeView(mListViews.get(position));//删除页卡

26

}

27

28

29

/**

30

*

31	*@desc  实例化页卡

32

*

33

*/

34

@Override

35	public Object instantiateItem(ViewGroup container, int position) {

36	container.addView(mListViews.get(position), 0);

37	return mListViews.get(position);

38

}

39

40

@Override

41	public int getCount() {

42	return  mListViews.size();//返回页卡的数量

43

}

44

45

@Override

46	public boolean isViewFromObject(View arg0, Object arg1) {

47	return arg0==arg1;//官方提示这样写

48

}

49

}

 

 设置了适配器之后是可以显示了，但像ListView那样我们还需要点击事件，不同的是，这里是选中和页面改变事件： 
    

view source

print ?

1	viewPager.setCurrentItem(0);

2	viewPager.setOnPageChangeListener(new MyOnPageChangeListener());

==============================================================================

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#000000"
    android:orientation="vertical" >


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:padding="10dip"
        />    
    
    
    <LinearLayout 
        android:id="@+id/ll" 
        android:orientation="horizontal" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginBottom="24.0dip" 
        android:layout_alignParentBottom="true" 
        android:layout_centerHorizontal="true">
        
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="5.0dip"
            android:src="@drawable/dot" />


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="5.0dip"
            android:src="@drawable/dot" />


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="5.0dip"
            android:src="@drawable/dot" />


    </LinearLayout>


</RelativeLayout>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

package com.example.viewpapertest;


import java.util.ArrayList;
import java.util.List;


import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;


public class Guide extends Activity implements OnClickListener,
OnPageChangeListener ,OnTouchListener{


private ViewPager viewPager;


private ViewPagerAdapter viewPagerAdapter;


private List<View> views;


private ImageView[] dots;


private int currentIndex;

private int lastX = 0;


private static final int[] pics = {R.drawable.g2, R.drawable.g3, R.drawable.g4 };


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_guide);
views = new ArrayList<View>();


LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.FILL_PARENT);


for (int i = 0; i < pics.length; i++) {
ImageView iv = new ImageView(this);
iv.setLayoutParams(mParams);
iv.setImageResource(pics[i]);
views.add(iv);
}
viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPagerAdapter = new ViewPagerAdapter(views);
viewPager.setOnTouchListener(this);
viewPager.setAdapter(viewPagerAdapter);
viewPager.setOnPageChangeListener(this);


initBottomDots();


}


private void initBottomDots() {
LinearLayout ll = (LinearLayout) findViewById(R.id.ll);
dots = new ImageView[pics.length];
for (int i = 0; i < pics.length; i++) {
dots[i] = (ImageView) ll.getChildAt(i);
dots[i].setEnabled(true);
dots[i].setOnClickListener(this);
dots[i].setTag(i);
}
currentIndex = 0;
dots[currentIndex].setEnabled(false);
}


@Override
public void onClick(View v) {
int position = (Integer) v.getTag();
setCurView(position);
setCurDot(position);
}


@Override
public void onPageScrollStateChanged(int state) {
}


@Override
public void onPageScrolled(int index, float arg1, int dis) {
}


@Override
public void onPageSelected(int index) {
setCurDot(index);
}


private void setCurDot(int positon) {
if (positon < 0 || positon > pics.length - 1 || currentIndex == positon) {
return;
}
dots[positon].setEnabled(false);
dots[currentIndex].setEnabled(true);
currentIndex = positon;
}


private void setCurView(int position) {
if (position < 0 || position >= pics.length) {
return;
}
viewPager.setCurrentItem(position);
}


@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
lastX = (int)event.getX();
break;
case MotionEvent.ACTION_MOVE:
if((lastX - event.getX()) >100 && (currentIndex == views.size() -1)){
Toast.makeText(this, "在此处添加界面跳转代码哦！", Toast.LENGTH_LONG).show();
this.finish();
}
break;
default:
break;
}
return false;
}


}

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

package com.example.viewpapertest;


import java.util.List;


import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;


public class ViewPagerAdapter extends PagerAdapter {


private List<View> views;


public ViewPagerAdapter(List<View> views) {
this.views = views;
}
@Override
public int getCount() {
return views.size();
}

@Override
public void startUpdate(View container) {
}



@Override
public Object instantiateItem(View container, int position) {
((ViewPager)container).addView(views.get(position), 0);
return views.get(position);
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return (arg0 == arg1);
}

@Override
public Parcelable saveState() {
return super.saveState();
}


@Override
public void finishUpdate(View container) {
}

@Override
public void restoreState(Parcelable state, ClassLoader loader) {
super.restoreState(state, loader);
}

@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager)container).removeView(views.get(position));
}


}