ViewPager实现移折通左右滑动引导界面

得到的

实现左右滑动界面的方法有很多种，如以下几种实现方法。

第一、android第三方控件ViewPager实现。

第二、android的ViewFlipper组件实现。

天本文将详细介绍怎样利用第三方控件Viewpager实现移折通欢迎界面，ViewFlipper将在我的其他博文详细介绍。首先，看下效果图：







然后，看下Viewpager在官网的api如下：

public class

ViewPager

extends
ViewGroup

java.lang.Object
↳	android.view.View
	↳	android.view.ViewGroup
		↳	android.support.v4.view.ViewPager

Class Overview

Layout manager that allows the user to flip left and right through pages of data. You supply an implementation of a

PagerAdapter

to generate the pages
that the view shows.

Note this class is currently under early design and development. The API will likely change in later updates of the compatibility library, requiring changes to the source code of apps when they are compiled against the newer version.

ViewPager is most often used in conjunction with

Fragment

, which is a convenient way to supply and manage the lifecycle of each page. There are standard adapters
implemented for using fragments with the ViewPager, which cover the most common use cases. These are

FragmentPagerAdapter

,

FragmentStatePagerAdapter

,

FragmentPagerAdapter

,
and

FragmentStatePagerAdapter

; each of these classes have simple code showing how to build a full user interface with them.

Here is a more complicated example of ViewPager, using it in conjuction with

ActionBar

tabs. You can find other examples of using ViewPager in the API 4+ Support Demos and API 13+ Support Demos sample code.

最后，这里我就不用详细介绍具体意思，每个程序员必须要能够看到这些英文API，我就具体做一个Demo。

第一，新建一个testViewPager项目，截图如下：



第二，在项目新建一个libs文件，把android-support-v4.jar文件拷贝到该文件夹下，然后点击右键，buid以下jar文件。

第三，编写一个布局文件，act_textviewpager_layout.xml，代码如下：

<?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">

<FrameLayout

android:id="@+id/act_merchant_main_ad"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<android.support.v4.view.ViewPager

android:id="@+id/vp"

android:layout_width="fill_parent"

android:layout_height="fill_parent" />

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="35dip"

android:layout_gravity="bottom"

android:layout_marginBottom="3dip"

android:gravity="center"

android:orientation="vertical">

<LinearLayout

android:id="@+id/act_merchant_main_ad_focus_box"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="3dip"

android:gravity="center">

</LinearLayout>

</LinearLayout>

</FrameLayout>

<Button

android:id="@+id/welcome_btn_start"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:layout_marginBottom="55dip"

android:paddingLeft="40dip"

android:paddingRight="40dip"

android:background="@drawable/welcome_btn_start"

android:textColor="#FFFFFFFF"

android:textSize="30sp" />

</RelativeLayout>

第四，在activity类实现具体代码如下：

package cn.easytom.anywhere;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.Map;

import cn.easytom.anywhere.R;

import cn.easytom.anywhere.common.BaseActivity;

import cn.easytom.anywhere.tools.LogControl;

import android.content.SharedPreferences.Editor;

import android.os.Bundle;

import android.os.Message;

import android.os.Parcelable;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v4.view.ViewPager.OnPageChangeListener;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup.LayoutParams;

import android.view.ViewGroup;

import android.widget.Button;

import android.widget.FrameLayout;

import android.widget.ImageView;

import android.widget.LinearLayout;

/**

* 引导页

*

* @author tony

*/

public class Activity_Welcome extends BaseActivity

{

private final int[] welcomeImg = {R.drawable.welcome_2, R.drawable.welcome_3, R.drawable.welcome_4};

private final int[] mADFocusBg = {R.drawable.act_welcome_normal,R.drawable.act_welcome_focuse};

private ViewPager mViewPager;

private ArrayList<ImageView> mListsViews=new ArrayList<ImageView>();

private Button btn_start;

private Map<Integer, ImageView> mADFocusIV=new HashMap<Integer, ImageView>();

private FrameLayout mADLayout; //welcome box

private ImageView mWecomeImageView;

@Override

protected void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

super.setContentView(R.layout.act_common_welcome);

super.mContext = this;

super.KEY_DOWN_KEYCODE_BACK = true;

this.initView();

}

private void initView()

