Android学习之路---使用ViewPager实现引导页

来源：互联网发布：163邮箱群发软件编辑：程序博客网时间：2024/05/17 04:01

　　许多app安装之后都有可滑动的引导页，今天看了视频学习了下ViewPager的使用。
　　
　　下面是我的实现：
　　
　　1.主类：

public class ViewPagerProject extends Activity implements ViewPager.OnPageChangeListener {    private ViewPager viewPager;    private ArrayList<View> views = new ArrayList<>();//装载每个view的容器    private ImageView[] imageViews;//小圆点数组    private int currentIndex;//当前正在显示的卡页    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_view_pager_project);        initView();        initDot();    }    /**     * 初始化底部圆点     */    private void initDot() {        LinearLayout layout = (LinearLayout) findViewById(R.id.dotLayout);//找到盛放四个小圆点的LinearLayout布局        imageViews = new ImageView[views.size()];        for (int i = 0; i < imageViews.length; i++) {            imageViews[i] = (ImageView) layout.getChildAt(i);//得到LinearLayout布局中的每个小圆点图片        }        currentIndex = 0;//设置默认显示第一选项卡        imageViews[currentIndex].setImageResource(R.mipmap.point_focused);//设置默认第一选项卡的小圆点为被选中    }    /**     * 设置小圆点的图片     *     * @param position     */    private void setCurrentIndex(int position) {        if (currentIndex < 0 || currentIndex == position || currentIndex > imageViews.length - 1) {            return;        }        imageViews[currentIndex].setImageResource(R.mipmap.point_unfocused);//将上一个选项卡小圆点设置为未被选中        imageViews[position].setImageResource(R.mipmap.point_focused);//将选中的选项卡的小圆点设置为被选中        currentIndex = position;//将“上一个”选项卡位置设置为当前选项卡位置    }    private void initView() {        viewPager = (ViewPager) findViewById(R.id.viewPager_project);        //将每个选项卡视图添加到views容器中        views.add(getLayoutInflater().inflate(R.layout.layout1, null));        views.add(getLayoutInflater().inflate(R.layout.layout2, null));        views.add(getLayoutInflater().inflate(R.layout.layout3, null));        views.add(getLayoutInflater().inflate(R.layout.layout4, null));        //设置默认显示的选项卡        viewPager.setCurrentItem(1);        viewPager.setAdapter(new MyPagerAdapter());//添加适配器        viewPager.setOnPageChangeListener(this);//注册滑动界面事件    }    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    }    @Override    public void onPageSelected(int position) {        setCurrentIndex(position);    }    @Override    public void onPageScrollStateChanged(int state) {    }    /**     * 自定义适配器     */    class MyPagerAdapter extends PagerAdapter {        @Override        public int getCount() {            return views.size();//返回views容器大小        }        /**         * 判断view和对象是否相等         *         * @param view         * @param object         * @return         */        @Override        public boolean isViewFromObject(View view, Object object) {            return view == object;//常用写法        }        /**         * 实例化选项卡         *         * @param container         * @param position         * @return         */        @Override        public Object instantiateItem(ViewGroup container, int position) {            View view = views.get(position);//得到选项卡视图            container.addView(view);//添加选项卡视图            return view;        }        /**         * 删除选项卡         *         * @param container         * @param position         * @param object         */        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView(views.get(position));//删除视图        }    }}

　　2.主布局文件activity_view_pager_project.xml：最外面是帧布局，里面有个ViewPager，下方是一个LinearLayout，LinearLayout中存放着四张小圆点图片：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_view_pager_project"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="cn.nuc.rxk.highui2.ViewPagerProject">    <android.support.v4.view.ViewPager        android:id="@+id/viewPager_project"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <LinearLayout        android:id="@+id/dotLayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_gravity="bottom|center"        android:gravity="center">        <ImageView            android:layout_width="20dp"            android:paddingRight="10dp"            android:layout_height="20dp"            android:src="@mipmap/point_unfocused" />        <ImageView            android:layout_width="20dp"            android:layout_height="20dp"            android:paddingRight="10dp"            android:src="@mipmap/point_unfocused" />        <ImageView            android:layout_width="20dp"            android:layout_height="20dp"            android:paddingRight="10dp"            android:src="@mipmap/point_unfocused" />        <ImageView            android:layout_width="20dp"            android:layout_height="20dp"            android:paddingRight="10dp"            android:src="@mipmap/point_unfocused" />    </LinearLayout></FrameLayout>

　　3.每张引导图布局layout1.xml（有4个，只是图片换了其他代码相同）：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <ImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="center"        android:scaleType="centerCrop"        android:src="@mipmap/p1" /></LinearLayout>

　　4.效果图：
这里写图片描述

0 0