ViewPager 实现多种效果的用法

android-support-v4.jar 是谷歌提供给我们的一个兼容低版本安卓设备的软件包，里面包囊了只有在 Android 3.0 以上可用的API。而 ViewPager 就是其中之一。利用它，我们可以做很多事情，从最简单的导航，到页面菜单等等。

准备

在使用ViewPager之前，需要在 build.gradle 中加入如下语句：

compile 'com.android.support:support-v4:25.3.0'
compile 'com.github.hackware1993:MagicIndicator:1.5.0'

其中第一行是 android-support-v4 软件包，ViewPager 就在里面；第二行是一个开源的导航器，通过它，我们可以实现各种导航效果。

ViewPager -- 基本用法

ViewPager 的基本用法可以分为以下步骤：

1. 在 layout 文件中定义一个 ViewPager 组件；
2. 在 Activity（或Fragment等）中取得 ViewPager 的引用；
3. 为 ViewPager 设置适配器；
4. [为 ViewPager 设置滑动特效]；
5. [为 ViewPager 设置监听器]。

其中最后两步是可选的，但如果没有最后两步，那我们的 ViewPager 就仅仅是一个普普通通的 ViewPager 了。

下面我们来写一个最简单的例子，这里事先在drawable文件夹中放入了一些图片，并且这些图片都以 `page` 开头：

 

<?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.zzw.activity.PageActivity">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/view_pager"
        android:background="@android:color/black" />
</RelativeLayout>

 

我们在布局文件里定义了一个 ViewPager 组件，然后需要在 Activity 中对它进行设置：

 

pager=(ViewPager) findViewById(R.id.view_pager);
PagerAdapter adapter=new ViewAdapter(pages);
pager.setAdapter(adapter);

class ViewAdapter extends PagerAdapter {
    private List<View> datas;

    public ViewAdapter(List<View> list) {
        datas=list;
    }

    @Override
    public int getCount() {
        return datas.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view=datas.get(position);
        container.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(datas.get(position));
    }
}

 

嗯，现在我们就完成了一个“图片浏览器”，效果和下图类似：

PS：你可能注意到，我们的效果图底部有一个导航器，这是因为这个效果图是加上导航器之后的效果