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.XBannerandroid: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.XBannerandroid: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.XBannerandroid: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;@Overrideprotected 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() {@Overridepublic 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() {@Overridepublic 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;}@Overridepublic Object getXBannerUrl() {return imageurl;}}
}

就是最后的哪一个方法

下面是原作者的地址：https://github.com/xiaohaibin/XBanner（很不错）

最后的最后是源码下载地址：https://download.csdn.net/download/lanrenxiaowen/10853197

Android卡片式轮播相关推荐

模仿最新版爱奇艺卡片式轮播效果CardBannerDemo
本文介绍了一款模仿最新版爱奇艺卡片式轮播lib github地址:https://github.com/xuezj/CardBannerDemo CardBannerDemo 效果图 Attribut ...
uni-app卡片式轮播
uni-app卡片式轮播视图部分: <template><uni-swiper-dot :info="info" :current="current& ...
后台和小程序实现卡片式轮播图
营销活动中,轮播图效果是比较常见的,基于轮播图拓展的组件也很多,这里记录一下使用swiper实现卡片式轮播的过程,分为PC端和小程序端,其中PC端是Vue+typescript,小程序端是uni-ap ...
uniapp卡片式轮播图——uView
1.下载安装uView uView2.0重磅发布,利剑出鞘,一统江湖 - DCloud 插件市场 2.在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vu ...
卡片式轮播图效果实现
基于 react 实现,vue 类似效果图思路效果图中绿色边框为轮播图区域水平式多张图片水平排列整体宽度为单张图片n倍 translateX 位移方式一次整体移动一张图片宽度 ...
小程序好看卡片式轮播
效果图: wxml  <view class="swiper-view"><swiper class="swipers ...
android 卡片轮播图,android自定义view之卡片式轮播图
前言 Android View体系是界面编程的核心,他的重要性不亚于Android四大组件.能够熟练的编写符合需求自定义VIEW是一个android程序员进阶的重要标志,在很多的企业招聘中都会在任职需 ...
html卡片式轮播图带字,卡片式轮播
// import { ce } from 'migu-sdk'; export default { name: 'zt', data() { return { activityId: 'MAC_ZP ...
uniapp卡片式轮播图
使用原生的swiper组件标签 <swiper style="height:240rpx" class="swiper-tall" :autoplay=& ...

Android卡片式轮播

自定义属性说明

混淆配置

Android卡片式轮播相关推荐

最新文章

热门文章