Android中启动页ViewPager和ViewFlipper带指示器

首先我们来分析一下，想要实现启动页的功能，大家第一个想到的就是使用ViewPager，使用ViewPager确实是一种比较好的方式，而且思路也是比较清晰的。今天我们就一起来学习一下，使用ViewPager和ViewFlipper实现启动页带小点功能。
先展示一下图片，看看是不是你想要的效果。

1、ViewPager和ViewFlipper的区别

ViewFlipper继承ViewAnimator，切换view的时候是有动画效果的，适合做ppt，多界面的程序欢迎引导界面，算是个轻量级的组件，适合展示静态数据，少量数据。

ViewPager继承ViewGroup。看官网描述，这货和Fragment是好搭档，Fragment有自己的生命周期。也就是说ViewPager更适用复杂的视图切换，而且Viewpager有自己的adapter，这也让其适应复杂对象，实现数据的动态加载。

2、使用ViewPager来展示mipmap中或者网络中的图片（Volley）

首先，我们来理一下有几个注意点。
①先在布局文件中，画出简单的布局。
②滑动ViewPager时候，底部的小点也会跟着变化。
③点击小点时，ViewPager也会变化。
好了，现在我们来开始写代码，代码中的注释比较详细，大家自己看。
1、布局文件中，画出布局。
layout中，activity_view_pager_demo.xml文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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="com.llay.admin.mydemo.ViewPagerDemoActivity">    <android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:layout_width="match_parent"        android:layout_height="match_parent">    </android.support.v4.view.ViewPager>    <LinearLayout        android:id="@+id/ll"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_marginBottom="20dp"        android:orientation="horizontal">        <ImageView            android:id="@+id/iv1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:layout_margin="5dp"            android:background="@drawable/point_selector"            android:clickable="true"            android:padding="5dp" />        <ImageView            android:id="@+id/iv2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:layout_margin="5dp"            android:background="@drawable/point_selector"            android:clickable="true"            android:padding="5dp" />        <ImageView            android:id="@+id/iv3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:layout_margin="5dp"            android:background="@drawable/point_selector"            android:clickable="true"            android:padding="5dp" />        <ImageView            android:id="@+id/iv4"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:layout_margin="5dp"            android:background="@drawable/point_selector"            android:clickable="true"            android:padding="5dp" />    </LinearLayout></RelativeLayout>

解释：代码中使用相对布局，这样，下面的指示器就可以显示在ViewPager上面，这样便于效果的实现。我这里下面的指示器是固定写的，根据图片的多少进行添加和删除。
最后一个layout文件单独写的：
activity_view_pager4.xm

