Android使用XBanner实现卡片式轮播图

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_41659081/article/details/102487427

1.添加Glide依赖

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.2.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

    //glide
    implementation 'com.github.bumptech.glide:glide:4.4.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.4.0'

}

2.添加xbanner.aar到lib目录下并引用

1.添加xbanner.arr到lib目录

2.在app目录下的build.gradle,android闭包中添加

    repositories {
        flatDir {
            dirs 'libs'
        }
    }

3.引用xbanner

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.2.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

    //glide
    implementation 'com.github.bumptech.glide:glide:4.4.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.4.0'
    
    implementation(name: 'xbanner', ext: 'aar')

}

3.添加权限

如果是加载网络图片的话，得加一个

<uses-permission android:name="android.permission.INTERNET"/>

4.MainActivity

public class MainActivity extends AppCompatActivity {
    private XBanner xBanner;
    private List<String> img_list = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        xBanner = findViewById(R.id.xbanner);

        img_list.add("https://yutang.8090.com/Uploads/Picture/2019-10-08/5d9c6b74a4a45.jpg");
        img_list.add("https://yutang.8090.com/Uploads/Picture/2019-09-18/5d81fa6dd1c80.jpg");
        img_list.add("https://yutang.8090.com/Uploads/Picture/2019-09-11/5d78b79fb0204.jpg");
        img_list.add("https://yutang.8090.com/Uploads/Picture/2019-10-09/5d9db05a8d144.jpg");
        img_list.add("https://yutang.8090.com/Uploads/Picture/2019-08-14/5d537a36041df.jpg");
        
        xBanner.setData(img_list,null);

        xBanner.loadImage(new XBanner.XBannerAdapter() {
            @Override
            public void loadBanner(XBanner banner, Object model, View view, int position) {
                RequestOptions myOptions = new RequestOptions()
                        .transform(new GlideRoundTransform(MainActivity.this,10));

                Glide
                        .with(MainActivity.this)
                        .load(img_list.get(position))
                        .apply(myOptions)
                        .into((ImageView) view);

            }
        });

    }

    @Override
    protected void onResume() {
        super.onResume();
        xBanner.startAutoPlay();
    }

    @Override
    protected void onStop() {
        super.onStop();
        xBanner.stopAutoPlay();
    }
}

也可以加载本地图片，替换掉img_list，换成本地资源就行

5.MainActivity的布局文件

<?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"
    tools:context=".MainActivity">

    <com.stx.xhb.xbanner.XBanner
        android:id="@+id/xbanner"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        app:AutoPlayTime="3000"
        app:pointsContainerBackground="#00000000"
        app:pointsVisibility="true"
        app:pointsPosition="CENTER"
        app:tipTextSize="12sp"
        app:isShowIndicatorOnlyOne="true"
        app:pageChangeDuration="800"
        app:isClipChildrenMode="true"
        tools:ignore="MissingConstraints"></com.stx.xhb.xbanner.XBanner>

</LinearLayout>

6.GlideRoundTransform加载圆角图片类

public class GlideRoundTransform extends BitmapTransformation {

    private static float radius = 0f;

    public GlideRoundTransform(Context context) {
        this(context, 4);
    }

    public GlideRoundTransform(Context context, int dp) {
//        super(context);
        this.radius = Resources.getSystem().getDisplayMetrics().density * dp;
    }

    @Override
    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        Bitmap bitmap = TransformationUtils.centerCrop(pool, toTransform, outWidth, outHeight);
        return roundCrop(pool, bitmap);
    }

    private static Bitmap roundCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;

        Bitmap result = pool.get(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
        if (result == null) {
            result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
        }

        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        RectF rectF = new RectF(0f, 0f, source.getWidth(), source.getHeight());
        canvas.drawRoundRect(rectF, radius, radius, paint);
        return result;
    }

    public String getId() {
        return getClass().getName() + Math.round(radius);
    }

    @Override
    public void updateDiskCacheKey(MessageDigest messageDigest) {

    }
}

效果如下图

下载地址