Android卡片式轮播
在app.gradle 添加：
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:support-v4:27.1.1'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
implementation 'com.github.xiaohaibin:XBanner:1.6.1'//将latestVersion替换成上面 jitpack 后面的版本号
implementation 'com.github.bumptech.glide:glide:3.7.0'
annotationProcessor 'com.github.bumptech.glide:glide:3.7.0'
implementation 'com.zhy:okhttputils:2.0.0'
implementation 'com.google.code.gson:gson:2.8.5'
// 一般依赖：
implementation 'com.facebook.fresco:fresco:0.14.1'
// 如果需要支持gif，再添加：
implementation 'com.facebook.fresco:animated-gif:0.12.0'
}在project.gradle里面添加：
allprojects {
repositories {
google()
jcenter()
maven { url 'https://jitpack.io' }
}
}以上所有的依赖就完成了，下面就是代码部分：
因为我用的是模拟接口的图片地址，所以我是自己写了一段json，有需要的可以自行copy，要用自己的就在调用的部分换成自己的json就行：
public class Api {
public static String jiek="{
"code": 800,
"msg": "ok",
"obj": [{
"name": "zahnsan",
"imageurl": "http://pic19.nipic.com/20120308/4970979_102637717125_2.jpg",
"age": "20"
}, {
"name": "zahnsan",
"imageurl": "http://pic25.nipic.com/20121110/10839717_103723525199_2.jpg",
"age": "20"
}, {
"name": "zahnsan",
"imageurl": "http://pic31.nipic.com/20130722/9252150_095713523386_2.jpg",
"age": "20"
}, {
"name": "zahnsan",
"imageurl": "http://www.pptbz.com/pptpic/UploadFiles_6909/201306/2013062320262198.jpg",
"age": "20"
}]
}";
}先看布局部分：
<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:orientation="vertical"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.stx.xhb.xbanner.XBanner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:AutoPlayTime="3000"
app:isAutoPlay="false"
app:isClipChildrenMode="true"
app:isHandLoop="true"
app:isShowIndicatorOnlyOne="true"
app:isShowNumberIndicator="false"
app:isShowTips="false"
app:pointsVisibility="false"
app:pageChangeDuration="800"
app:pointsPosition="RIGHT"/>
<com.stx.xhb.xbanner.XBanner
android:id="@+id/banner2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:AutoPlayTime="3000"
app:isAutoPlay="false"
app:pointsVisibility="false"
app:isClipChildrenMode="true"
app:isHandLoop="true"
app:pageChangeDuration="800"/>
<com.stx.xhb.xbanner.XBanner
android:id="@+id/banner3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:AutoPlayTime="3000"
app:clipChildrenLeftRightMargin="80dp"
app:isAutoPlay="false"
app:isClipChildrenMode="true"
app:isHandLoop="true"
app:isShowIndicatorOnlyOne="true"
app:isShowNumberIndicator="false"
app:pointsVisibility="false"
app:pageChangeDuration="800" />
</LinearLayout>里面有很多种调配方案：
自定义属性说明
| 属性名 | 属性说明 | 属性值 |
| isAutoPlay | 是否支持自动轮播 | boolean类型，默认为true |
| isTipsMarquee | 是否支持提示性文字跑马灯效果 | boolean类型，默认为false |
| AutoPlayTime | 图片轮播时间间隔 | int值，默认为5s |
| pointNormal | 指示器未选中时状态点 | drawable，不设置的话为默认状态点 |
| pointSelect | 指示器选中时状态点 | drawable，不设置的话为默认状态点 |
| pointsVisibility | 是否显示指示器 | boolean类型，默认为true |
| pointsPosition | 指示点显示位置 | LEFT、CENTER、RIGHT类型，默认为CENTER |
| pointsContainerBackground | 指示器背景 | 可自定义设置指示器背景 |
| pointContainerPosition | 指示器显示位置 | TOP、BOTTOM类型，默认为BOTTOM |
| pointContainerLeftRightPadding | 指示点容器左右内间距 | dimension，默认为10dp |
| pointTopBottomPadding | 指示点上下内间距 | dimension，默认为6dp |
| pointLeftRightPadding | 指示点左右内间距 | dimension，默认为3dp |
| tipTextColor | 提示文案的文字颜色 | reference |
| tipTextSize | 提示文案的文字大小 | dimension，默认为10dp |
| isShowTips | 是否展示提示文案 | boolean类型，默认为false 默认不展示 |
| isShowNumberIndicator | 是否显示数字指示器 | boolean,默认为false不显示 |
| numberIndicatorBacgroud | 数字指示器背景 | reference |
| isShowIndicatorOnlyOne | 当只有一张图片的时候是否显示指示点 | boolean，默认为false，不显示 |
| pageChangeDuration | 图片切换速度 | int值，默认为1000ms |
| isHandLoop | 是否支持手动无限循环切换图片 | boolean类型，默认为false |
| placeholderDrawable | 设置整体轮播框架占位图 | reference |
| isClipChildrenMode | 是否开启一屏显示多个模式 | boolean类型，默认为false 默认不开启 |
| clipChildrenLeftRightMargin | 一屏显示多个左右间距 | dimension ，默认为30dp |
| clipChildrenTopBottomMargin | 一屏显示多个上下间距 | dimension ，默认为30dp |
| viewpagerMargin | viewpager页面间距 | dimension ，默认为10dp |
| isClipChildrenModeLessThree | 少于三张是否支持一屏多显模式 | boolean类型，默认为false 默认不开启 |
混淆配置
##XBanner 图片轮播混淆配置
-keep class com.stx.xhb.xbanner.**{*;}MainActivity：
public class MainActivity extends AppCompatActivity {
private XBanner mBanner;
private XBanner mBanner2;
private XBanner mBanner3;
private Bean bean;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Fresco.initialize(this);
mBanner = findViewById(R.id.banner);
mBanner2 = findViewById(R.id.banner2);
mBanner3 = findViewById(R.id.banner3);
//
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, ScreenUtil.getScreenWidth(this) / 2);
mBanner.setLayoutParams(layoutParams);
//
mBanner2.setLayoutParams(layoutParams);
//修改切换动画
mBanner2.setPageTransformer(Transformer.Default);
mBanner3.setLayoutParams(layoutParams);
//
initBanner(mBanner);
initBanner(mBanner2);
initBanner(mBanner3);
initData();
}
/**
* 初始化XBanner
*/
private void initBanner(XBanner banner) {
//设置广告图片点击事件
banner.setOnItemClickListener(new XBanner.OnItemClickListener() {
@Override
public void onItemClick(XBanner banner, Object model, View view, int position) {
Toast.makeText(MainActivity.this, "点击了第" + (position + 1) + "图片", Toast.LENGTH_SHORT).show();
}
});
//加载广告图片
banner.loadImage(new XBanner.XBannerAdapter() {
@Override
public void loadBanner(XBanner banner, Object model, View view, int position) {
//此处适用Fresco加载图片，可自行替换自己的图片加载框架
Log.e("canshushi", "\nposition=" + position + "\nbanner=" + banner.getRealCount() + "\nmodel=" + model.toString() + "\nview=" + view.getId() + "");
SimpleDraweeView draweeView = (SimpleDraweeView) view;
Bean.ObjBean listBean = ((Bean.ObjBean) model);
String url = listBean.getImageurl();
draweeView.setImageURI(Uri.parse(url));
// Glide.with(MainActivity.this).load(url).placeholder(R.drawable.default_image).error(R.drawable.default_image).into((ImageView) view);
}
});
}
/**
* 初始化数据
*/
private void initData() {
Gson gson = new Gson();
bean = gson.fromJson(Api.jiek, Bean.class);
List<Bean.ObjBean> datas = new ArrayList<>();
for (int i = 0; i < bean.getObj().size(); i++) {
datas.add(bean.getObj().get(i));
}
//刷新数据之后，需要重新设置是否支持自动轮播
mBanner.setAutoPlayAble(datas.size() > 1);
mBanner.setBannerData(R.layout.layout_fresco_imageview, datas);
//刷新数据之后，需要重新设置是否支持自动轮播
mBanner2.setAutoPlayAble(datas.size() > 1);
mBanner2.setBannerData(R.layout.layout_fresco_imageview, datas);
//刷新数据之后，需要重新设置是否支持自动轮播
mBanner3.setAutoPlayAble(datas.size() > 1);
mBanner3.setBannerData(R.layout.layout_fresco_imageview, datas);
}
}后面的是需要用的一些东西：
public class ScreenUtil {
private static final int[] APPCOMPAT_CHECK_ATTRS = {R.attr.colorPrimary};
public static void checkAppCompatTheme(Context context) {
TypedArray a = context.obtainStyledAttributes(APPCOMPAT_CHECK_ATTRS);
final boolean failed = !a.hasValue(0);
if (a != null) {
a.recycle();
}
if (failed) {
throw new IllegalArgumentException("You need to use a Theme.AppCompat theme "
+ "(or descendant) with the design library.");
}
}
public static int px2sp(Context context, float pxValue) {
final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
return (int) (pxValue / fontScale + 0.5f);
}
public static int dp2px(Context context, int dp) {
DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
return (int) ((dp * displayMetrics.density) + 0.5);
}
public static int dp2px(Context context, double dp) {
DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
return (int) ((dp * displayMetrics.density) + 0.5);
}
public static int getScreenWidth(Context context) {
DisplayMetrics dm = new DisplayMetrics();
//((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(dm);
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
Display display = wm.getDefaultDisplay();
display.getMetrics(dm);
return dm.widthPixels;
}
/**
* 获取屏幕的高
*/
public static int getScreenHeight(Context context) {
return context.getResources().getDisplayMetrics().heightPixels;
}
}和layout_fresco_imageview.xml
<com.facebook.drawee.view.SimpleDraweeView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
fresco:placeholderImage="@drawable/default_image"
fresco:roundedCornerRadius="8dp">
</com.facebook.drawee.view.SimpleDraweeView>最后一个最重要的一个放在后面，就是我们的bean类，这个很重要，我们一般都是用的生成工具生成的，但是要在图片地址的后面继承SimpleBannerInfo，在返回的地址里面返回我们得到的图片地址
public class Bean {
private int code;
private String msg;
private List<ObjBean> obj;
public Bean(int code, String msg, List<ObjBean> obj) {
this.code = code;
this.msg = msg;
this.obj = obj;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public List<ObjBean> getObj() {
return obj;
}
public void setObj(List<ObjBean> obj) {
this.obj = obj;
}
public class ObjBean extends SimpleBannerInfo{
private String name;
private String age;
private String imageurl;
public ObjBean(String name, String age, String imageurl) {
this.name = name;
this.age = age;
this.imageurl = imageurl;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAge() {
return age;
}
public void setAge(String age) {
this.age = age;
}
public String getImageurl() {
return imageurl;
}
public void setImageurl(String imageurl) {
this.imageurl = imageurl;
}
@Override
public Object getXBannerUrl() {
return imageurl;
}
}
}就是最后的哪一个方法
下面是原作者的地址：https://github.com/xiaohaibin/XBanner（很不错）
最后的最后是源码下载地址：https://download.csdn.net/download/lanrenxiaowen/10853197