public class ViewPagerDemoActivity extends Activity implements ViewPager.OnPageChangeListener, View.OnClickListener {    //设置ViewPager和view视图    private ViewPager viewPager;    private int[] imageId = {R.mipmap.launcher_b, R.mipmap.launcher_c, R.mipmap.launcher_b};    private List<View> viewList;    private List<ImageUrlBean> imageList;    private View lastView;    //设置小圆点    private ImageView[] points;//存放小圆圈数组    private int currentIndex = 0;//当前页面,默认首页    //使用Volley加载网络图片    private RequestQueue mQueue;    private ImageLoader mImageLoader;    ImageLoader.ImageListener imageListener;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_view_pager_demo);        mQueue = Volley.newRequestQueue(this);//        initViewPage();        initNetView();        initPoints();    }    //这里是加载mipmap中图片的方式，初始化ViewPager及其图片资源    private void initViewPage() {        viewPager = (ViewPager) findViewById(R.id.view_pager);        viewList = new ArrayList<>();        //添加对应的view进入集合（数据源）        for (int i = 0; i < imageId.length; i++) {            ImageView imageView = new ImageView(this);            imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));            imageView.setScaleType(ImageView.ScaleType.FIT_XY);//设置缩放样式            imageView.setImageResource(imageId[i]);            viewList.add(imageView);        }        //另外增加最后一个能点击进入应用的视图        lastView = View.inflate(this, R.layout.activity_view_pager4, null);        Button button = (Button) lastView.findViewById(R.id.startbutton);        viewList.add(lastView);        //设置最后一个视图上的点击事件        button.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(ViewPagerDemoActivity.this, "应用开始！", Toast.LENGTH_SHORT).show();            }        });        //设置viewpager的适配器和数据源        ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(viewList);        viewPager.setAdapter(viewPagerAdapter);        viewPager.setOnPageChangeListener(this);    }//这里是加载网络图片的方式，初始化ViewPager控件及其图片资源    private void initNetView() {        viewPager = (ViewPager) findViewById(R.id.view_pager);        ImageUrlBean imageUrlBean1 = new ImageUrlBean("http://www.qq6300.com/uploads/allimg/130131/1-1301311G339A9.jpg");        ImageUrlBean imageUrlBean2 = new ImageUrlBean("http://img4.duitang.com/uploads/item/201412/13/20141213114411_QEshv.jpeg");        ImageUrlBean imageUrlBean3 = new ImageUrlBean("http://pic27.nipic.com/20130329/10041959_102531181000_2.jpg");        imageList = new ArrayList<>();        imageList.add(imageUrlBean1);        imageList.add(imageUrlBean2);        imageList.add(imageUrlBean3);        //添加对应的view进入集合（数据源）        viewList = new ArrayList<>();        for (int i = 0; i < imageList.size(); i++) {            ImageView imageView = new ImageView(this);            imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));            imageView.setScaleType(ImageView.ScaleType.FIT_XY);//设置缩放样式            mImageLoader = new ImageLoader(mQueue, new ImageLoader.ImageCache() {                @Override                public Bitmap getBitmap(String s) {                    return null;                }                @Override                public void putBitmap(String s, Bitmap bitmap) {                }            });            imageListener = ImageLoader.getImageListener(imageView, R.mipmap.ic_launcher, R.mipmap.ic_launcher);            mImageLoader.get(imageList.get(i).getImageUrl(), imageListener);            viewList.add(imageView);        }        //另外增加最后一个能点击进入应用的视图        lastView = View.inflate(this, R.layout.activity_view_pager4, null);        Button button = (Button) lastView.findViewById(R.id.startbutton);        viewList.add(lastView);        //设置最后一个视图上的点击事件        button.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(ViewPagerDemoActivity.this, "应用开始！", Toast.LENGTH_SHORT).show();            }        });        //设置viewpager的适配器和数据源        ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(viewList);        viewPager.setAdapter(viewPagerAdapter);        viewPager.setOnPageChangeListener(this);    }    //初始化下标点    private void initPoints() {        LinearLayout linearLayout = (LinearLayout) findViewById(R.id.ll);        points = new ImageView[4];        //初始化布局中的小圆点ImageView控件        for (int i = 0; i < points.length; i++) {            points[i] = (ImageView) linearLayout.getChildAt(i);//遍历LinearLayout下的所有ImageView子节点            points[i].setEnabled(true);//设置当前状态为允许点击（可点，灰色）            points[i].setOnClickListener(this);//设置点击监听            //额外设置一个标识符，以便点击小圆点时跳转对应页面            points[i].setTag(i);//标识符与圆点顺序一致        }        currentIndex = 0;        points[currentIndex].setEnabled(false);//设置首页为当前页(不可点，黑色)    }    @Override    public void onClick(View v) {        viewPager.setCurrentItem((int) v.getTag());    }    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    }    @Override    public void onPageSelected(int position) {        //当前页卡被选择时,position为当前页数        points[position].setEnabled(false);//不可点击        points[currentIndex].setEnabled(true);//恢复之前页面状态        currentIndex = position;    }    @Override    public void onPageScrollStateChanged(int state) {    }}

解释：这里有几个地方需要注意的，
1、这里添加数据源的方式，有两种方式：mipmap文件中和网络上的图片地址，我想，大家使用启动页功能的时候，一定是想要动态的从网络上获取吧，这样才能够获得最新的数据。
2、使用加载网路图片功能，作者使用的是Volley框架，别问我为啥选这个啊，因为其他还没用过，哈哈。
3、好了，这里我们遇到了文章开头时遇到的问题，当滑动ViewPager时，指示器也要跟着滑动，这里我们继承ViewPager.OnPageChangeListener，实现一些常用的方法，代码中都有注释，请自行查看。
4、还有一个是点击指示器的时候，ViewPager也跟着一起滑动。这里我们继承View.OnClickListener方法，这个方法就是点击事件，viewPager.setCurrentItem((int) v.getTag());便可以跳转到所点击的界面，然后指示器在跳到指定界面之后，也会有相应的颜色变化。

3、ViewPager的适配器代码
ViewPagerAdapter.javpublic class ViewPagerAdapter extends PagerAdapter {
private List list;

public ViewPagerAdapter(List list) {    this.list = list;}//获取要滑动的控件的数量，在这里我们以滑动的广告栏为例，那么这里就应该是展示的广告图片的ImageView数量@Overridepublic int getCount() {    return list.size();}//来判断显示的是否是同一张图片，这里我们将两个参数相比较返回即可@Overridepublic boolean isViewFromObject(View view, Object object) {    return view == object;//官方demo给出的建议写法}//当要显示的图片可以进行缓存的时候，会调用这个方法进行显示图片的初始化，我们将要显示的ImageView加入到ViewGroup中，然后作为返回值返回即可@Overridepublic Object instantiateItem(ViewGroup container, int position) {    container.addView(list.get(position));    return list.get(position);}//PagerAdapter只缓存三张要显示的图片，如果滑动的图片超出了缓存的范围，就会调用这个方法，将图片销毁@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {    container.removeView(list.get(position));}

}示器的布局。
现在，我们来实现一下指示器的圆点，之前我一直以为，指示器的圆点就是让UI画出来的，原来还可以通过这种方式来实现。直接上代码。
未点击的圆点。
drawable文件中。v_point_up.xml文件

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval">    <corners android:radius="0.5dp" />    <solid android:color="#AAFFFFFF" /></shape>

点击的圆点。
drawable文件中。v_point_down.xml文件

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval">    <corners android:radius="0.5dp" />    <solid android:color="#55000000" /></shape>

主布局文件中的point_selector.xml文件，这个文件的功能是在选择指示器之后，可以让指示器的颜色用代码改变。
drawbale文件中。point_selector.xml文件

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/v_point_up" android:state_enabled="true"></item>    <item android:drawable="@drawable/v_point_down" android:state_enabled="false"></item></selector>

解释：请注意这里是android:state_enabled属性，表示状态是否可以点击。

2、使用ViewFlipper来展示mipmap中的图片

这里我没有用ViewFlipper来展示网络图片
1、布局文件：
同上ViewPager中的主布局文件和第四个布局文件，还有指示器的布局文件。
2、ViewFlipperActivity.java文件

public class ViewFlipperActivity extends Activity implements GestureDetector.OnGestureListener, View.OnClickListener {    //设置ViewFlipper和view视图    private ViewFlipper viewFlipper;    private int[] imageId = {R.mipmap.launcher_b, R.mipmap.launcher_c, R.mipmap.launcher_b};    View lastView;    //设置小圆点    private ImageView[] points;//存放小圆圈数组    private int currentIndex = 0;//当前页面,默认首页    //设置手势    GestureDetector gestureDetector;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_view_flipper);        gestureDetector = new GestureDetector(ViewFlipperActivity.this);        initViewFlipper();        initPoints();    }    //初始化ViewFlipper    private void initViewFlipper() {        viewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);        //添加对应的view进入集合（数据源）        for (int i = 0; i < imageId.length; i++) {            ImageView imageView = new ImageView(this);            imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));            imageView.setScaleType(ImageView.ScaleType.FIT_XY);//设置缩放样式            imageView.setImageResource(imageId[i]);            viewFlipper.addView(imageView);        }        //另外增加最后一个能点击进入应用的视图        lastView = View.inflate(this, R.layout.activity_view_pager4, null);        Button button = (Button) lastView.findViewById(R.id.startbutton);        viewFlipper.addView(lastView);        //设置最后一个视图上的点击事件        button.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(ViewFlipperActivity.this, "应用开始！", Toast.LENGTH_SHORT).show();            }        });    }    //初始化下标点    private void initPoints() {        LinearLayout linearLayout = (LinearLayout) findViewById(R.id.ll);        points = new ImageView[4];        //初始化布局中的小圆点ImageView控件        for (int i = 0; i < points.length; i++) {            points[i] = (ImageView) linearLayout.getChildAt(i);//遍历LinearLayout下的所有ImageView子节点            points[i].setEnabled(true);//设置当前状态为允许点击（可点，灰色）            points[i].setOnClickListener(this);//设置点击监听            //额外设置一个标识符，以便点击小圆点时跳转对应页面            points[i].setTag(i);//标识符与圆点顺序一致        }        currentIndex = 0;        points[currentIndex].setEnabled(false);//设置首页为当前页(不可点，黑色)    }    @Override    public void onClick(View v) {        //点击小点，改变小点的状态，并且改变viewFlipper中子view的显示        viewFlipper.setDisplayedChild((int) v.getTag());        points[(int) v.getTag()].setEnabled(false);        points[currentIndex].setEnabled(true);        currentIndex = (int) v.getTag();    }    //用户轻触触摸屏，由1个MotionEvent ACTION_DOWN触发    @Override    public boolean onDown(MotionEvent e) {        return false;    }    //用户轻触触摸屏，尚未松开或拖动，由一个1个MotionEvent ACTION_DOWN触发    //注意和onDown()的区别，强调的是没有松开或者拖动的状态    @Override    public void onShowPress(MotionEvent e) {    }    //用户（轻触触摸屏后）松开，由一个1个MotionEvent ACTION_UP触发    @Override    public boolean onSingleTapUp(MotionEvent e) {        return false;    }    //用户按下触摸屏，并拖动，由1个MotionEvent ACTION_DOWN, 多个ACTION_MOVE触发    @Override    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {        return false;    }    //用户长按触摸屏，由多个MotionEvent ACTION_DOWN触发    @Override    public void onLongPress(MotionEvent e) {    }    //用户按下触摸屏、快速移动后松开，由1个MotionEvent ACTION_DOWN, 多个ACTION_MOVE,1个ACTION_UP触发    @Override    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {        if (e2.getX() - e1.getX() > 120) {            //为了避免能够一直向右滑动            if (viewFlipper.getDisplayedChild() != 0) {                //向右滑动，设置滑动动画                viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ViewFlipperActivity.this,                        R.anim.push_right_in));                viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ViewFlipperActivity.this,                        R.anim.push_right_out));                //这个要判断，不然就会跳到第一个                viewFlipper.showPrevious();                //当前页卡被选择时,viewFlipper.getDisplayedChild()为当前页数                points[viewFlipper.getDisplayedChild()].setEnabled(false);//不可点击                points[currentIndex].setEnabled(true);//恢复之前页面状态                currentIndex = viewFlipper.getDisplayedChild();                return true;            }        } else if (e2.getX() - e1.getX() < 120) {            //为了避免能够一直向左滑动            if (viewFlipper.getDisplayedChild() != viewFlipper.getChildCount() - 1) {                //向左滑动，设置滑动动画                viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ViewFlipperActivity.this,                        R.anim.push_left_in));                viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ViewFlipperActivity.this,                        R.anim.push_left_out));                //这个要判断，不然就会跳到最后一个                viewFlipper.showNext();                //当前页卡被选择时,viewFlipper.getDisplayedChild()为当前页数                points[viewFlipper.getDisplayedChild()].setEnabled(false);//不可点击                points[currentIndex].setEnabled(true);//恢复之前页面状态                currentIndex = viewFlipper.getDisplayedChild();                return true;            }        }        return false;    }    //用户轻触触摸屏，由1个MotionEvent ACTION_DOWN触发    @Override    public boolean onTouchEvent(MotionEvent event) {        return this.gestureDetector.onTouchEvent(event);    }}

解释：这里我用ViewFlipper实现这个启动页的功能，一开始以为应该会比ViewPager实现容易，但是自己后来弄了一下，感觉自己还是不怎么能弄出来。我来讲一下有几处要注意的。
1、使用ViewFlipper来实现启动页功能，需要使用手势。让类继承GestureDetector.OnGestureListener接口，实现一些必要的方法。主要是onFling（）方法。
2、为了让ViewFlipper不能一直的滑动下去。需要判断是不是第一个和最后一个，使用 if (viewFlipper.getDisplayedChild() != 0)判断是不是第一个，使用if (viewFlipper.getDisplayedChild() != viewFlipper.getChildCount() - 1)判断是不是最后一个。
3、在滑动了ViewFlipper之后，我们也要考虑和ViewPager相同的两个问题。ViewFlipper滑动带动指示器，指示器点击带动ViewFlpper。
使用

//当前页卡被选择时,viewFlipper.getDisplayedChild()为当前页数                points[viewFlipper.getDisplayedChild()].setEnabled(false);//不可点击                points[currentIndex].setEnabled(true);//恢复之前页面状态                currentIndex = viewFlipper.getDisplayedChild();

来使ViewFlipper滑动，带动指示器的滑动。
使用

//点击小点，改变小点的状态，并且改变viewFlipper中子view的显示        viewFlipper.setDisplayedChild((int) v.getTag());        points[(int) v.getTag()].setEnabled(false);        points[currentIndex].setEnabled(true);        currentIndex = (int) v.getTag();

来点击指示器，带动ViewFlipper的跳转。

注意：可能是方法不同的原因，在ViewPager中，setCurrentItem(int item)方法就可以直接调用第几个界面，然后再触发onPageSelected（int position）方法，使得指示器按钮变化。而在ViewFlipper中，setDisplayedChild(int childid）方法只能调用第几个界面，不能触发onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)方法，onFling（MotionEvent e1, MotionEvent e2, float velocityX, float velocityY）方法只能通过滑动来获得。

4、需要注意的是，使用手势的时候，一定要实现这个方法，不然手势不能生效。原因，查了好多，都是说未知。

//用户轻触触摸屏，由1个MotionEvent ACTION_DOWN触发    @Override    public boolean onTouchEvent(MotionEvent event) {        return this.gestureDetector.onTouchEvent(event);    }