安卓项目实战之仿魅族的酷炫Banner轮播效果

效果图

GitHub地址：https://github.com/pinguo-zhouwei/MZBannerView

添加依赖

1，project的build.gradle添加：

allprojects {repositories {...maven { url 'https://jitpack.io' }}
}

2，app的build.gradle添加：

dependencies {compile 'com.github.pinguo-zhouwei:MZBannerView:v2.0.2' // bannercompile 'com.makeramen:roundedimageview:2.3.0' // 圆角图片
}

使用方式

1，xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"tools:context="txkj.xian.com.qiubantiyu.activity.TestViewPagerActivity"><com.zhouwei.mzbanner.MZBannerViewandroid:id="@+id/banner"android:layout_width="match_parent"android:layout_height="150dp"android:layout_marginTop="10dp"app:open_mz_mode="true"app:middle_page_cover="false"app:canLoop="true"app:indicatorAlign="center"/></LinearLayout>

1，既可作为banner使用，也可作为普通的viewpager使用，canLoop为 true 表示轮播，false 则为普通ViewPager
2，MZBannerView的高度必须指定为具体值，否则为填充整个高度
3，上面的middle_page_cover设置中间的pager是否覆盖，建议设置为false，设置为false有动画效果，true没有动画效果。

Activity中：

public class TestViewPagerActivity extends BaseActivity{@BindView(R.id.banner)MZBannerView mMZBanner;@Overridepublic int setLayout() {return R.layout.activity_test_view_pager;}@Overridepublic void initView() {List<String> list = new ArrayList<>();list.add("http://statics.qiuban.vip/carousel/banner1.jpg");list.add("http://statics.qiuban.vip/carousel/banner2.jpg");list.add("http://statics.qiuban.vip/carousel/banner3.jpg");list.add("http://statics.qiuban.vip/carousel/banner4.jpg");mMZBanner.setIndicatorVisible(true);  // 设置是否显示指示器
//        mMZBanner.setDelayedTime(3);  // 设置切换时间间隔
//        mMZBanner.setIndicatorRes(R.drawable.unselect,R.drawable.selected); // 设置指示器样式未选中-选中// 点击监听，必须写在setPages前面调用否则没效果mMZBanner.setBannerPageClickListener(new MZBannerView.BannerPageClickListener() {@Overridepublic void onPageClick(View view, int i) {Toast.makeText(TestViewPagerActivity.this, "点击了"+i, Toast.LENGTH_SHORT).show();}});// 设置数据mMZBanner.setPages(list, new MZHolderCreator<BannerViewHolder>() {@Overridepublic BannerViewHolder createViewHolder() {return new BannerViewHolder();}});}public static class BannerViewHolder implements MZViewHolder<String> {private RoundedImageView mImageView;@Overridepublic View createView(Context context) {// 返回页面布局View view = LayoutInflater.from(context).inflate(R.layout.banner_item,null);mImageView = view.findViewById(R.id.imageView);return view;}@Overridepublic void onBind(Context context, int position, String data) {// 数据绑定Glide.with(context).load(data).into(mImageView);}}@Overridepublic void onPause() {super.onPause();mMZBanner.pause();//暂停轮播}@Overridepublic void onResume() {super.onResume();mMZBanner.start();//开始轮播}
}

如果是当Banner使用，注意在onResume 中调用start()方法，在onPause中调用 pause() 方法。如果当普通ViewPager使用，则不需要。

Banner的item布局：使用ConstraintLayout对图片进行了适配，此处原图尺寸为：672*234，修改为自己所用素材的宽高比即可

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_vertical"><android.support.constraint.ConstraintLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><com.makeramen.roundedimageview.RoundedImageViewxmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/imageView"android:layout_width="0dp"android:layout_height="0dp"android:scaleType="centerCrop"app:layout_constraintDimensionRatio="h,672:234"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"app:riv_corner_radius="10dp"android:layout_marginLeft="4dp"android:layout_marginRight="4dp"/></android.support.constraint.ConstraintLayout></LinearLayout>

关于设置指示器颜色用到的两个xml文件：
unselect.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval" ><solid android:color="#eeeeee" /><size android:height="5dp"android:width="5dp"/></shape>

selected.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval" ><solid android:color="#ff0000" /><size android:height="5dp"android:width="5dp"/></shape>

实际项目中使用

在实际项目中，一般获得的都是一个对象ImageBean，里面包含了图片路径，标题等信息，而不像上面的例子直接加载一个本地图片，只需要将泛型改为ImageBean即可，相应的onBind方法中的参数2也需要改为ImageBean类型。
图片素材：