Android卡片式轮播

最新推荐文章于 2024-02-25 07:15:00 发布

十阶魔方

最新推荐文章于 2024-02-25 07:15:00 发布

阅读量4.6k

点赞数

分类专栏： Android开发

本文链接：https://blog.csdn.net/lanrenxiaowen/article/details/85019488

版权

Android开发专栏收录该内容

98 篇文章 10 订阅

订阅专栏

在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

十阶魔方

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Android卡片式轮播

在app.gradle 添加：dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompat-v7:27.1.1' implementation 'com.android.support:sup...
复制链接

扫一扫