{

this.mViewPager=(ViewPager) findViewById(R.id.vp);

mADLayout=(FrameLayout) findViewById(R.id.act_merchant_main_ad);

LayoutParams vfparams = this.mADLayout.getLayoutParams();

this.btn_start = (Button)findViewById(R.id.welcome_btn_start);

LinearLayout mLL = (LinearLayout) findViewById(R.id.act_merchant_main_ad_focus_box);

for (int i = 0; i < welcomeImg.length; i++) {

this.mWecomeImageView= new ImageView(super.mContext);

mWecomeImageView.setBackgroundResource(welcomeImg[i]);

mWecomeImageView.setLayoutParams(vfparams);

mListsViews.add(mWecomeImageView);

// init ViewFlipper FocusIV

ImageView focuseIV = new ImageView(mContext);

LogControl.i("====resID=="+i, "Activity_Welcome");

focuseIV.setImageResource(0 == i ? this.mADFocusBg[1]: this.mADFocusBg[0]);

focuseIV.setPadding(8, 0, 8, 0);

mLL.addView(focuseIV);

this.mADFocusIV.put(i, focuseIV);

}

this.btn_start.setOnClickListener( new OnClickListener() {

@Override

public void onClick(View v) {

startActivity(Activity_MainTab.class, null, true);

}

});

this.setStartState( false );

this.mViewPager.setAdapter(new MyAdapter());

MyPageChangeListener listener=null;

listener=new MyPageChangeListener();

this.mViewPager.setOnPageChangeListener(listener);

}

/**

* 当ViewPager中页面的状态发生改变时调用

*

* @author Administrator

*

*/

private class MyPageChangeListener implements OnPageChangeListener {

private int oldPosition = 0;

/**

* This method will be invoked when a new page becomes selected.

* position: Position index of the new selected page.

*/

public void onPageSelected(int position) {

LogControl.i("==oldPosition=="+oldPosition+"====onPageSelected===position"+position+"====madDataList===="+welcomeImg.length, "Activity_Welcome");

if (welcomeImg.length>0) {

btn_start.setVisibility(View.GONE);

mADFocusIV.get(oldPosition).setImageResource(mADFocusBg[0]);

mADFocusIV.get(position).setImageResource(mADFocusBg[1]);

oldPosition = position;

}

if (position>=welcomeImg.length-1) {

btn_start.setVisibility(View.VISIBLE);

}

}

public void onPageScrollStateChanged(int arg0) {

}

public void onPageScrolled(int arg0, float arg1, int arg2) {

}

}

/**

* 填充ViewPager页面的适配器

*

* @author Administrator

*

*/

private class MyAdapter extends PagerAdapter {

@Override

public int getCount() {

return welcomeImg.length;

}

@Override

public Object instantiateItem(View arg0, int arg1) {

LogControl.i("====instantiateItem===arg1==="+arg1+"=====count===="+getCount(), "Activity_Merchant_Main");

arg0.setTag(mWecomeImageView);

((ViewPager) arg0).addView(mListsViews.get(arg1));

return mListsViews.get(arg1);

}

@Override

public int getItemPosition(Object object) {

// TODO Auto-generated method stub

return POSITION_NONE;

}

@Override

public void destroyItem(View arg0, int arg1, Object arg2) {

LogControl.i("====destroyItem===arg1==="+arg1+"=====count===="+getCount(), "Activity_Merchant_Main");

if (welcomeImg.length>0) {

((ViewPager) arg0).removeView((View) arg2);

}

}

@Override

public boolean isViewFromObject(View arg0, Object arg1) {

return arg0 == arg1;

}

@Override

public void restoreState(Parcelable arg0, ClassLoader arg1) {

}

@Override

public Parcelable saveState() {

return null;

}

@Override

public void startUpdate(View arg0) {

}

@Override

public void finishUpdate(View arg0) {

}

}

private void setStartState( boolean isShow )

{

this.btn_start.setVisibility( isShow ? View.VISIBLE : View.GONE );

}

@Override

protected boolean onKeyDownByBack()

{

Editor editor = BaseApplication.getInstance().getPrefEdit();

editor.clear();

editor.commit();

super.finish();

return true;

}

// ==============================================================

private final int WHAT_HIDDEN = 0;

private final int WHAT_SHOW = 1;

@Override

public void handleMessage(Message msg)

{

switch (msg.what)

{

case WHAT_HIDDEN:

this.setStartState( false );

break;

case WHAT_SHOW:

this.setStartState( true );

break;

}

}

}

Viewpager控件跟Listview组件差不多，也是需要通过适配器类进行把数据适配到viewpager组件中显示，MyAdapter就是继承PagerAdapter类的内部类，我们必须实现以下方法：getCount()、instantiateItem(View arg0, int arg1)、getItemPosition(Object object)、destroyItem(View arg0,
int arg1, Object arg2)、isViewFromObject(View arg0, Object arg1)这些方法。MyPageChangeListener类是当Viewpager页面发生改变的时候调用MyPageChangeListener的onPageSelected方法。