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 aPagerAdapter 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 areFragmentPagerAdapter,FragmentStatePagerAdapter,FragmentPagerAdapter, andFragmentStatePagerAdapter; 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方法。