添加依赖信息

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

  }

}

巴特西

Android：Banner 和 Glide 在 Fragment 中实现轮播图

添加依赖信息

Banner 视图

图片实体类

轮播图适配器

Fragment 中使用

效果图

最新文章

热门文章