ViewPager+app新手引导页

ViewPager主要是实现图片的滚动播放，下面对该组件的基本函数进行阐述和实现新手引导页的代码实例
首先xml文件：

<android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:id="@+id/viewpager">

    </android.support.v4.view.ViewPager>

viewpager和listview类似，同样需要自己的适配器，在适配器中需要继承PagerAdapter类，并实现其中的四个基本方法

/**
         * 返回多少page
         */
        @Override
        public int getCount() {
            return Integer.MAX_VALUE;//尽可能的大，实现伪循环，返回的页数

        }
        /**
         * 返回true：表示不创建，使用缓存。false：重新创建
         * view:当前滑动的view
         * object:将要进入的新创建view，由instantitateitem方法创建
         */
        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return  arg0==arg1;
        }
        /**
         * 销毁page
         * position：当前需要销毁的第几个page
         * object：当前需要销毁的page
         */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View)object);
        }
        /**
         * 类似BaseAdapter的getView方法,用来将数据设置给View
         * 由于最多只能存在三个界面，所以不需要holderview
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            //将adapter填充到view当中
            View view = View.inflate(MainActivity.this, R.layout.adapter, null);
            //找到布局当中的控件，注意强转的时候添加view。
            ImageView imageView = (ImageView)view.findViewById(R.id.iv);
            //将获得的list集合元素填充到对象
            adbean ad = list.get(position%list.size());
            //从获得的对象中将数据填充到控件当中
            imageView.setImageResource(ad.getIconResId());
            //将view加入到viewpager中
            container.addView(view);
            //System.out.println("position"+position);
            return view;
        }

下面新手引导页实现原理，通过sharepreferences来存储是否访问，难点是通过页面滑动的百分比来计算小圆点的滑动位置。viewpager可以调用setOnPageChangeListener（new GuidePageListener()）；方法来获取页面的滑动百分比，其中new对象是继承OnPageChangeListener。

//viewpager的滑动监听
    class GuidePageListener implements OnPageChangeListener{
        //滑动状态变化
        @Override
        public void onPageScrollStateChanged(int arg0) {        
        }
        //滑动事件
        @Override
        //参数1：当前位置，参数2：移动百分比，参数3：移动距离
        public void onPageScrolled(int arg0, float arg1, int arg2) {
            int len = (int)(mPointWidth * arg1) + arg0 * mPointWidth;
            RelativeLayout.LayoutParams Params = (RelativeLayout.LayoutParams)viewRedPoint
                    .getLayoutParams();//获取红点的布局参数
            Params.leftMargin = len;//设置左边距
            viewRedPoint.setLayoutParams(Params);//重新给小红点布局参数
        }
        //页面选中
        @Override
        public void onPageSelected(int arg0) {
            //如果是最后一个界面显示按钮
            if(arg0 == mImageIds.length-1){
                btStart.setVisibility(View.VISIBLE);
            }else{
                btStart.setVisibility(View.INVISIBLE);
            }
        }       
    }

完整代码实例

import java.util.ArrayList;
import com.lzz.zhihuibeijing.utils.PrefUtils;
import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
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;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.view.Window;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

public class GuideActivity extends Activity {
    private static final int[] mImageIds = new int[]{R.drawable.guide_1,
        R.drawable.guide_2,R.drawable.guide_3};
    private ViewPager vpGuide;
    private LinearLayout llpointgroup;//引导圆点的父控件
    private ArrayList<ImageView> mImageViewList;
    private int mPointWidth;
    private View viewRedPoint;
    private Button btStart;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题
        setContentView(R.layout.activity_guide);
        vpGuide = (ViewPager) findViewById(R.id.vp_guide);
        llpointgroup = (LinearLayout) findViewById(R.id.ll_point_group);
        viewRedPoint = findViewById(R.id.view_red_point);
        btStart = (Button) findViewById(R.id.bt_start);
        btStart.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                //更新sp,表示已经展示过新手引导
                PrefUtils.setBoolean(GuideActivity.this, "is_user_guide_showed", true);

                startActivity(new Intent(GuideActivity.this,MainActivity.class));
                finish();
            }
        });
        initViews();
        vpGuide.setAdapter(new GuideAdapter());
        vpGuide.setOnPageChangeListener(new GuidePageListener());
    }

    /**
     * 初始化界面
     */
    private void initViews(){
        mImageViewList = new ArrayList<ImageView>();
        //初始化三個界面
        for (int i = 0; i < mImageIds.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setBackgroundResource(mImageIds[i]);
            mImageViewList.add(imageView);
        }
        //初始化引导页的小圆点
        for (int i = 0; i < mImageIds.length; i++) {
            View point = new View(this);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20,20);
            point.setBackgroundResource(R.drawable.shape_point_gray);//设置默认圆点   
            if(i > 0){
                params.leftMargin = 10;//设置圆点间隔
            }
            point.setLayoutParams( params);//设置圆点大小
            llpointgroup.addView(point);//将小圆点设置到线性布局当中

        }
        //获取视图树，执行回调方法，对layout结束时间进行监听
        llpointgroup.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

            @Override
            public void onGlobalLayout() {
                //关闭监听事件
                llpointgroup.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                mPointWidth = llpointgroup.getChildAt(1).getLeft()
                        - llpointgroup.getChildAt(0).getLeft();
            }
        });
    }


    /**
     * viewpager的适配
     * @author lizezheng
     *
     */
    class GuideAdapter extends PagerAdapter{
        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return mImageIds.length;
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {

            return arg0==arg1;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(mImageViewList.get(position));
            return mImageViewList.get(position);
        }
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View)object);
        }

    }

    //viewpager的滑动监听
    class GuidePageListener implements OnPageChangeListener{
        //滑动状态变化
        @Override
        public void onPageScrollStateChanged(int arg0) {        
        }
        //滑动事件
        @Override
        //参数1：当前位置，参数2：移动百分比，参数3：移动距离
        public void onPageScrolled(int arg0, float arg1, int arg2) {
            int len = (int)(mPointWidth * arg1) + arg0 * mPointWidth;
            RelativeLayout.LayoutParams Params = (RelativeLayout.LayoutParams)viewRedPoint
                    .getLayoutParams();//获取红点的布局参数
            Params.leftMargin = len;//设置左边距
            viewRedPoint.setLayoutParams(Params);//重新给小红点布局参数
        }
        //页面选中
        @Override
        public void onPageSelected(int arg0) {
            //如果是最后一个界面显示按钮
            if(arg0 == mImageIds.length-1){
                btStart.setVisibility(View.VISIBLE);
            }else{
                btStart.setVisibility(View.INVISIBLE);
            }
        }       
    }
}