Banner打造广告自动轮播图

前言：

需求：现在的绝大数app都有banner界面，实现循环播放多个广告图片和手动滑动循环等功能。因为ViewPager并不支持循环翻页， 所以要实现循环还得需要自己去动手，目前框架可以进行不同样式、不同动画设置， 以及完善的api方法能满足大部分的需求了。

用途：Android广告图片轮播控件，支持无限循环和多种主题，可以灵活设置轮播样式、动画、轮播和切换时间、位置、图片加载框架等！

使用步骤：

添加依赖

 compile 'com.youth.banner:banner:1.4.10'
  //一种程序崩溃，还原框架   
 compile 'com.zxy.android:recovery:0.0.8'
 //glide图片框架 
 compile 'com.github.bumptech.glide:glide:3.7.0'

添加权限到 AndroidManifest.xml

 <uses-permission android:name="android.permission.INTERNET" />

 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

到这里，依赖和权限已经准备好了，开始写布局。

Xml布局：

Banner布局

<?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="match_parent"
    android:orientation="vertical"
    tools:context="com.example.administrator.recyclerview.BannerActivity">
 <ListView
     android:id="@+id/list"
     android:layout_width="match_parent"
     android:layout_height="match_parent">


 </ListView>
</LinearLayout>

header布局

<?xml version="1.0" encoding="utf-8"?>
<com.youth.banner.Banner xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:Attributes="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    Attributes:indicator_width="8dp" //这两个属性设置了圆形指示器的宽高
    app:indicator_height="5dp" />

Attributes属性（banner布局文件中调用）

Attributes	forma	describe
delay_time	integer	轮播间隔时间，默认2000
scroll_time	integer	轮播滑动执行时间，默认800
is_auto_play	boolean	是否自动轮播，默认true
title_background	color	reference
title_textcolor	color	标题字体颜色
title_textsize	dimension	标题字体大小
title_height	dimension	标题栏高度
indicator_width	dimension	指示器圆形按钮的宽度
indicator_height	dimension	指示器圆形按钮的高度
indicator_margin	dimension	指示器之间的间距
indicator_drawable_selected	reference	指示器选中效果
indicator_drawable_unselected	reference	指示器未选中效果
image_scale_type	enum	和imageview的ScaleType作用一样
banner_default_image	reference	当banner数据为空是显示的默认图片
banner_layout	reference	自定义banner布局文件，但是必须保证id的名称一样（你可以将banner的布局文件复制出来进行修改）

这里一定要注意，如果你想对圆形指示器进行

setBannerStyle(int bannerStyle)

设置轮播样式（默认为CIRCLE_INDICATOR）

样式操作时，一定要给圆形设置宽高，同理设置成数字指示器是差不多的

text_item布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:textColor="@android:color/black"
        android:textSize="16sp" />
</RelativeLayout>

arrays资源文件

