Android APP Banner, this one is enough

MZBannerView

Now most of the APP Banner is the same, the front see meizu mobile phone on all meizu own APP Banner effect is good, so I want to imitate a similar effect. Hence the library. But for ease of use, this library can be used not only as a fake Meizu effect BannerView, but also as a normal BannerView and as a ViewPager. It is very convenient to use. See the following examples for specific usage methods and APIS.

Github address: MZBannerView

The picture on the left is the Banner effect on meizu APP, and the picture on the right is the high imitation effect.

MZBannerView has the following features:

1. Imitation of Meizu BannerView effect.

2. Use it as a common Banner

3. Use it as a normal ViewPager.

4. When normal ViewPager is used (with Meizu Banner effect)

5. Imitation iQiyi APP Banner effect

Dependency

Add it in your root build.gradle at the end of repositories:

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

Step 2. Add the dependency

dependencies {
         compile 'com. Making. Pinguo - zhouwei: MZBannerView: v2.0.0'
}Copy the code

Custom attributes

The property name	The attribute significance	The values
open_mz_mode	Whether to enable Meizu mode	True indicates the Meizu Banner effect; false indicates the common Banner effect
canLoop	Whether by	If the value is true, the value is normal ViewPager
indicatorPaddingLeft	Sets the distance to the left of the indicator	The unit is the value of dp
indicatorPaddingRight	Sets the distance to the right of the indicator	The unit is the value of dp
indicatorAlign	Sets the position of the indicator	There are three values: left, center, and right
middle_page_cover	Set whether the middle Page is covered (true Meizu Banner effect)	False Indicates no overwriting effect

1.xml layout file

<com.zhouwei.mzbanner.MZBannerView
       android:id="@+id/banner"
       android:layout_width="match_parent"
       android:layout_height="200dp"
       android:layout_marginTop="10dp"
       app:open_mz_mode="true"
       app:canLoop="true"
       app:indicatorAlign="center"
       app:indicatorPaddingLeft="10dp"
       />Copy the code

2. Code in the activity:

        mMZBanner = (MZBannerView) view.findViewById(R.id.banner);

       // Set the data
        mMZBanner.setPages(list, new MZHolderCreator<BannerViewHolder>() {
            @Override
            public BannerViewHolder createViewHolder(a) {
                return newBannerViewHolder(); }});public static class BannerViewHolder implements MZViewHolder<Integer> {
        private ImageView mImageView;
        @Override
        public View createView(Context context) {
            // Return to the page layout
            View view = LayoutInflater.from(context).inflate(R.layout.banner_item,null);
            mImageView = (ImageView) view.findViewById(R.id.banner_image);
            return view;
        }

        @Override
        public void onBind(Context context, int position, Integer data) {
            // Data bindingmImageView.setImageResource(data); }}Copy the code

3. If Banner is used, note that start() is called in onResume and pause() is called in onPause. Not needed if used as a normal ViewPager.

 @Override
    public void onPause(a) {
        super.onPause();
        mMZBanner.pause();// Stop the rotation
    }

    @Override
    public void onResume(a) {
        super.onResume();
        mMZBanner.start();// Start the rotation
    }Copy the code

throughopen_mz_mode,middle_page_coverandcanLoopMZBannerView can be used as a Banner or a normal ViewPager. It can control the display effect of multiple banners:

1. Meizu Banner effect with the middle Page covering both sides.

 app:open_mz_mode="true"
 app:canLoop="true"
 app:middle_page_cover="true"Copy the code

2 Normal banner.

app:open_mz_mode="false"
app:canLoop="true"Copy the code

3 imitation Meizu Banner effect, the middle Page is not covered.

 app:open_mz_mode="true"
 app:canLoop="true"
 app:middle_page_cover="false"Copy the code

4 Imitation iQiyi Banner effect, there are gaps between pages.

 <com.zhouwei.mzbanner.MZBannerView
       android:id="@+id/banner_normal"
       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"
       />Copy the code

In addition to the above code, we also need to set the left and right Margin inside the Page item layout:

<? xml version="1.0" encoding="utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <ImageView
        android:id="@+id/banner_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        />Copy the code

The effect is as follows:

Normal ViewPager with Meizu Banner effect

 app:open_mz_mode="true"
 app:canLoop="false"Copy the code

6 Common ViewPager

 app:canLoop="false"
 app:open_mz_mode="false"Copy the code

This is all local Banner data, but in projects we usually get Banner data from the network, see remoteTestFragment.java

Other external apis

 / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
    /** external API **/
    / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
    // Start the rotation
     start()
    // Stop the rotation
     pause()

    // Set the BannerView switch interval
     setDelayedTime(int delayedTime)
    // Set the page change listener
    addPageChangeLisnter(ViewPager.OnPageChangeListener onPageChangeListener)

    // Add Page click events
     setBannerPageClickListener(BannerPageClickListener bannerPageClickListener)
    // Set whether to display Indicator
    setIndicatorVisible(boolean visible)
    / / get the ViewPager
    ViewPager getViewPager(a)
    // Set Indicator resources
    setIndicatorRes(int unSelectRes,int selectRes)
    // Set page data
    setPages(List<T> datas,MZHolderCreator mzHolderCreator)
    // Set the indicator display position
    setIndicatorAlign(IndicatorAlign indicatorAlign)
    // Set the switching speed of ViewPager (Banner)
    setDuration(int duration)Copy the code

Because it is wrapped around ViewPager, you can set certain ViewPager properties by using getViewPager to get the ViewPager properties and then set the corresponding properties

At the end

MZBannerView has been updated to V2.0.0 with two new display effects and some Bug fixes. Please feel free to comment on Issues or in the comments section.

More Android dry goods articles, pay attention to the public number [Android technology grocery store]