Banner 开源地址:https://github.com/youth5201314/banner
图片加载框架Glide开源地址:https://github.com/bumptech/glide
使用第三方控件banner实现图片轮播,这里是根据服务端来获取图片信息的,我的图片是放在服务端中的这个路径内ShoppingService\ShoppingService的文件夹中(要新建文件夹)。首先在数据库录入轮播的图片信息,然后新建一个实体类RotationVo,最后在服务端中查询轮播信息(服务端是MVC写的)。下列就是服务端代码
public ActionResult GetBannerInfo()
{ //查询轮播列表
List rotation = (from taRataion in myModels.Rotation
where taRataion.IsEffective == true && taRataion.IsShow == true
select new RotationVo
{
RotationID = taRataion.RotationID,
Title=taRataion.Title,
Picture=taRataion.Picture,
Link=taRataion.Link,
IsShow=taRataion.IsShow,
IsEffective=taRataion.IsEffective
}).ToList();
return Content(JsonConvert.SerializeObject(rotation,Formatting.Indented,timeConverter));
}
以上就是服务端内容,下面就是App端实现代码。首先在build.gradle中加上下面的两个控件,然后同步一下。
glide图片加载框架:implementation 'com.github.bumptech.glide:glide:4.11.0'
开源轮播控件 :implementation 'com.youth.banner:banner:2.0.7'
第二就是添加权限<uses-permission android:name="android.permission.INTERNET"/>到AndroidManifest.xml中
第三在布局页面添加Banner
<com.youth.banner.Banner
android:id="@+id/banner_home_Carousel"
android:layout_width="match_parent"
android:layout_height="140dp" />(高度自己设置)
第四创建一个Adapter文件,我创建了一个HomeRotationAdapter.java,以下就是Adapter中的内容。
public class HomeRotationAdapter extends BannerAdapter {
private Context context;
//构造函数 传递数据到适配器
public HomeRotationAdapter(List mDatas,Context context){
//设置数据,也可以调用banner提供的方法,或者自己在adapter中实现
super(mDatas);
this.context=context;
}
//创建ViewHolder,可以用viewType这个字段来区分不同的ViewHolder
@Override
public BannerViewHolder onCreateHolder(ViewGroup parent, int viewType) {
ImageView imageView=new ImageView(parent.getContext());
//注意,必须设置为match_parent,这个是viewpager2强制要求的
imageView.setLayoutParams(new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
return new BannerViewHolder(imageView);
}
@Override
public void onBindView(BannerViewHolder holder, RotationBean data, int position, int size) {
String imageUrl= ServiceUrls.getMainPageBannerImgUrl(data.getPicture());
//使用Glide加载图片 最简单的用户
Glide.with(context)
.load(imageUrl)
.into(holder.imageView);
}
class BannerViewHolder extends RecyclerView.ViewHolder{
ImageView imageView;
public BannerViewHolder(@NonNull ImageView view) {
super(view);
this.imageView = view;
}
}
}
第五Banner具体方法调用,以下的bannerCarousel控件是,在上面的onCreateView中获取的控件,mActivityContext可在下图中查看
private void initView() {
String url = ServiceUrls.getMainPageMethodUrl("GetBannerInfo");//获取轮播信息
//发送请求
OkHttpTool.httpPost(url, null, new OkHttpTool.ResponseCallback() {
@Override
public void onResponse(boolean isSuccess, int responseCode, String response, Exception exception) {
//需要在UI线程这更新UI
mActivityContext.runOnUiThread(new Runnable() {
@Override
public void run() {
if (isSuccess && responseCode == 200 && Tools.isNotNull(response)) {
//对json数据反序列化
Type type = new TypeToken>() {}.getType();
List rotationList = gson.fromJson(response, type);
//初始化轮播
bannerCarousel.setAdapter(new HomeRotationAdapter(rotationList, mActivityContext))
.setIndicator(new CircleIndicator(mActivityContext))//设置指示器
.setIndicatorSelectedColorRes(R.color.colorPrimary)//设置当前轮播指示器的颜色
.isAutoLoop(true)//允许自动轮播
.setDelayTime(10 * 1000)//设置轮播切换间隔
//设置轮播点击事件
.setOnBannerListener(new OnBannerListener() {
@Override
public void OnBannerClick(Object data, int position) {
//参数:轮播绑定的数据,轮播图片的索引
RotationBean rotationBean = (RotationBean) data;
int rotationId = rotationBean.getRotationId();
Toast.makeText(mActivityContext, String.valueOf(rotationId), Toast.LENGTH_SHORT).show();
}
})
.start();
}
Toast.makeText(mActivityContext, "轮播加载失败", Toast.LENGTH_SHORT).show();
}
});
}
});
}