效果图:
实现方法:
1.在build中添加引用
(1).在头部添加
apply plugin: 'kotlin-kapt'
(2).在dependencies中添加
//glide
implementation "com.github.bumptech.glide:glide:4.10.0"
kapt "com.github.bumptech.glide:compiler:4.10.0"
//广告banner轮滑功能
implementation "com.youth.banner:banner:2.0.10"
//recyclerview
implementation "androidx.recyclerview:recyclerview:1.1.0"
2.在drawable中添加自定义圆点例如:indicator_normal
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#00BCFF" />
<size
android:width="8dp"
android:height="8dp" />
</shape>
广告图片根据需要自己添加,当然也可以是网络请求下来的图片,这样添加原点时就需要改善一下,动态添加呈放圆点的容器ImageView。
3.添加图片加载工具类:
(1).WTGlide
package com.ruidde.animationtimesdeclinedemo.utils
import android.content.Context
import android.widget.ImageView
import com.bumptech.glide.annotation.GlideModule
import com.bumptech.glide.load.MultiTransformation
import com.bumptech.glide.module.AppGlideModule
import com.ruidde.animationtimesdeclinedemo.R
@GlideModule
class WTGlide : AppGlideModule() {
companion object {
fun loadCrop(
context: Context,
imageView: ImageView,
path: Int,
place: Int = R.drawable.bander_one
) {
GlideApp.with(context)
.load(path)
.placeholder(place)
// .centerInside()
.dontAnimate()
.into(imageView)
}
fun loadCropRound(context: Context, imageView: ImageView, path: String) {
GlideApp.with(context)
.load(path)
.centerCrop()
.transform(MultiTransformation(RoundedCorners(3)))
.dontAnimate()
.into(imageView)
}
}
}
(2).RoundedCorners
package com.ruidde.animationtimesdeclinedemo.utils;
import android.annotation.SuppressLint;
import android.graphics.Bitmap;
import androidx.annotation.NonNull;
import androidx.core.util.Preconditions;
import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
import com.bumptech.glide.load.resource.bitmap.BitmapTransformation;
import com.bumptech.glide.load.resource.bitmap.TransformationUtils;
import com.bumptech.glide.util.Util;
import java.nio.ByteBuffer;
import java.security.MessageDigest;
public class RoundedCorners extends BitmapTransformation {
private static final String ID = "com.bumptech.glide.load.resource.bitmap.RoundedCorners";
private static final byte[] ID_BYTES = ID.getBytes(CHARSET);
private final int roundingRadius;
/**
* @param roundingRadius the corner radius (in device-specific pixels).
* @throws IllegalArgumentException if rounding radius is 0 or less.
*/
@SuppressLint("RestrictedApi")
public RoundedCorners(int roundingRadius) {
Preconditions.checkArgument(roundingRadius > 0, "roundingRadius must be greater than 0.");
this.roundingRadius = roundingRadius;
}
@Override
protected Bitmap transform(
@NonNull BitmapPool pool, @NonNull Bitmap toTransform, int outWidth, int outHeight) {
return TransformationUtils.roundedCorners(pool, toTransform, roundingRadius);
}
@Override
public boolean equals(Object o) {
if (o instanceof RoundedCorners) {
RoundedCorners other = (RoundedCorners) o;
return roundingRadius == other.roundingRadius;
}
return false;
}
@Override
public int hashCode() {
return Util.hashCode(ID.hashCode(),
Util.hashCode(roundingRadius));
}
@Override
public void updateDiskCacheKey(@NonNull MessageDigest messageDigest) {
messageDigest.update(ID_BYTES);
byte[] radiusData = ByteBuffer.allocate(4).putInt(roundingRadius).array();
messageDigest.update(radiusData);
}
}
3.Acticity以及布局实现
(1).xml
activity_main: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <RelativeLayout android:layout_width="match_parent" android:layout_margin="15dp" android:layout_height="160dp"> <com.youth.banner.Banner android:id="@+id/indexBanner" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#F0F2F7" /> <LinearLayout android:id="@+id/ll" android:layout_width="wrap_content" android:layout_height="10dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="10dp" android:gravity="center_horizontal" android:orientation="horizontal"> <ImageView android:id="@+id/iv1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/indicator_normal" /> <ImageView android:id="@+id/iv2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:src="@drawable/indicator_selector" /> <ImageView android:id="@+id/iv3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:src="@drawable/indicator_selector" /> </LinearLayout> </RelativeLayout> </LinearLayout> item_banner: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/imgBanner" android:layout_width="match_parent" android:scaleType="fitXY" android:layout_marginStart="5dp" android:layout_marginEnd="5dp" android:layout_height="match_parent"/> </RelativeLayout>
(2).adapter:IndexBannerAdapter
package com.ruidde.animationtimesdeclinedemo.utils
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import androidx.recyclerview.widget.RecyclerView
import com.ruidde.animationtimesdeclinedemo.R
import com.youth.banner.adapter.BannerAdapter
class IndexBannerAdapter(private var contxt: Context, urls: List<Int>) :
BannerAdapter<Int, IndexBannerAdapter.BannerViewHolder>(urls) {
override fun onCreateHolder(parent: ViewGroup?, viewType: Int): BannerViewHolder {
val view = LayoutInflater.from(contxt).inflate(R.layout.item_banner, parent, false)
return BannerViewHolder(view)
}
override fun onBindView(holder: BannerViewHolder?, data: Int, position: Int, size: Int) {
WTGlide.loadCrop(contxt, holder!!.imageView, data, R.drawable.bander_one)
}
inner class BannerViewHolder(view: View) : RecyclerView.ViewHolder(view) {
val imageView: ImageView = view.findViewById(R.id.imgBanner)
}
}
(3).activity
package com.ruidde.animationtimesdeclinedemo
import android.content.Context
import android.os.Bundle
import android.util.Log
import androidx.appcompat.app.AppCompatActivity
import com.ruidde.animationtimesdeclinedemo.utils.IndexBannerAdapter
import com.youth.banner.listener.OnPageChangeListener
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity(), OnPageChangeListener {
lateinit var mContext: Context
var bannerList: List<Int> = mutableListOf(R.drawable.bander_one, R.drawable.home_banner, R.drawable.bander_three)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
mContext = this
initView()
initData()
}
fun initView() {
val bannerAdapter = IndexBannerAdapter(mContext, bannerList)
indexBanner.adapter = bannerAdapter
indexBanner.addOnPageChangeListener(this)
}
fun initData() {
}
override fun onPageScrollStateChanged(state: Int) {
}
override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
}
override fun onPageSelected(position: Int) {
Log.e("okhttp" ,"position = "+position)
if (position == 0) {
iv1.setImageResource(R.drawable.indicator_normal)
iv2.setImageResource(R.drawable.indicator_selector)
iv3.setImageResource(R.drawable.indicator_selector)
} else if (position == 1) {
iv1.setImageResource(R.drawable.indicator_selector)
iv2.setImageResource(R.drawable.indicator_normal)
iv3.setImageResource(R.drawable.indicator_selector)
} else if (position == 2) {
iv1.setImageResource(R.drawable.indicator_selector)
iv2.setImageResource(R.drawable.indicator_selector)
iv3.setImageResource(R.drawable.indicator_normal)
}
}
}
总结:这样就实现banner广告轮播效果了,希望对小伙伴们有所帮助
demo