封装好的图片滑动框架(AndroidImageSlider)

前言

广告轮播条的重要性不言而喻。在很多类型app中出场率都很高。

今天给大家介绍一个轮播图开源项目，这个项目把轮播图需要的ViewPager跟计时器做了封装，使用极其方便，支持gradle在线依赖。还封装了几种图片滑动动画。

无图无真相:

banner

有10多种滑动动画，跟两种滚动状态。能满足大部分需求。

如何使用

首先在线依赖三个库

compile 'com.squareup.picasso:picasso:2.3.2'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.daimajia.slider:library:1.1.5@aar'

Picasso是Square公司出品的一款非常优秀的开源图片加载库，是目前Android开发中超级流行的图片加载库之一。nineoldandroids也是github比较有名的开源动画库，我们这个图片滑动动画就是基于这个动画库。slider就是Banner开源库了。基于前面的Picasso跟nineoldandroids才达到效果。

需要在AndroidManifest.xml中加入访问网络权限。毕竟图片有可能给一个url在线显示。

 <uses-permission android:name="android.permission.INTERNET" />

activity_main.xml 首页布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <com.daimajia.slider.library.SliderLayout
            android:id="@+id/slider"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            custom:auto_cycle="true"
            custom:indicator_visibility="visible"
            custom:pager_animation="Accordion"
            custom:pager_animation_span="1100" />

        <com.daimajia.slider.library.Indicators.PagerIndicator
            android:id="@+id/custom_indicator2"
            style="@style/AndroidImageSlider_Corner_Oval_Orange"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="20dp" />
    </RelativeLayout>
</RelativeLayout>

最外层是RelativeLayout，里面嵌套一个RelativeLayout，设置高度200dp，这个也就是我们广告Banner的高度，里面有两个控件SliderLayout跟PagerIndicator。PagerIndicator负责Banner。PagerIndicator是指示器，表示当前选中的状态。

MainActivity.java 首页

首先在onCreate方法中初始化控件，把描述跟图片URl放map里面。然后遍历Map，在for循环中新建每一页滑动的TextSliderView,把map的key作为图片描述，设置图片url，设置图片缩放类型等。最后调用SliderLayout的addSlider添加进去。我们还可以设置SliderLayout的滑动动画，设置指示器样式，设置图片描述显示动画，设置滚动时间，也是计时器时间，添加页面改变监听函数。

mDemoSlider = (SliderLayout)findViewById(R.id.slider);
HashMap<String,String> urlMaps = new HashMap<>();
urlMaps.put("Hannibal", "http://static2.hypable.com/wp-content/uploads/2013/12/hannibal-season-2-release-date.jpg");
urlMaps.put("Big Bang Theory", "http://tvfiles.alphacoders.com/100/hdclearart-10.png");
urlMaps.put("House of Cards", "http://cdn3.nflximg.net/images/3093/2043093.jpg");

for(String name : urlMaps.keySet()){
    TextSliderView textSliderView = new TextSliderView(this);
    textSliderView
            .description(name)//描述
            .image(urlMaps.get(name))//image方法可以传入图片url、资源id、File
            .setScaleType(BaseSliderView.ScaleType.Fit)//图片缩放类型
            .setOnSliderClickListener(onSliderClickListener);//图片点击
    textSliderView.bundle(new Bundle());
    textSliderView.getBundle().putString("extra",name);//传入参数
    mDemoSlider.addSlider(textSliderView);//添加一个滑动页面
}

mDemoSlider.setPresetTransformer(SliderLayout.Transformer.Accordion);//滑动动画
//        mDemoSlider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);//默认指示器样式
mDemoSlider.setCustomIndicator((PagerIndicator)findViewById(R.id.custom_indicator2));//自定义指示器
mDemoSlider.setCustomAnimation(new DescriptionAnimation());//设置图片描述显示动画
mDemoSlider.setDuration(4000);//设置滚动时间，也是计时器时间
mDemoSlider.addOnPageChangeListener(onPageChangeListener);

Banner的Item点击监听，也就是ViewPager的某一页点击监听。

private BaseSliderView.OnSliderClickListener onSliderClickListener=new BaseSliderView.OnSliderClickListener() {
        @Override
        public void onSliderClick(BaseSliderView slider) {
            Toast.makeText(MainActivity.this,slider.getBundle().get("extra") + "",
                    Toast.LENGTH_SHORT).show();
        }
};

页面改变监听,ViewPager是我们经常用到的控件。对这个回调应该很熟悉了。。不过多解释。

//页面改变监听
private ViewPagerEx.OnPageChangeListener onPageChangeListener=new ViewPagerEx.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

    @Override
    public void onPageSelected(int position) {
        Log.d("ansen", "Page Changed: " + position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {}
};

滑动动画

调用SliderLayout的setPresetTransformer可以设置滑动动画，这个方法传入的是一个Transformer对象。这个对象是一个枚举类型，有以下值:
- Transformer.Default 默认
- Transformer.Accordion
- Transformer.Background2Foreground
- Transformer.CubeIn
- Transformer.DepthPage
- Transformer.Fade
- Transformer.FlipHorizontal
- Transformer.FlipPage
- Transformer.Foreground2Background
- Transformer.RotateDown
- Transformer.RotateUp
- Transformer.Stack
- Transformer.Tablet
- Transformer.ZoomIn
- Transformer.ZoomOutSlide
- Transformer.ZoomOut

大家可以设置不同的值看看什么样的效果,也可以下载作者github的demo，文章末尾我会贴出这个项目的github地址。

设置图片描述显示时动画

setCustomAnimation(new DescriptionAnimation()); 描述默认动画
setCustomAnimation(new ChildAnimationExample());

指示器自定义属性

PagerIndicator(指示器)类的自定义属性比较多,我们讲几个常用的。

custom:selected_color 选中颜色
custom:selected_drawable 选中图片
custom:selected_height 选中高度
custom:selected_padding_left 选中指示器左内边距
custom:selected_padding_right 选中指示器右内边距
custom:selected_width 选中宽度
custom:shape 指示器。。的类型,有oval跟rect两种
custom:unselected_color 未选中指示器颜色
custom:unselected_height 未选中高度
custom:unselected_padding_left 未选中指示器左内边距
custom:unselected_padding_right 未选中指示器右内边距
custom:unselected_width 未选中宽度

源码下载

我写的demo源码下载地址:

https://github.com/ansen666/ImageSlider

开源项目github地址

https://github.com/daimajia/AndroidImageSlider

建议大家直接从开源项目作者的github下载demo，然后运行下，看看效果。我写的demo没有作者的全面，但是也能参考。

如果你想第一时间看我的后期文章，扫码关注公众号，长期推送Android开发文章、最新动态、开源项目，让你各种涨姿势。

      Android开发666 - 安卓开发技术分享
             扫描二维码加关注

Android开发666