前言:
需求:现在的绝大数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