binbinyang--介绍一个GITHUB上的轮播图-Android Image Slider（com.daimajia.slider.library.SliderLayout）

最近在GITHUB------- https://github.com/daimajia/AndroidImageSlider

 上看到了这个 轮播图控件

com.daimajia.slider.library.SliderLayout 

效果图如下 

幻灯片切换动画效果，可直接从网络或本地文件中获取图片。点击图片开始/暂停,滑动等待几秒后重新开始轮播。

 


首先来到GITHUB  看到下图

Step 1--在Gradle中加入包

dependencies {
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'
}

Step2--加入权限

<!-- 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" />

Step3--在布局中加入

<com.daimajia.slider.library.SliderLayout
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="200dp"
/>

关键参数

关键参数设置：
custom:pager_animation=”Accordion” 切换动画效果
custom:auto_cycle=”true” 自动播放
custom:indicator_visibility=”visible” 显示指示器

下面这个图是我自己写的DEMO的轮播图。。由于录制GIF软件问题 动画效果，录制出来的图片，动画效果感觉没出来 不过不碍事


直接上代码
由于我这个地方用到了这个轮播图带的自定义指示器 所以这里也要介绍一下

custom:shape=”oval” 或 rect 圆形，矩形

<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"
android:layout_gravity="center"
/>以及 可用
style设置基本参数 
默认提供三种 
AndroidImageSlider_Corner_Oval_Orange，AndroidImageSlider_Attractive_Rect_Blue，AndroidImageSlider_Magnifier_Oval_Black

<style name="AndroidImageSlider_Corner_Oval_Orange">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">center</item>
<item name="android:background">@drawable/indicator_corner_bg</item>
<item name="android:paddingLeft">2dp</item>
<item name="android:paddingRight">2dp</item>
<item name="shape">oval</item>
<item name="padding_left">3dp</item>
<item name="padding_right">3dp</item>
<item name="padding_top">4dp</item>
<item name="padding_bottom">4dp</item>

<item name="selected_color">#f60</item>
<item name="unselected_color">#ffffff</item>
<item name="selected_width">6dp</item>
<item name="selected_height">6dp</item>
<item name="unselected_width">6dp</item>
<item name="unselected_height">6dp</item>
</style>

我的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:background="#fff"
android:orientation="vertical"
tools:context=".MainActivity">
<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"
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"
android:layout_gravity="center"
/>
</LinearLayout>

我的代码

/**
* 首页
*/
public class HomeFragment extends Fragment {
SliderLayout sliderShow;
View view;
PagerIndicator indicator;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_home, container, false);
sliderShow = (SliderLayout) view.findViewById(R.id.slider);
indicator= (PagerIndicator)  view.findViewById(R.id.custom_indicator);
initSlider();
return view;
}

private void initSlider() {
TextSliderView textSliderView1 = new TextSliderView(this.getActivity());
textSliderView1
.description("IT生活")
.image("http://7mno4h.com2.z0.glb.qiniucdn.com/5608cae6Nbb1a39f9.jpg");

textSliderView1.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() {
@Override
public void onSliderClick(BaseSliderView slider) {
Toast.makeText(getActivity(),"轮播图的第一个图的点击效果",1).show();
}
});

TextSliderView textSliderView2 = new TextSliderView(this.getActivity());
textSliderView2
.description("金秋风暴")
.image("http://7mno4h.com2.z0.glb.qiniucdn.com/5608b7cdN218fb48f.jpg");

TextSliderView textSliderView3 = new TextSliderView(this.getActivity());
textSliderView3
.description("手机会场")
.image("http://7mno4h.com2.z0.glb.qiniucdn.com/5608eb8cN9b9a0a39.jpg");

TextSliderView textSliderView4 = new TextSliderView(this.getActivity());
textSliderView4
.description("音像会场")
.image("http://7mno4h.com2.z0.glb.qiniucdn.com/5608f3b5Nc8d90151.jpg");

sliderShow.addSlider(textSliderView1);
sliderShow.addSlider(textSliderView2);
sliderShow.addSlider(textSliderView3);
sliderShow.addSlider(textSliderView4);

//        sliderShow.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);/ 设置默认指示器位置(默认指示器白色)
sliderShow.setCustomIndicator(indicator); // 设置自定义指示器(位置自定义)
sliderShow.setCustomAnimation(new DescriptionAnimation());   // 设置TextView自定义动画
sliderShow.setPresetTransformer(SliderLayout.Transformer.RotateDown);//设置默认过渡效果(可在xml中设置)的动画
sliderShow.setDuration(3000);//设置时间 这个时间 就是延迟时间 第一个图跟第2个图3秒间隔

}

其实他的指示器效果挺多的。。都在GITHUB上面有。。有兴趣的话可以自己去试试