安卓项目实战之仿魅族的酷炫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' // banner
         compile '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.MZBannerView
        android: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;

    @Override
    public int setLayout() {
        return R.layout.activity_test_view_pager;
    }

    @Override
    public 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() {
            @Override
            public void onPageClick(View view, int i) {
                Toast.makeText(TestViewPagerActivity.this, "点击了"+i, Toast.LENGTH_SHORT).show();
            }
        });

        // 设置数据
        mMZBanner.setPages(list, new MZHolderCreator<BannerViewHolder>() {
            @Override
            public BannerViewHolder createViewHolder() {
                return new BannerViewHolder();
            }
        });

    }

    public static class BannerViewHolder implements MZViewHolder<String> {
        private RoundedImageView mImageView;
        @Override
        public View createView(Context context) {
            // 返回页面布局
            View view = LayoutInflater.from(context).inflate(R.layout.banner_item,null);
            mImageView = view.findViewById(R.id.imageView);
            return view;
        }

        @Override
        public void onBind(Context context, int position, String data) {
            // 数据绑定
            Glide.with(context).load(data).into(mImageView);
        }
    }

    @Override
    public void onPause() {
        super.onPause();
        mMZBanner.pause();//暂停轮播
    }

    @Override
    public 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.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <com.makeramen.roundedimageview.RoundedImageView
            xmlns: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类型。
图片素材：