官方是这样描述的：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_topselected_padding_bottomunselected_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_colorcustom:selected_widthcustom:selected_heightcustom:shapecustom:colorcustom:widthcustom: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图做一个总结
扫一扫
7328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
