Banner 和 Glide 在 Fragment 中实现轮播图

添加依赖信息

引入 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>

图片实体类

Kotlin：

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

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

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

Java：

public class BannerViewItem {
  private String url;
  
  public BannerViewItem(String url) {
    this.url = url;
  }
  
  public BannerViewItem() {}
  
  public getUrl() {
    return this.url
  }

  public setUrl(String url) {
    this.url = url;
  }
}

轮播图适配器

创建一个类，继承 BannerAdapter，类中再创建一个 Holder 内部类。实现 BannerAdapter 的两个函数：onCreateHolder、onBindView。

Kotlin：

class BannerViewApapter(
  banners: List<BannerViewItem>,
  private var fragment: Fragment
) : BannerAdapter<BannerViewItem, BannerViewApapter.BannerViewHolder>(banners) {

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

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

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

Java：

public class BannerViewApapter {
  private List<BannerViewItem> banners;
  private Fragment fragment;

  public BannerViewApapter(List<BannerViewItem> banners, Fragment fragment) {
    super(banners);
    this.fragment = fragment;
  }

  @Override
  public BannerViewHolder onCreateHolder(ViewGroup parent, int viewType) {
    ImageView imageView = new ImageView(parent.getContext());
    imageView.setLayoutParams(new ViewGroup.LayoutParams(
      ViewGroup.LayoutParams.MATCH_PARENT,
      ViewGroup.LayoutParams.MATCH_PARENT));
    imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
    return new BannerViewHolder(imageView);
  }

  @Override
  public void onBindView(BannerViewHolder holder, BannerViewItem data, int position, int size) {
    Glide.with(fragment).load(mDatas.get(position).getUrl()).into(holder.imageView);
  }

  private class BannerViewHolder extends RecyclerView.ViewHolder {
    ImageView imageView;

    public BannerViewHolder(@NonNull ImageView view) {
      super(view);
      this.imageView = view;
      imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
    }
  }
}

Fragment 中使用

通过 id 找到布局文件中的 Banner 视图，给其设置 Adapter。

Kotlin：

class HomeFragment : Fragment() {
  private lateinit var binding: FragmentHomeBinding

  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
    binding = FragmentNavFindBinding.inflate(layoutInflater, container, false)
    binding.banner.addBannerLifecycleObserver(this).setAdapter(
      BannerViewApapter(
        listOf(
          BannerViewItem("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1f28377c4236841c7294ae68c88e5af6.jpg?w=2452&h=920"),
          BannerViewItem("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);
    return binding.root
  }
}

Java：

public class HomeFragment extends Fragment {
  private final ArrayList<BannerViewItem> banners;

  public HomeFragment() {
    banners = new ArrayList<>();
    banners.add(new BannerViewItem("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1f28377c4236841c7294ae68c88e5af6.jpg?w=2452&h=920"));
    banners.add(new BannerViewItem("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e89200db5385ff3d99fb45cc342fcd14.jpg?thumb=1&w=1533&h=575&f=webp&q=90"));
    banners.add(new BannerViewItem("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34ee703098b12753b2130a3462ca33ac.jpg?thumb=1&w=1533&h=575&f=webp&q=90"));
  }

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View inflate = inflater.inflate(R.layout.fragment_home, container, false);
    Banner banner = inflate.findViewById(R.id.banner);
    banner.addBannerLifecycleObserver(this)
          .setAdapter(new BannerViewApapter(banners, this))
          .setIndicator(new CircleIndicator(getContext()));
    return inflate;
  }
}

效果图