官方是这样描述的:AndroidImageSlider
是令人惊异和高度兼容功能的一个Android幻灯片库。试图让它是最有吸引力的,易于使用的幻灯片库在Android!
AndroidImageSlider的github地址是:https://github.com/daimajia/AndroidImageSlider
简单使用方法
第一步:在gradle添加这个四个依赖
compile "com.android.support:support-v4:+"
compile 'com.squareup.picasso:picasso:2.3.2'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.daimajia.slider:library:1.1.5@aar'
第二步:如果需要在网络加载图片,在AndroidManifest.xml添加以下权限:
<!-- if you want to load images from the internet -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- if you want to load images from a file OR from the internet -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
当完成这两步配置就开始使用了。
步骤一:添加Slider控件到你的布局文件当中:
<com.daimajia.slider.library.SliderLayout
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="200dp"
/>
如果你还需要幻灯片的指示器还可以添加:
<com.daimajia.slider.library.Indicators.PagerIndicator
android:id="@+id/custom_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
/>
步骤二:
获得SliderLayout对象,
使用
findViewById()方法
。例如:
SliderLayout sliderShow = (SliderLayout) findViewById(R.id.slider);
步骤三:
做一个创建一个slide,并添加到sliderShow。
TextSliderView textSliderView = new TextSliderView(this);
textSliderView
.description("Game of Thrones")
.image("http://images.boomsbeat.com/data/images/full/19640/game-of-thrones-season-4-jpg.jpg");
sliderShow.addSlider(textSliderView);
注意:为了防止旋转时内存泄漏,确保在Activity或者fragment销毁前去调用stopAutoCycle()。
@Override
protected void onStop() {
sliderShow.stopAutoCycle();
super.onStop();
}
两个预设滑块显示可以选择:
显示类型 | 描述 |
---|---|
DefaultSliderView | 一个缺少滑块视图,它默认显示图片。 |
TextSliderView | 滑块视图默认显示与说明文字图像。 |
你也在自己自定义滑动试图。
一些功能改变SliderLayout的属性:如下方法:
方法 | 描述 |
---|---|
setPresetTransformer | 选择15提供了查看过渡效果 |
setPresetIndicator | 选择6所提供的指标款式 |
setIndicatorVisibility | 设定指标的可视性 |
setSliderTransformDuration | 设置幻灯片过渡的持续时间 |
startAutoCycle | 启动自动循环 |
stopAutoCycle | 停止自动循环 |
setDuration | 将持续显示每张幻灯片 |
《======================================================================》
高级的使用方法
1. Indicator指示器的使用
添加指示器到你的布局文件:
<com.daimajia.slider.library.Indicators.PagerIndicator
android:id="@+id/custom_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
/>
属性 | 描述 |
---|---|
shape | oval | rect |
visibility | visible | invisible |
selected_drawable unselected_drawable | 您可以使用图像或自定义绘制的指标。如果你决定使用自己的绘制,那么内置的绘制,并与相关的属性内置的绘制将无法正常工作。 |
selected_color unselected_color | 指示剂的颜色 |
selected_width unselected_width | 形状的宽度 |
selected_height unselected_height | 形状的高度 |
selected_padding_left unselected_padding_left selected_padding_right unselected_padding_right selected_padding_top unselected_padding_top selected_padding_bottom unselected_padding_bottom | 指示器的填充 |
例子:
<com.daimajia.slider.library.Indicators.PagerIndicator
android:id="@+id/custom_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
custom:selected_color="#555555"
custom:unselected_color="#55555555"
custom:shape="oval"
custom:selected_padding_left="3dp"
custom:selected_padding_right="3dp"
custom:unselected_padding_left="3dp"
custom:unselected_padding_right="3dp"
custom:selected_width="8dp"
custom:selected_height="8dp"
custom:unselected_width="4dp"
custom:unselected_height="4dp"
/>
<com.daimajia.slider.library.Indicators.PagerIndicator
android:id="@+id/custom_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
custom:selected_color="#FF5500"
custom:unselected_color="#55333333"
custom:shape="rect"
custom:selected_padding_left="2dp"
custom:selected_padding_right="2dp"
custom:unselected_padding_left="2dp"
custom:unselected_padding_right="2dp"
custom:selected_width="16dp"
custom:selected_height="3dp"
custom:unselected_width="16dp"
custom:unselected_height="3dp"
/>
<com.daimajia.slider.library.Indicators.PagerIndicator
android:id="@+id/custom_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
custom:selected_color="#0095BF"
custom:unselected_color="#55333333"
custom:shape="rect"
custom:selected_padding_left="2dp"
custom:selected_padding_right="2dp"
custom:unselected_padding_left="2dp"
custom:unselected_padding_right="2dp"
custom:selected_width="6dp"
custom:selected_height="6dp"
custom:unselected_width="6dp"
custom:unselected_height="6dp"
/>
<com.daimajia.slider.library.Indicators.PagerIndicator
android:id="@+id/custom_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
custom:selected_color="#0095BF"
custom:unselected_color="#55333333"
custom:selected_drawable="@drawable/bird"
custom:shape="oval"
custom:selected_padding_left="6dp"
custom:selected_padding_right="6dp"
custom:unselected_padding_left="2dp"
custom:unselected_padding_right="2dp"
custom:selected_width="6dp"
custom:selected_height="6dp"
custom:unselected_width="6dp"
custom:unselected_height="6dp"
/>
注意:由于自定义图像用于指示,以下属性将无法正常工作:
custom:selected_color
custom:selected_width
custom:selected_height
custom:shape
custom:color
custom:width
custom:height
预设样式
Preset-1:
<com.daimajia.slider.library.Indicators.PagerIndicator
android:id="@+id/custom_indicator"
style="@style/AndroidImageSlider_Magnifier_Oval_Black"
/>
Preset-2:
<com.daimajia.slider.library.Indicators.PagerIndicator
android:id="@+id/custom_indicator"
style="@style/AndroidImageSlider_Attractive_Rect_Blue"
/>
Preset-3:
<com.daimajia.slider.library.Indicators.PagerIndicator
android:id="@+id/custom_indicator"
style="@style/AndroidImageSlider_Corner_Oval_Orange"
/>
使用视图
一个绑定SliderLayout
的实例。
slider.setCustomIndicator((PagerIndicator) findViewById(R.id.custom_indicator));
2.slide view(滑动试图的使用)
一个SliderView
是显示视图中SliderLayout
,有两个预设滑块的方法。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<ImageView
android:id="@+id/daimajia_slider_image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ProgressBar
android:id="@+id/loading_bar"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:id="@+id/description_layout"
android:layout_alignParentBottom="true"
android:minHeight="30dp"
android:background="#77000000"
android:layout_width="match_parent"
android:orientation="vertical"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:layout_height="wrap_content">
<TextView
android:id="@+id/description"
android:textColor="#ffffff"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
如果你想有一个ProgressBar
,然后添加一个ProgressBar
,并将其命名loading_bar
,你并不需要操纵它,library将做到这一点。 <ProgressBar
android:id="@+id/loading_bar"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
第2步
创建从扩展一个类BaseSliderView
,并实现getView()
方法。在该getView()
方法中,(inflate)使充气布局文件和参数传递到它。
提示:您可以通过获得的参数getTag()
或getBundle()
。
最后不要忘了bindEventAndShow(View v, ImageView target)
。
如果你还在使用v1.0.8之前:请访问这里。
public class TextSliderView extends BaseSliderView{
public TextSliderView(Context context) {
super(context);
}
@Override
public View getView() {
View v = LayoutInflater.from(getContext()).inflate(R.layout.render_type_text,null);
ImageView target = (ImageView)v.findViewById(R.id.daimajia_slider_image);
TextView description = (TextView)v.findViewById(R.id.description);
description.setText(getDescription());
bindEventAndShow(v, target);
return v;
}
}
第3步
开始使用你的创造性的工作TextSliderView demoSlider = new TextSliderView(this);
demoSlider.description("Game of Thrones")
.image("http://images.boomsbeat.com/data/images/full/19640/game-of-thrones-season-4-jpg.jpg")
.setOnClickListener(this);
slider.addSlider(demoSlider);
恭喜!您已经创建自己的自定义滑块视图。很简单吧?
3.Transform effect(变换效果)
变换效果是当视觉效果滑动时的变化。
有15个预设的变换可以通过调用使用效果:
setPresetTransformer(Transformer ts);
setPresetTransformer(Transformer ts);
如果你想要自己定义效果
步骤一:
public class AccordionTransformer extends BaseTransformer {
}
步骤二:
覆盖之前的默认方法。你要的如何使用ViewPager的变换原理,如果不知道如何使用,请查看安卓帮助文档。
@Override
protected void onTransform(View view, float position) {
ViewHelper.setPivotX(view, position < 0 ? 0 : view.getWidth());
ViewHelper.setScaleX(view, position < 0 ? 1f + position : 1f - position);
}
步骤三:
slider.setPagerTransformer(false,new AccordionTransformer());
4.Slider child view animation(幻灯片子视图动画)
你有没有注意到,有在其中显示滑块子视图的动画。
如果你想使你的滑块观点更具吸引力,动画是一个不错的选择。
public class DescriptionAnimation implements BaseAnimationInterface {
@Override
public void onPrepareCurrentItemLeaveScreen(View current) {
}
@Override
public void onPrepareNextItemShowInScreen(View next) {
}
@Override
public void onCurrentItemDisappear(View view) {
}
@Override
public void onNextItemAppear(View view) {
}
}
在滑块布局中,有两个重要的滑动的观点是:当前item和下一个item。 目前的item总是要消失,下一个item总是要展现。当前item即将消失(如您滚动SliderLayout),onPrepareCurrentItemLeaveScreen并且onPrepareNextItemShowInScreen将被调用。
当前item已经完全消失,下一个item是完全可见,那么onCurrentItemDisappear和onNextItemAppear将被调用。
ublic class DescriptionAnimation implements BaseAnimationInterface {
/**
* When current item is going to leave, let's make the description layout disappear.
*/
@Override
public void onPrepareCurrentItemLeaveScreen(View current) {
View descriptionLayout = current.findViewById(R.id.description_layout);
if (descriptionLayout != null) {
current.findViewById(R.id.description_layout).setVisibility(View.INVISIBLE);
}
}
/**
* When next item is coming to show, let's hide the description layout.
*/
@Override
public void onPrepareNextItemShowInScreen(View next) {
View descriptionLayout = next.findViewById(R.id.description_layout);
if (descriptionLayout != null) {
next.findViewById(R.id.description_layout).setVisibility(View.INVISIBLE);
}
}
@Override
public void onCurrentItemDisappear(View current) {
}
/**
* When next item is shown, let's make an animation to show the
* description layout.
*/
@Override
public void onNextItemAppear(View next) {
View descriptionLayout = view.findViewById(R.id.description_layout);
if (descriptionLayout != null) {
float layoutY = ViewHelper.getY(descriptionLayout);
next.findViewById(R.id.description_layout).setVisibility(View.VISIBLE);
ValueAnimator animator = ObjectAnimator.ofFloat(
descriptionLayout,"y",layoutY + descriptionLayout.getHeight(),
layoutY).setDuration(500);
animator.start();
}
}
}
步骤三:
slider.setCustomAnimation(new DescriptionAnimation());
以上我用一个UML图做一个总结