?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="url">
        <item>http://img.zcool.cn/community/01d28457d621800000018c1bb7877e.jpg</item>
        <item>http://img.zcool.cn/community/01ae5656e1427f6ac72531cb72bac5.jpg</item>
        <item>http://img.zcool.cn/community/0166c756e1427432f875520f7cc838.jpg</item>
        <item>http://img.zcool.cn/community/018fdb56e1428632f875520f7b67cb.jpg</item>
        <item>http://img.zcool.cn/community/01c8dc56e1428e6ac72531cbaa5f2c.jpg</item>
        <item>http://img.zcool.cn/community/01fd2756e142716ac72531cbf8bbbf.jpg</item>
        <item>http://img.zcool.cn/community/0192a557a352ef0000012e7ed104e4.jpg</item>
    </array>
    <array name="url1">
        <item>http://img.zcool.cn/community/01700557a7f42f0000018c1bd6eb23.jpg</item>
    </array>
    <array name="url2">
        <item>http://img.zcool.cn/community/01d28457d621800000018c1bb7877e.jpg</item>
        <item>http://img.zcool.cn/community/01ae5656e1427f6ac72531cb72bac5.jpg</item>
    </array>
    <array name="url4">
         <item> http://img.zcool.cn/community/01b72057a7e0790000018c1bf4fce0.png</item>
        <item>http://img.zcool.cn/community/01ae5656e1427f6ac72531cb72bac5.jpg</item>
        <item>http://img.zcool.cn/community/0166c756e1427432f875520f7cc838.jpg</item>
        <item>http://img.zcool.cn/community/018fdb56e1428632f875520f7b67cb.jpg</item>
    </array>
    <array name="title">
        <item>51巅峰钜惠</item>
        <item>十大星级品牌联盟，全场2折起</item>
        <item>生命不是要超越别人，而是要超越自己。</item>
        <item>己所不欲，勿施于人。——孔子</item>
        <item>嗨购5折不要停</item>
        <item>以诚感人者，人亦诚而应。</item>
        <item>习惯改变命运，细节铸就终身。</item>
    </array>
    <array name="demo_list">
        <item>banner动画预览</item>
        <item>banner内置样式预览</item>
        <item>banner指示器位置设置预览</item>
        <item>banner一些自定义样式方法预览</item>
        <item>！！banner更多用法请看文档，这里就不一一列举了！</item>
    </array>
    <array name="anim">
        <item>Default</item>
        <item>Accordion</item>
        <item>BackgroundToForeground</item>
        <item>ForegroundToBackground</item>
        <item>CubeIn</item>
        <item>CubeOut</item>
        <item>DepthPage</item>
        <item>FlipHorizontal</item>
        <item>FlipVertical</item>
        <item>RotateDown</item>
        <item>RotateUp</item>
        <item>ScaleInOut</item>
        <item>Stack</item>
        <item>Tablet</item>
        <item>ZoomIn</item>
        <item>ZoomOut</item>
        <item>ZoomOutSlide</item>
    </array>
    <string-array name="style">
        <item>NOT_INDICATOR</item>
        <item>CIRCLE_INDICATOR</item>
        <item>NUM_INDICATOR</item>
        <item>NUM_INDICATOR_TITLE</item>
        <item>CIRCLE_INDICATOR_TITLE</item>
        <item>CIRCLE_INDICATOR_TITLE_INSIDE</item>
    </string-array>
    <string-array name="indicator">
        <item>LEFT</item>
        <item>CENTER</item>
        <item>RIGHT</item>
    </string-array>
</resources>

这样界面和资源文件就准备好了，不过arrays资源文件里面的东西，我写的demo里面没有全部用到

Java代码

MyApplication

/**
 * Created by Administrator on 2018/6/1.
 */



import android.app.Application;
import android.content.Context;
import android.util.DisplayMetrics;
import android.widget.ImageView;

import com.facebook.drawee.backends.pipeline.Fresco;
import com.youth.banner.loader.ImageLoader;
import com.zxy.recovery.core.Recovery;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
 public class MyApplication extends Application {

        //本java文件用于全局
        public static List<?> images=new ArrayList<>();

        //屏幕的高
        public static int H;
        @Override
        public void onCreate() {
            super.onCreate();

            // 初始化Fresco
            initFresco();

            //初始化Banner
            initBanner();

        }

        private void initBanner() {
            H=getScreenH(this);
            Fresco.initialize(this);

            //让软件状态还原的框架
            Recovery.getInstance()
                    .debug(true)
                    .recoverInBackground(false)
                    .recoverStack(true)
                    .mainPage(MainActivity.class)
                    .init(this);
            //这个资源是放在assets包里面的，因为联网加载图片很慢（应该是我网络太差的原因），甚至显示不出来，

            //也可以写成String []urls=getResources().getStringArray(R.array.url4);
            String[] urls = {"file:///android_asset/two.jpg","file:///android_asset/three.jpg","file:///android_asset/four.jpg"};
            //将数组转换为list对象
             List list = Arrays.asList(urls);
            images = new ArrayList(list);

        }


        /**
         * 得到屏幕的高
         * @param aty
         * @return
         */
        public int getScreenH(Context aty) {
            DisplayMetrics dm = aty.getResources().getDisplayMetrics();
            return dm.heightPixels;
        }

        private void initFresco() {
            Fresco.initialize(this);
        }
    
    }

