安卓ViewPager系列自定义效果，助你打造炫酷轮播图——索引。

   大家好，我是安卓小菜，在接下来的博客里将为大家带来ViewPager一系列的效果集锦。俗话说万事开头难，第一次写博客分享自己的所得，我也在脑海里构思良久要如何去展示去表达，既不会过于细节导致内容臃肿，也不会过于片面引得读者摸不着头脑。所以，我决定借鉴前辈的方案，在某系列博客之前做一个相关的索引，把将要展示的内容的主题展示在这里，方便读者根据需要一步一步有条不紊的学习。最后，既然是分享博客那就是大家一起学习，如果我的博客真的能帮助大家学到一点东西我很开心，如果我有讲解错误或不妥的地方也很欢迎大家指出，互相学习！
前言：你若花开，清风自来。

系列文章

 《安卓ViewPager系列自定义效果，助你打造炫酷轮播图——ViewPager+Glide+PhotView 图片相册加载效果》

 《安卓ViewPager系列自定义效果，助你打造炫酷轮播图——ViewPager 无限循环+自动轮播效果》

 《安卓ViewPager系列自定义效果，助你打造炫酷轮播图——ViewPager 3d画廊效果》 

《安卓ViewPager系列自定义效果，助你打造炫酷轮播图——ViewPager+RadioButton+Fragment 实现底部导航栏效果》 

ViewPager概述

ViewPager是安卓自带的一个ViewGroup控件在V4包下面，ViewPager中可以管理多个view，不同的view之间通过左右滑动切换，并提供了类似于轮播图一样的默认动画。我们在实际的开发中大部分情况下都是使用ViewPager实现的轮播图效果，ViewPager和ListView一样通过适配器填充数据，不仅如此ViewPager还可以和Fragment搭配使用，使用ViewPager来管理Fragment的生命周期是比较推荐的一种做法。ViewPager的默认效果图：

和之前说的一样，通过左右滑动的手势可以切换View并且提供了一个默认的切换动画，是不是很炫酷呢？当然这只是最基本的动画，后面还有更炫的3d翻转。

ViewPager简单使用

  之前我们讲过，ViewPager要添加子View和ListView一样是需要使用适配器来填充数据的只是使用的适配器不同，适配器负责将数据源绘制成View然后添加到ViewPager中去。所以一个适配器中我们需要两个东西，一是数据源 用来提供我们需要填充的数据，我们例子中的数据源就是指2张图片btimap的集合，二是Context上下文对象我们知道安卓里的布局加载和实例化View都是需要使用的Context对象的。有了这两个对象，我们就可以自定义适配器了。接下来我们继承下ViewPager的PagerAdapter这个抽象类。

PagerAdapter适配器：

public class ViewPageAdapter extends PagerAdapter{
    //图像数据集合
    private List<Bitmap> mImages;
    //上下文对象
    private Context mContext;

    public ViewPageAdapter(List<Bitmap> images, Context mContext) {
        this.mImages = images;
        this.mContext = mContext;
    }
    //这里返回的是ViewPager的子View数，ViewPager会根据这个值创建子View的数量
    //我们就让他返回集合的长度
    @Override
    public int getCount() {
        return mImages.size();
    }

    /**
     * 用于判断当前view和object是否有关联
     * 谷歌推荐以view作为key,object是下面instantiateItem的返回值就是添加进去的view
     * 所以这里直接判断view和object是否相等
     * @param view
     * @param object 下面instantiateItem()返回的object
     * @return
     */
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    /**
     * 实例化显示的View对象并返回一个与该view相关的key
     * 这里直接返回该view作为key
     * @param container
     * @param position
     * @return
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        //通过代码方式得到一个ImageView对象，需要传入Context对象
        ImageView imageView = new ImageView(mContext);
        //将bitmap放到imageView中去
        imageView.setImageBitmap(mImages.get(position));
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        //上面我们只是得到了一个ImageView对象，接下来我们还需要把ImageView添加到ViewPager中去
        container.addView(imageView);
        //返回该view作为与之关联的key
        return imageView;
    }

    /**
     * 从ViewPager中移除一个view
     * @param container
     * @param position
     * @param object
     */
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //这里的object还是一个key，但是我们返回的key就是一个ImageView所以直接移除这个object即可
        container.removeView((View) object);
    }
}

PagerAdapter适配器只需要覆盖getCount，isViewFromObject，instantiateItem，destroyItem四个方法即可。具体每个方法的意义上面的注释上都有。

有了适配器以后，我们就可以为ViewPager填充数据了。接下来我们在xml文件里给Activity添加一个ViewPager。

activity_view_pager_demo.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zcy.hnkjxy.demo.ViewPagerDemoActivity">
    <android.support.v4.view.ViewPager
        android:id="@+id/vpImages"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

很简单，只需要在根布局下面放一个ViewPager标签给个ID值和宽高就ok了，接下来我们在Activity中去使用它们。

ViewPagerDemoActivity.java

