UI组件之ViewPager实现程序首次启动引导页面

关键点在于小圆点要跟随图片的切换而变化，那就需要在页面也换的时候对小圆点进行更新操作

界面布局代码

<?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:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center" />    <LinearLayout        android:id="@+id/point_layout"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center|bottom">        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:adjustViewBounds="true"            android:maxHeight="32dp"            android:maxWidth="32dp"            android:src="@drawable/default_holo" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:adjustViewBounds="true"            android:maxHeight="32dp"            android:maxWidth="32dp"            android:src="@drawable/default_holo" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:adjustViewBounds="true"            android:maxHeight="32dp"            android:maxWidth="32dp"            android:src="@drawable/default_holo" />    </LinearLayout></FrameLayout>

图片布局代码，由于三个图片布局代码都一样，这里就展示其中一个

<?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">    <ImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:src="@drawable/baby0"        android:scaleType="centerCrop"        android:id="@+id/image0"        /></LinearLayout>

适配器代码

package com.shake.day11_android_4.adapter;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;import java.util.List;/** * 程序首次启动引导案例. */public class MyPagerAdapter extends PagerAdapter {    private List<View> list;    public MyPagerAdapter(List<View> list) {        this.list = list;    }    @Override    public int getCount() {        return list.size();    }    /**     * 判断视图是否为返回对象     *     * @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 = list.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(list.get(position));    }}

Activity代码

package com.shake.day11_android_4;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import android.widget.LinearLayout;import com.shake.day11_android_4.adapter.MyPagerAdapter;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {    private ViewPager viewPager;    //存放视图    private List<View> list = new ArrayList<View>();    private MyPagerAdapter myPagerAdapter;    private ImageView[] imageViews;    //当前正在显示的卡页    private int currentIndex;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //初始化视图        initViews();        //初始化圆点        initPoint();    }    /**     * 初始化小圆点图片     */    private void initPoint() {        //找到小圆点的父view        LinearLayout point_layout = (LinearLayout) findViewById(R.id.point_layout);        //存放小圆点的数组，有多少张图片，就有多少个小圆点        imageViews = new ImageView[list.size()];        for (int i = 0; i < imageViews.length; i++) {            imageViews[i] = (ImageView) point_layout.getChildAt(i);        }        currentIndex = 0;        //默认设置第一个为选中的圆点        imageViews[currentIndex].setImageResource(R.drawable.touched_holo);    }    /**     * 页面切换的时候，更新小圆点     * @param position     */    public void setCurrentPoint(int position) {        if (currentIndex < 0 || currentIndex == position || currentIndex > imageViews.length - 1) {            return;        }        //比如：页面一此时刚好切换到页面二。那么此时页面一的小圆点就要设置为默认状态        imageViews[currentIndex].setImageResource(R.drawable.default_holo);        //这个时候，刚刚切换到页面二，那么页面二的小圆点就要设置为选中状态        imageViews[position].setImageResource(R.drawable.touched_holo);        //再把position的赋值给currentIndex,因为每次切换的时候，必须保证currentIndex在position的前面一位        currentIndex = position;    }    /**     * 初始化视图     */    private void initViews() {        viewPager = (ViewPager) findViewById(R.id.viewpager);        list.add(getLayoutInflater().inflate(R.layout.image_layout1,null));        list.add(getLayoutInflater().inflate(R.layout.image_layout2,null));        list.add(getLayoutInflater().inflate(R.layout.image_layout3,null));        myPagerAdapter = new MyPagerAdapter(list);        viewPager.setAdapter(myPagerAdapter);        //页面切换的时候的监听事件        viewPager.setOnPageChangeListener(this);    }    /**     * 页面切换的时候的监听事件     *     * @param position     * @param positionOffset     * @param positionOffsetPixels     */    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    }    /**     * 页面切换的时候的监听事件     *     * @param position     */    @Override    public void onPageSelected(int position) {        //页面切换的时候，小圆点的位置也要相应改变        setCurrentPoint(position);    }    /**     * 页面切换的时候的监听事件     *     * @param state     */    @Override    public void onPageScrollStateChanged(int state) {    }}

看到那小圆点了没有