使用Banner实现图片的轮番显示的效果,替换ViewPager + CirclePagerIndicator

今天接触到了Banner,超级好用。
可以很方便的实现ViewPager + CirclePagerIndicator的效果。

源码来自于github:https://github.com/youth5201314/banner
我自己的完整代码已上传至我的资源:Banner的使用源代码.rar
github里面把使用方法介绍的十分清楚明了,而且真的是很easy~啊,大爱。

看效果:


效果还不错吧,有动画,可以自动跳转,也可手动滑动,有文本切换,还有小圆点的切换。
而代码量却是非常的少,用法也是相当的简单,特别适合我这样的手残党。

再简单看下过程吧:
1.在build.gradle文件中:


2. AndroidManifest.xml中添加权限
这里我被坑过,忘了加权限,又没报错,找了好久,发现后差点把自己扔了。。。

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
1
2
3
3.布局文件中添加Banner

<com.youth.banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="200dp"/>
1
2
3
4
5
4.activity的主代码

package com.example.chenjunmei.junmeiviewpagerabout;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.Transformer;
import com.youth.banner.loader.ImageLoader;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

public class JMBannerTestActivity extends Activity {
private Banner banner;

//准备的标题文本集合
String[] titles = new String[]{"《神奇动物》中文终极预告",
"《罗曼蒂克消亡史》预告", "《承诺》首款预告",
"《娃娃老板》预告片"};

//准备图片url的集合
String[] imgUrlStrs = new String[]{
"http://img5.mtime.cn/mg/2016/09/29/101927.61748190.jpg",
"http://img5.mtime.cn/mg/2016/10/17/172246.85687810.jpg",
"http://img31.mtime.cn/mg/2016/09/10/140500.21315060.jpg",
"http://img5.mtime.cn/mg/2016/10/18/102203.49333729.jpg"
};


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_jmbannertest);

List<String> imageUrls = new ArrayList<String>();

//将图片url的字符串放到List集合中
for (int i = 0; i < imgUrlStrs.length; i++) {
imageUrls.add(imgUrlStrs[i]);
}

Banner banner = (Banner) findViewById(R.id.banner);

//设置banner样式(显示圆形指示器和标题)
banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);
//设置图片加载器
banner.setImageLoader(new GlideImageLoader());
//设置图片集合
banner.setImages(imageUrls);
//设置banner动画效果(正方体旋转式)
banner.setBannerAnimation(Transformer.CubeOut);
//设置标题集合(当banner样式有显示title时)
banner.setBannerTitles(Arrays.asList(titles));
//设置自动轮播,默认为true
banner.isAutoPlay(true);
//设置轮播时间
banner.setDelayTime(2000);
//设置指示器位置:左侧显示(当banner模式中有指示器时)
banner.setIndicatorGravity(BannerConfig.LEFT);
//banner设置方法全部调用完毕时最后调用
banner.start();

}

//图片加载器
class GlideImageLoader extends ImageLoader {
@Override
public void displayImage(Context context, Object path, ImageView imageView) {

//Picacco加载图片简单用法
Picasso.with(JMBannerTestActivity.this).load((String) path).into(imageView);
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
对,你没看错,就是这么66666666的简单~
---------------------
作者:李诗雨
来源:CSDN
原文:https://blog.csdn.net/cjm2484836553/article/details/53152784
版权声明:本文为博主原创文章,转载请附上博文链接!

posted @ 2018-10-19 20:41  天涯海角路  阅读(648)  评论(0)    收藏  举报