轮播图在APP开发里面,几乎成为一个必备的功能,今天介绍一下AndroidImageSlider,
使用起来相对简便,开发快速,感谢android程序员们的开源精神。
一、首先引入主要相关的库:
dependencies {
compile 'com.squareup.picasso:picasso:2.3.2'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.daimajia.slider:library:1.1.5@aar'
}
二、布局展示:
根布局加上
xmlns:custom="http://schemas.android.com/apk/res-auto"
轮播图的位置:
关键参数设置:
custom:pager_animation=”Accordion” 切换动画效果
custom:auto_cycle=”true” 自动播放
custom:indicator_visibility=”visible” 显示指示器
指示器的位置:
1.默认指示器:
style="@style/AndroidImageSlider_Corner_Oval_Orange"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
/>
可用 style设置基本参数
默认提供三种:
AndroidImageSlider_Corner_Oval_Orange,AndroidImageSlider_Attractive_Rect_Blue,AndroidImageSlider_Magnifier_Oval_Black
2.自定义指示器:
custom:shape=”oval” 或 rect 圆形,矩形
custom:selected_drawable="@mipmap/bird"当前的点
三、设置使用:
private SliderLayout mDemoSlider1;
mDemoSlider1 = (SliderLayout)findViewById(R.id.slider1);
HashMap url_maps = new HashMap();
url_maps.put("Hannibal", "http://static2.hypable.com/wp-content/uploads/2013/12/hannibal-season-2-release-date.jpg");
url_maps.put("Big Bang Theory", "http://tvfiles.alphacoders.com/100/hdclearart-10.png");
url_maps.put("House of Cards", "http://cdn3.nflximg.net/images/3093/2043093.jpg");
url_maps.put("Game of Thrones", "http://images.boomsbeat.com/data/images/full/19640/game-of-thrones-season-4-jpg.jpg");
// HashMap file_maps = new HashMap();
// file_maps.put("Hannibal",R.drawable.nemo);
// file_maps.put("Big Bang Theory",R.drawable.up);
// file_maps.put("House of Cards",R.drawable.wall);
// file_maps.put("Game of Thrones", R.drawable.toystory);
for(String name : url_maps.keySet()){
// DefaultSliderView sliderView = new DefaultSliderView(this);
TextSliderView textSliderView = new TextSliderView(this);
// initialize a SliderLayout
textSliderView
.description(name)
.image(url_maps.get(name))
.setScaleType(BaseSliderView.ScaleType.Fit)
.setOnSliderClickListener(this);//点击轮播图
//add your extra information 点击图片时可用到
textSliderView.bundle(new Bundle());
textSliderView.getBundle()
.putString("extra",name);
mDemoSlider1.addSlider(textSliderView);
}
// 设置默认过渡效果(可在xml中设置)
//mDemoSlider.setPresetTransformer(SliderLayout.Transformer.Default);
mDemoSlider1.setPresetTransformer(SliderLayout.Transformer.Accordion);
// 设置默认指示器位置(默认指示器白色,位置在sliderlayout底部)
mDemoSlider1.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
// 设置自定义指示器(位置自定义)
mDemoSlider1.setCustomIndicator((PagerIndicator) findViewById(R.id.custom_indicator));
// 设置TextView自定义动画
mDemoSlider1.setCustomAnimation(new DescriptionAnimation());
//mDemoSlider2.setCustomAnimation(new ChildAnimationExample()); // 多种效果,进入该类修改,参考效果github/daimajia/AndroidViewAnimations
// 设置持续时间
mDemoSlider1.setDuration(2000);
mDemoSlider1.addOnPageChangeListener(this);//轮播图轮播监听
相关介绍:
过渡效果: mDemoSlider.setPresetTransformer(“?????”).
相关值有:
Default("Default"),
Accordion("Accordion"),
Background2Foreground("Background2Foreground"),
CubeIn("CubeIn"),
DepthPage("DepthPage"),
Fade("Fade"),
FlipHorizontal("FlipHorizontal"),
FlipPage("FlipPage"),
Foreground2Background("Foreground2Background"),
RotateDown("RotateDown"),
RotateUp("RotateUp"),
Stack("Stack"),
Tablet("Tablet"),
ZoomIn("ZoomIn"),
ZoomOutSlide("ZoomOutSlide"),
ZoomOut("ZoomOut");
即为:"Default","Accordion", "Background2Foreground","CubeIn","DepthPage","Fade","FlipHorizontal", "FlipPage","Foreground2Background","RotateDown","RotateUp","Stack", "Tablet","ZoomIn","ZoomOutSlide","ZoomOut";
mDemoSlider.setCustomIndicator((PagerIndicator) findViewById(R.id.custom_indicator));
设置自定义指示器样式和位置,在上面表述的xml中(2.自定义指示器:),
mDemoSlider.setCustomAnimation(new DescriptionAnimation());
mDemoSlider.setCustomAnimation(new ChildAnimationExample());
自定义指示器动画,这里提供了一个:
package com.ddv.www.myshufflingfiguredemo;
import android.util.Log;
import android.view.View;
import com.daimajia.androidanimations.library.attention.StandUpAnimator;
import com.daimajia.slider.library.Animations.BaseAnimationInterface;
public class ChildAnimationExample implements BaseAnimationInterface {
private final static String TAG = "ChildAnimationExample";
@Override
public void onPrepareCurrentItemLeaveScreen(View current) {
View descriptionLayout = current.findViewById(com.daimajia.slider.library.R.id.description_layout);
if(descriptionLayout!=null){
current.findViewById(com.daimajia.slider.library.R.id.description_layout).setVisibility(View.INVISIBLE);
}
Log.e(TAG,"onPrepareCurrentItemLeaveScreen called");
}
@Override
public void onPrepareNextItemShowInScreen(View next) {
View descriptionLayout = next.findViewById(com.daimajia.slider.library.R.id.description_layout);
if(descriptionLayout!=null){
next.findViewById(com.daimajia.slider.library.R.id.description_layout).setVisibility(View.INVISIBLE);
}
Log.e(TAG,"onPrepareNextItemShowInScreen called");
}
@Override
public void onCurrentItemDisappear(View view) {
Log.e(TAG,"onCurrentItemDisappear called");
}
@Override
public void onNextItemAppear(View view) {
View descriptionLayout = view.findViewById(com.daimajia.slider.library.R.id.description_layout);
if(descriptionLayout!=null){
view.findViewById(com.daimajia.slider.library.R.id.description_layout).setVisibility(View.VISIBLE);
// ValueAnimator animator = ObjectAnimator.ofFloat(
// descriptionLayout, "y", -descriptionLayout.getHeight(),
// 0).setDuration(500);
// animator.start();
// new BounceInAnimator().animate(descriptionLayout);
new StandUpAnimator().animate(descriptionLayout);
}
Log.e(TAG,"onCurrentItemDisappear called");
}
}
注意,项目中要引入:
compile 'com.daimajia.androidanimations:library:1.0.3@aar'
4.mDemoSlider1.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
设置默认指示器位置(默认指示器白色,位置在sliderlayout底部)
相关值有:
Center_Bottom("Center_Bottom",R.id.default_center_bottom_indicator),
Right_Bottom("Right_Bottom",R.id.default_bottom_right_indicator),
Left_Bottom("Left_Bottom",R.id.default_bottom_left_indicator),
Center_Top("Center_Top",R.id.default_center_top_indicator),
Right_Top("Right_Top",R.id.default_center_top_right_indicator),
到这里AndroidImageSlider相关用法和介绍就完成了!
大家一起学习进步…..
最后祝大家冬至快乐哦…..