网上的轮子已经很多了，也都很强大。
背景：
需要网上有很多轮子，但是如果项目就一个简单的banner，如果引入库，是不是有点杀鸡用牛刀了。
需求：
自动播放，循环
效果图：
banner.png
思路：
布局上用viewpager+linearLayout,然后再通过RxJava控制它循环轮播
关键代码：
custom_layout_banner.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<com.yiban1314.yiban.widget.ProportionViewPager
android:id="@+id/vp_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:proportion="0.52"
tools:background="@color/c_ed"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="@+id/ll_points"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginRight="@dimen/d24px"
android:layout_marginBottom="@dimen/d30px"
app:layout_constraintRight_toRightOf="@id/vp_pager"
app:layout_constraintBottom_toBottomOf="@id/vp_pager"
android:visibility="gone"/>
<LinearLayout
android:id="@+id/ll_center_points"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="@dimen/d14px"
app:layout_constraintBottom_toBottomOf="@id/vp_pager"
app:layout_constraintRight_toRightOf="@id/vp_pager"
app:layout_constraintLeft_toLeftOf="@id/vp_pager"
android:visibility="gone"/>
<LinearLayout
android:id="@+id/ll_out_bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="@id/vp_pager"
app:layout_constraintRight_toRightOf="@id/vp_pager"
app:layout_constraintLeft_toLeftOf="@id/vp_pager"
android:visibility="gone"/>
</android.support.constraint.ConstraintLayout>
注：ProportionViewPager可以直接用ViewPager代替
自定义MyBanner.class
public class MyBanner extends FrameLayout {
private ProportionViewPager viewPager;
private LinearLayout llPoint;
private LinearLayout llCenterPoints;
private LinearLayout llOutBottom;
private Disposable subscription;
private Context mContext;
private int size;
//是否循环
private boolean isLoop;
//宽高比
private float proportionBanner;
private CurrentPageClick currentPageClick;
public MyBanner(@NonNull Context context) {
this(context, null);
}
public MyBanner(@NonNull Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public MyBanner(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext = context;
initAttrs(attrs);
initView();
}
private void initAttrs(AttributeSet attrs) {
if (null != attrs) {
TypedArray t = mContext.obtainStyledAttributes(attrs, R.styleable.MyBanner);
isLoop = t.getBoolean(R.styleable.MyBanner_isLoop, false);
proportionBanner = t.getFloat(R.styleable.MyBanner_proportionBanner,0.52f);
t.recycle();
}
}
public void initView() {
//会添加布局到自定义的view中
View view = LayoutInflater.from(mContext).inflate(R.layout.custom_layout_banner, this, true);
viewPager = view.findViewById(R.id.vp_pager);
viewPager.setProportion(proportionBanner);
llPoint = view.findViewById(R.id.ll_points);
llCenterPoints = view.findViewById(R.id.ll_center_points);
llOutBottom = view.findViewById(R.id.ll_out_bottom);
}
private void setGone(){
llPoint.setVisibility(GONE);
llCenterPoints.setVisibility(GONE);
llOutBottom.setVisibility(GONE);
}
/**
* @param datas 直接传view集合过来，这样不局限与ImageView
* desc:初始化数据
* position :指示器位置 0 在图片内的右下角； 1 在图片内底部居中； 2 在图片底部外面
* proportion ; 图片的比例设置
**/
public void setDatas(List<View> datas,int position,double proportion,int pointDrawableRes) {
if (Utils.isNotNull(datas)) {
size = datas.size();
viewPager.setAdapter(new MyAdapter(datas));
if(proportion != 0){
viewPager.setProportion(proportion);
}
setGone();
switch (position){
case 0:
initPoint(datas.size(),llPoint,pointDrawableRes);
initEvent(llPoint);
break;
case 1:
initPoint(datas.size(),llCenterPoints,pointDrawableRes);
initEvent(llCenterPoints);
break;
case 2:
initPoint(datas.size(),llOutBottom,pointDrawableRes);
initEvent(llOutBottom);
break;
}
if (isLoop) {
startLoop();
}
}
}
private void initPoint(int pointSize,LinearLayout ll,int pointDrawableRes) {
if(pointSize == 1){
ll.setVisibility(GONE);
}else {
ll.setVisibility(VISIBLE);
ll.removeAllViews();
for (int i = 0; i < pointSize; i++) {
//小指标点
View v_point = new View(mContext);
v_point.setBackgroundResource(pointDrawableRes);
v_point.setSelected(false);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
Utils.dip2px(mContext, 6),
Utils.dip2px(mContext, 6));
if (i != 0) params.leftMargin = Utils.dip2px(mContext, 6);
v_point.setLayoutParams(params);
ll.addView(v_point);
}
}
}
private void initEvent(final LinearLayout ll) {
if (ll.getChildCount() > 0) {
ll.getChildAt(0).setSelected(true);
}
viewPager.clearOnPageChangeListeners();
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
for (int i = 0; i < ll.getChildCount(); i++) {
ll.getChildAt(i).setSelected(false);
}
ll.getChildAt(position).setSelected(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
//viewpager的适配器
private class MyAdapter extends PagerAdapter {
private List<View> imageViewList;
public MyAdapter(List<View> imageViewList) {
this.imageViewList = imageViewList;
}
@Override
public int getCount() {
// 返回数据的个数
return imageViewList != null ? imageViewList.size() : 0;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//从viewpager中移除掉
container.removeView((View) object);
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
//获取View
View child = imageViewList.get(position);
// 添加View
container.addView(child);
child.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
if (null != currentPageClick) {
currentPageClick.onClickCurrent(position);
}
}
});
return child;
}
}
public void startLoop() {
if (subscription == null) {
subscription = Observable.interval(3, TimeUnit.SECONDS)
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.subscribe(new Consumer<Long>() {
@Override
public void accept(Long aLong) throws Exception {
int mCurrentItem = viewPager.getCurrentItem();
if (mCurrentItem == size - 1) {
mCurrentItem = 0;
} else {
mCurrentItem++;
}
viewPager.setCurrentItem(mCurrentItem);
}
});
}
}
public void stopLoop() {
if (null != subscription && !subscription.isDisposed()) {
subscription.dispose();
}
}
public void setCurrentPageClick(CurrentPageClick currentPageClick) {
this.currentPageClick = currentPageClick;
}
public interface CurrentPageClick {
void onClickCurrent(int position);
}
}
使用示例代码：
public void onBannerResult(final BannerResult bannerResult) {
if (myBanner == null) {
myBanner = (MyBanner) Utils.inflate(MyApplication.getInstance(), R.layout.layout_discovery_banner, srrvDatas);
getAdapter().addHeaderView(myBanner);
}
if(null != bannerResult && null != bannerResult.getData()){
List<View> viewList = new ArrayList<>();
for (int i = 0; i < bannerResult.getData().size(); i++) {
ImageView iv = Utils.inflate(MyApplication.getInstance(), R.layout.item_banner).findViewById(R.id.iv_img);
if(ModifySetUtils.isFourFormal()){
ImageLoaderUtils.loadCorner(iv, bannerResult.getData().get(i).getImg(),Utils.dp2px(mContext,8));
}else {
ImageLoaderUtils.load(iv, bannerResult.getData().get(i).getImg());
}
viewList.add(iv);
}
//不管哪个版本都显示在中间
myBanner.setDatas(viewList,1,0,R.drawable.point_background);
myBanner.setCurrentPageClick(new MyBanner.CurrentPageClick() {
@Override
public void onClickCurrent(int position) {
//游客拦截掉
if (InfoCheckUtils.isTourist(mContext, true)) return;
//0不做处理,1跳转网页,2跳外部系统网页
BannerResult.DataBean dataBean = bannerResult.getData().get(position);
switch (dataBean.getType()){
case 0:
break;
case 1:
EventBusUtils.postSticky(new WebEevent(dataBean.getTitle(),dataBean.getUrl(), dataBean.getShareInfo()));
IntentUtils.startWebActivity(mContext);
break;
case 2:
IntentUtils.startSysWebActivity(mContext,dataBean.getUrl());
break;
}
}
});
myBanner.setVisibility(View.VISIBLE);
}else {
removeBanner();
}
}
网友评论