mBanner.initBanner(getImageUrlData(), getContentData());
2.在代码中使用banner
//也可以直接动态生成
EasyBanner easyBanner = new EasyBanner(this);
//设置图片url和图片标题
easyBanner.initBanner(getImageUrlData(), getContentData());
mRootView.addView(easyBanner,new LinearLayout.LayoutParams(LinearLayout
.LayoutParams.MATCH_PARENT, DensityUtil.dip2px(this,200)));
3.设置图片加载器(必须)
//设置图片加载器
mBanner.setImageLoader(new EasyBanner.ImageLoader() {
@Override
public void loadImage(ImageView imageView, String url) {
Glide.with(mContext).load(url).into(imageView);
}
});
4.实现点击事件(非必须)
//监听banner的item点击事件
mBanner.setOnItemClickListener(new EasyBanner.OnItemClickListener() {
@Override
public void onItemClick(int position, String title) {
Toast.makeText(MainActivity.this, “position:”+position+" title:"+title, Toast
.LENGTH_SHORT).show();
}
});
基本使用就是这样,详情请看demo: https://github.com/xfhy/EasyBanner
原理
–
- 首先我们分析,banner是可以随便左右滑动的,而且可以点击.所以我想到用ViewPager来实现,然后banner里面的图片我就在ViewPager的每个页面中放一个ImageView;接下来就是上面的标题了,我直接用的TextView,因为同时显示的标题只有1个,所以用一个textView就够了;然后最底部的小圆点,我是这样做的:用一个LinearLayout将它们全部装进来,有多少我装多少,这样就可以动态扩展.至于小圆点可以变换颜色直接用selector实现.
请看布局代码
<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout
xmlns:android=“http://schemas.android.com/apk/res/android”
xmlns:app=“http://schemas.android.com/apk/res-auto”
android:id=“@+id/banner_root_view”
android:layout_width=“match_parent”
android:layout_height=“200dp”>
<android.support.v4.view.ViewPager
android:id=“@+id/vp_banner”
android:layout_width=“match_parent”
android:layout_height=“match_parent”/>
<TextView
android:id=“@+id/tv_banner_content”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
android:layout_marginBottom=“10dp”
android:layout_marginStart=“10dp”
android:clickable=“false”
android:ellipsize=“end”
android:enabled=“false”
android:maxLines=“2”
android:textColor=“@android:color/white”
android:textSize=“20sp”
app:layout_constraintBottom_toTopOf=“@+id/ll_banner_point”/>
<LinearLayout
android:id=“@+id/ll_banner_point”
android:layout_width=“match_parent”
android:layout_height=“20dp”
android:layout_marginBottom=“10dp”
android:clickable=“false”
android:gravity=“center”
android:orientation=“horizontal”
app:layout_constraintBottom_toBottomOf=“parent”/>
</android.support.constraint.ConstraintLayout>
2.初始化:传入了多少个数据就初始化多少个ImageView,然后放进图片List中先保存起来,并且循环遍历让外部去实现该图片的加载(加载网络图片);循环遍历时将小圆点依次加入到底部的LinearLayout中;设置ViewPager的页面切换监听器,为了切换选择界面的小圆点的颜色;并设置ViewPager的当前item为一个很大的数,这样就可以无限地左滑右滑了(哈哈,有点投机取巧….)
下面是初始化代码
/**
- 初始化数据
*/
private void initData() {
imageViewList = new ArrayList<>();
View pointView;
int bannerSize = imageUrlList.size();
for (int i = 0; i < bannerSize; i++) {
//加载图片
ImageView imageView = new ImageView(getContext());
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
//让外部去实现图片加载,实现解耦
if (imageLoader != null) {
imageLoader.loadImage(imageView, imageUrlList.get(i));
}
imageViewList.add(imageView);
//底部的小白点
pointView = new View(getContext());
//设置背景
pointView.setBackgroundResource(R.drawable.selector_banner_point);
//设置小圆点的大小
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(DensityUtil
.dip2px(getContext(), POINT_DEFAULT_SIZE), DensityUtil.dip2px(getContext(),
POINT_DEFAULT_SIZE));
//除第一个以外,其他小白点都需要设置左边距
if (i != 0) {
layoutParams.leftMargin = DensityUtil.dip2px(getContext(), POINT_DEFAULT_SIZE / 2);
pointView.setEnabled(false); //默认小白点是不可用的
}
pointView.setLayoutParams(layoutParams);
mPointLayout.addView(pointView); //添加到linearLayout中
}
//延时
mHandler.postDelayed(delayRunnable, BANNER_SWITCH_DELAY_MILLIS);
BannerAdapter bannerAdapter = new BannerAdapter();
mViewPager.setAdapter(bannerAdapter);
//页面切换监听器
mViewPager.addOnPageChangeListener(this);
//将ViewPager的起始位置放在 一个很大的数处,那么一开始就可以往左划动了 那个数必须是imageUrlList.size()的倍数
int remainder = (Integer.MAX_VALUE / 2) % imageUrlList.size();
mViewPager.setCurrentItem(Integer.MAX_VALUE / 2 - remainder);
//文本默认为第一项
mContent.setText(contentList.get(0));
mPointLayout.getChildAt(0).setEnabled(true);
}
3.实现自动延时切换,这个就比较简单了,直接用Handler的postDelayed()就行.当执行完这次任务,又进行一次postDelayed(),这样就可以无限轮播了.
/**
最后
如果你看到了这里,觉得文章写得不错就给个赞呗?如果你觉得那里值得改进的,请给我留言。一定会认真查询,修正不足。谢谢。
最后针对Android程序员,我这边给大家整理了一些资料,包括不限于高级UI、性能优化、移动架构师、NDK、混合式开发(ReactNative+Weex)微信小程序、Flutter等全方面的Android进阶实践技术;希望能帮助到大家,也节省大家在网上搜索资料的时间来学习,也可以分享动态给身边好友一起学习!
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
eactNative+Weex)微信小程序、Flutter等全方面的Android进阶实践技术;希望能帮助到大家,也节省大家在网上搜索资料的时间来学习,也可以分享动态给身边好友一起学习!
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!