封装好的图片滑动框架(AndroidImageSlider)
前言
广告轮播条的重要性不言而喻。在很多类型app中出场率都很高。
今天给大家介绍一个轮播图开源项目，这个项目把轮播图需要的ViewPager跟计时器做了封装，使用极其方便，支持gradle在线依赖。还封装了几种图片滑动动画。
无图无真相:
有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源码下载地址:
开源项目github地址
建议大家直接从开源项目作者的github下载demo，然后运行下，看看效果。我写的demo没有作者的全面，但是也能参考。
如果你想第一时间看我的后期文章，扫码关注公众号，长期推送Android开发文章、最新动态、开源项目，让你各种涨姿势。
Android开发666 - 安卓开发技术分享
扫描二维码加关注
