• 欢迎光临~

Android:通过 Banner 和 Glide 在 Fragment 中实现轮播图

开发技术 开发技术 2022-12-12 次浏览

添加依赖包

通过 Banner 和 Glide 实现轮播图。引入第三方库:

dependencies {
  implementation 'io.github.youth5201314:banner:2.2.2'
  implementation 'com.github.bumptech.glide:glide:4.14.2'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.14.2'
}

Banner 视图

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
  android:background="#EAEAEA"
  android:padding="5dp">

  <ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginStart="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginEnd="5dp"
    android:layout_marginBottom="5dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="SpeakableTextPresentCheck">

    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content">

      <com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        app:banner_radius="8dp" />

    </RelativeLayout>
  </ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

图片实体类

class SlideShowItem() {
  var url: String = ""

  constructor(url: String) : this() {
    this.url = url
  }

  override fun toString(): String {
    return "SlideShowItem(url='$url')"
  }
}

轮播图适配器

class SlideShowAdapter(
  banners: List<SlideShowItem>,
  private var fragment: Fragment
) : BannerAdapter<SlideShowItem, SlideShowAdapter.SlideShowViewHolder>(banners) {

  override fun onCreateHolder(parent: ViewGroup?, viewType: Int): SlideShowViewHolder {
    val imageView = ImageView(parent!!.context)
    imageView.layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
    imageView.scaleType = ImageView.ScaleType.CENTER_CROP
    return SlideShowViewHolder(imageView)
  }

  override fun onBindView(holder: SlideShowViewHolder?, data: SlideShowItem?, position: Int, size: Int) {
    Glide.with(fragment).load(mDatas[position].url).into(holder!!.imageView)
  }

  class SlideShowViewHolder(var imageView: ImageView) : RecyclerView.ViewHolder(imageView) {
    init {
      imageView.scaleType = ImageView.ScaleType.CENTER_CROP
    }
  }
}

Fragment 中使用

class NavFindFragment : Fragment() {
  private lateinit var binding: FragmentNavFindBinding

  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
    binding = FragmentNavFindBinding.inflate(layoutInflater, container, false)
    if (savedInstanceState == null) {
      createBanner()
    }
    return binding.root
  }

  private fun createBanner() {
    binding.banner.addBannerLifecycleObserver(this).setAdapter(
      SlideShowAdapter(
        listOf(
          SlideShowItem("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1f28377c4236841c7294ae68c88e5af6.jpg?w=2452&h=920"),
          SlideShowItem("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e89200db5385ff3d99fb45cc342fcd14.jpg?thumb=1&w=1533&h=575&f=webp&q=90")
        ), this
      )
    ).indicator = CircleIndicator(context);
  }
}

效果图

Android:通过 Banner 和 Glide 在 Fragment 中实现轮播图
程序员灯塔
转载请注明原文链接:Android:通过 Banner 和 Glide 在 Fragment 中实现轮播图
喜欢 (0)