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方法。