想要引用这个MyAPPlication,需要在清单文件的Application中加入

android:name=".MyApplication"

重写图片加载器

import android.content.Context;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.youth.banner.loader.ImageLoader;


public class GlideImageLoader extends ImageLoader {
    @Override
    public void displayImage(Context context, Object path, ImageView imageView) {
        //具体方法内容自己去选择，次方法是为了减少banner过多的依赖第三方包，所以将这个权限开放给使用者去选择
        Glide.with(context)
                .load(path)//图片地址
                .crossFade()
                .into(imageView);
    }
}

SampleAdapter适配器

import android.content.Context;
import android.graphics.Color;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import com.example.administrator.recyclerview.R;


public class SampleAdapter extends BaseAdapter {

    private String[] mDataset;
    private Context context;

    public SampleAdapter(Context context, String[] mDataset) {
        this.mDataset = mDataset;
        this.context = context;
    }

    @Override
    public int getCount() {
        return mDataset.length;
    }

    @Override
    public Object getItem(int position) {
        return position;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        convertView=View.inflate(context, R.layout.text_item,null);
        TextView textView = (TextView) convertView.findViewById(R.id.text);
        textView.setText(mDataset[position]);
        if (position%2==0){
            textView.setBackgroundColor(Color.parseColor("#f5f5f5"));
        }else{
            textView.setBackgroundColor(Color.WHITE);
        }
        return convertView;
    }

}

BannerActivity

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;

import com.example.administrator.recyclerview.Adapter.SampleAdapter;
import com.example.administrator.recyclerview.loader.GlideImageLoader;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.listener.OnBannerListener;

public class BannerActivity extends AppCompatActivity implements  AdapterView.OnItemClickListener, OnBannerListener {
    ListView listView;
    Banner banner;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //加载布局
        setContentView(R.layout.activity_banner);

        listView = (ListView) findViewById(R.id.list);

        //加载Banner
        View header = LayoutInflater.from(this).inflate(R.layout.header, null);
        banner = (Banner) header.findViewById(R.id.banner);
        //设置Banner的高和宽
        banner.setLayoutParams(new AbsListView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, MyApplication.H / 4));


        //Banner以头的方式添加到ListView中
        listView.addHeaderView(banner);


        //集合数据
        String[] data = getResources().getStringArray(R.array.demo_list);
        //设置ListView的适配器
        listView.setAdapter(new SampleAdapter(this, data));
        //设置ListView的item的点击事件
        listView.setOnItemClickListener(this);
        //简单使用--Banner加载图片地址
        banner.setImages(MyApplication.images)
                .setImageLoader(new GlideImageLoader())
                .setOnBannerListener(this)
                .setBannerStyle(BannerConfig.CIRCLE_INDICATOR)
                .setIndicatorGravity(BannerConfig.RIGHT)
                .start();



    }

    //如果你需要考虑更好的体验，可以这么操作
    @Override
    protected void onStart() {
        super.onStart();
        //开始轮播
        banner.startAutoPlay();
    }

    @Override
    protected void onStop() {
        super.onStop();
        //结束轮播
        banner.stopAutoPlay();
    }
     //item点击事件
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int postion, long id) {

    }
   //Banner点击事件
    @Override
    public void OnBannerClick(int position) {
        switch (position){
            case 0:
                Toast.makeText(BannerActivity.this,"哈哈哈",Toast.LENGTH_SHORT).show();
                break;
        }
    }
}

这样一个Banner的demo就写好了，Banner的github地址：https://github.com/youth5201314/banner