FlyBanner 自动循环轮播图,XBanner 轮播图(允许图片之间有间隔)
先上效果图
上面的是XBanner的效果,下面的是FlyBanner的效果
FlyBanner
使用FlyBanner轮播图,先添加依赖
在module的build.gradle中添加
implementation 'com.recker.flybanner:flybanner:1.3'
在XML文件中的控件
<com.recker.flybanner.FlyBanner
android:id="@+id/send_flybanner"
android:layout_width="match_parent"
android:layout_height="200dp"></com.recker.flybanner.FlyBanner>
在Activity里的代码如下
public class MainActivity extends AppCompatActivity {
//存放图片
private List<Integer> mImages = new ArrayList<>();
//使用本地的图片
private Integer[] image = new Integer[]{R.mipmap.a, R.mipmap.d, R.mipmap.c, R.mipmap.d, R.mipmap.c};
//控件
private FlyBanner send_flybanner;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
//将本地的图片添加到集合中
for (int i = 0; i < image.length; i++) {
mImages.add(image[i]);
}
//这个方法是展示本地的图片
send_flybanner.setImages(mImages);
//这个方法是用来展示网络请求接口的数据
send_flybanner.setImagesUrl();
}
private void initView() {
send_flybanner = (FlyBanner) findViewById(R.id.send_flybanner);
}
}
XBanner
先在module的build.gradle中添加依赖,因为展示图片是通过glide来展示的,所以添加了glide的依赖,也可以使用其他的图片加载框架来展示
implementation 'com.github.xiaohaibin:XBanner:1.6.1'
implementation 'com.github.bumptech.glide:glide:4.9.0'
在项目的build.gradle里添加
allprojects {
repositories {
google()
jcenter()
//添加这一个代码
maven { url 'https://jitpack.io' }
}
}
在XML文件中的控件
<com.stx.xhb.xbanner.XBanner
android:id="@+id/send_xbanner"
android:layout_width="match_parent"
android:layout_height="300dp"
android:clipChildren="false"
app:AutoPlayTime="3000" //循环图片的时间间隔
app:clipChildrenLeftRightMargin="20dp" //设置与前一张和后一张的间距
app:isClipChildrenMode="true" //是否允许展示为有间距的轮播图,若为false效果则与FlyBanner效果一致,这个不设置为true,那么设置的间距就无效果
app:isShowNumberIndicator="true" //是否显示页数
></com.stx.xhb.xbanner.XBanner>
在Activity中的代码
public class MainActivity extends AppCompatActivity {
//存放图片
private List<Integer> mImages = new ArrayList<>();
//使用本地的图片
private Integer[] image = new Integer[]{R.mipmap.a, R.mipmap.d, R.mipmap.c, R.mipmap.d, R.mipmap.c};
//控件
private XBanner send_xbanner;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
//将本地的图片添加到集合中
for (int i = 0; i < image.length; i++) {
mImages.add(image[i]);
}
//设置数据
send_xbanner.setData(mImages, null);
//通过Glide将图片加载,也可以使用其他的图片加载框架
send_xbanner.loadImage(new XBanner.XBannerAdapter() {
@Override
public void loadBanner(XBanner banner, Object model, View view, int position) {
Glide.with(MainActivity.this).load(mImages.get(position)).into((ImageView) view);
}
});
//页面改变时间在这里插入图片描述
send_xbanner.setPageChangeDuration(1000);
//页面循环到中间时,图片不放大,若想放大则注释此行
send_xbanner.setPageTransformer(Transformer.Default);
//点击事件
send_xbanner.setOnItemClickListener(new XBanner.OnItemClickListener() {
@Override
public void onItemClick(XBanner banner, Object model, View view, int position) {
Toast.makeText(MainActivity.this, "点击了第" + position![在这里插入图片描述](https://img-blog.****img.cn/20190312195949529.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MjQzMA==,size_16,color_FFFFFF,t_70) + "张图片", Toast.LENGTH_SHORT).show();
}
});
}
private void initView() {
send_xbanner = (XBanner) findViewById(R.id.send_xbanner);
}
}
当Activity失去焦点时立即停止自动轮播;当Activity获得焦点时才开始自动轮播。代码如下:(会有一些更好的体验)
@Override
protected void onResume() {
super.onResume();
banner.startAutoPlay();
}
@Override
protected void onStop() {
super.onStop();
banner.stopAutoPlay();
}