public class ViewPagerDemoActivity extends AppCompatActivity {
    //ViewPager对象
    private ViewPager mVpImages;
    //ViewPager的适配器
    private ViewPageAdapter mAdapter;
    //Bitmap集合
    private List<Bitmap> mImages;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager_demo);
        //1.首先创建一个放bitmap的集合
        mImages = new ArrayList<>();
        //2.通过BitmapFactory将资源文件转化为Bitmap对象，然后将Bitmap对象添加到集合里
        mImages.add(BitmapFactory.decodeResource(getResources(),R.drawable.xz_five));
        mImages.add(BitmapFactory.decodeResource(getResources(),R.drawable.xz_two));
        //3.实例化适配器，传入我们的数据集合和Context对象。
        mAdapter = new ViewPageAdapter(mImages,this);
        //4.通过findViewById获得viewPager对象
        mVpImages = (ViewPager) findViewById(R.id.vpImages);
        //5.为该ViewPager设置我们的适配器
        mVpImages.setAdapter(mAdapter);
    }
}

这里就是跟着注释的5步走就完成了ViewPager的数据填充，需要注意的是使用BitmapFactory将资源文件转化为Bitmap时，不能选择太大的图片，否则会造成内存溢出(oom)错误。因为这里主要讲ViewPager的基本使用，所以未对图片的加载作处理，在下面的内容中会介绍如何用主流的图片加载框架去加载图片。

Glide简单介绍

这里我们只简单介绍下glide，对这个库感兴趣的同学可以自行google。

在项目中使用gilde：

dependencies {
    compile 'com.github.bumptech.glide:glide:3.5.2'
    compile 'com.android.support:support-v4:22.0.0'
}

使用项目的build.gradle中添加如上代码，然后同步一下即可。

什么是glide

glide是谷歌主推的一个图片加载库，它以强大的图片加载功能和简洁的使用方式，迅速成为总多图片加载库中的佼佼者。

接下来我们看看使用glide加载图片到底有多简洁：

Glide.with(context)
    .load("http://inthecheesefactory.com/uploads/source/glidepicasso/cover.jpg")
    .into(ivImg);

你没看错就是三行代码！如果不是刻意写成这样，仅仅只需要一行代码即可完成图片加载！而且这还是一个功能健壮的图片加载，支持缓存，支持git动态图，支持本地资源和网络资源加载，支持和Activity或者Fragment生命周期绑定！！！下面我们一步步看下每个参数的含义，with()中传入的是上下文对象，当我们传入的是fragment或者activity时Glide还会自动绑定他们的生命周期，避免资源浪费。第二个load()方法中传入的是资源的地址，可以是网络资源也可以是本地的资源。第三个into()从字面来理解是加入到一个对象里，没错就是这样，这里需要不图片加载到那个控件里就给传入哪个控件。所以这一行的代码意思是：把地址是  http://inthecheesefactory.com/uploads/source/glidepicasso/cover.jpg 的图片加载到ivImg这个控件里去。有没有很爽！？完全不要考虑其他的东西，Glide全在内部处理好了！！！

我们来看一个使用Glide加载图片的小例子：

activity_glide_image.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zcy.hnkjxy.demo.GlideImageActivity">
    <ImageView
        android:id="@+id/imgGlid"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <Button
        android:id="@+id/btnLoadImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="加载图片"/>
</FrameLayout>

在xml文件里我们就放一个用来存放图片的imageView和一个开始的按钮，这里我们可以看到明明设置了imageView为match_parent为何加载的效果却没有全屏呢？是因为Glide会自动计算imageView的大小并将图片合适的加载进去，如果我们给imageView设置一个

 android:scaleType="fitXY"//属性则会全屏显示。

GlideImageActivity.java

public class GlideImageActivity extends AppCompatActivity {
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_glide_image);
        //获取imageView对象
        imageView = (ImageView) findViewById(R.id.imgGlid);
        //给按钮添加单击事件，当单击按钮时开始加载图片。
        findViewById(R.id.btnLoadImage).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Glide.with(GlideImageActivity.this).load("http://inthecheesefactory.com/uploads/source/glidepicasso/cover.jpg").into(imageView);
            }
        });
    }
}

是不是很简单？附上一个设置了 android:scaleType="fitXY" 的效果

好了简单的使用就介绍到这里，当然glide的强大远远不在于此对这个库有兴趣的同学请自行google，本文就不占篇幅详解啦~

PhotoView简单介绍

github地址：https://github.com/chrisbanes/PhotoView

jar包地址：http://download.csdn.net/download/qq_34122135/10005088

什么是photoivew

photoview是安卓上的一个开源图片控件，它继承自ImageView。实现了手势放大缩小图片，并可以和ViewPager一起使用不冲突的强大控件。

当photoview和viewpager相结合使用，就可以实现图片相册浏览的效果。下面演示下photoview的基本使用：

通过双击或者手势能放大和缩下图片，并且可以拖动去查看细节。 使用方法如下：

    <!--使用PhotoView作为图片的容器，记住要设置为src不要设置为background-->
    <uk.co.senab.photoview.PhotoView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/xz_three"/>

设置src属性不要设置background

好了，今天的博客就写到这里了，接下来的国庆假期中，在不影响正常休息的情况下 尽量把这个系列写完。有什么讲述不对的地方请您指出，有迷惑的地方也可以留言发问，我看到会第一时间回复。最后，谢谢大家的支持，谢谢！！！