ViewPager+app新手引导页

来源：互联网发布：win10 安装ubuntu 分区编辑：程序博客网时间：2024/05/16 11:11

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);            }        }           }}

1 0