Android卡片式轮播

Android卡片式轮播_第1张图片

在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"
	}]
}";
}

先看布局部分:



    
    
    
    
    

里面有很多种调配方案:

自定义属性说明

属性名 属性说明 属性值
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 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



最后一个最重要的一个放在后面,就是我们的bean类,这个很重要,我们一般都是用的生成工具生成的,但是要在图片地址的后面继承SimpleBannerInfo,在返回的地址里面返回我们得到的图片地址

public class Bean {
    private int code;
    private String msg;
    private List obj;

    public Bean(int code, String msg, List 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 getObj() {
        return obj;
    }

    public void setObj(List 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

你可能感兴趣的:(Android开发)