首页 > 其他分享 >Android:通过 Banner 和 Glide 在 Fragment 中实现轮播图

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

时间:2022-12-12 02:33:05浏览次数:65  
标签:ViewGroup 轮播 Glide Fragment url fun imageView SlideShowItem

添加依赖包

通过 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);
  }
}

效果图

标签:ViewGroup,轮播,Glide,Fragment,url,fun,imageView,SlideShowItem
From: https://www.cnblogs.com/Enziandom/p/16975095.html

相关文章

  • Fragment 和 布局文件中的 include 有何区别?
    Fragment存在于Activity中,但是Fragment管理自己的界面和逻辑,表面上看,Fragment最终的布局还是要被压入到Activity中的布局中。03#Android基础:Fragment。当我们写......
  • js实现轮播图(下面附有高清图)
    我所实现的和别的博主大大不太一样,我所采用的的是z-index方式以及浮动的方式,实现的轮播图实现的效果图为:html主要实现代码:<!DOCTYPEhtml><html><head><metacharset=......
  • Golang依赖管理工具:glide从入门到精通使用
    这是一个创建于 2017-07-2205:33:09 的文章,其中的信息可能已经有所发展或是发生改变。介绍不论是开发Java还是你正在学习的Golang,都会遇到依赖管理问题。Java有牛逼轰轰......
  • 自定义的Qt轮播图控件
    该控件是模仿了一个名叫QCoolPage的开源项目里的轮播图控件,但是实现方式跟它的完全不同。QCoolPage里是用QPushButton和QLabel加上自定义styleSheet实现的;而我是用自定义控......
  • 学成在线项目-轮播图banner
    学成在线项目-轮播图banner1、效果图如下2、html代码如下:<!DOCTYPEhtml><htmllang="en"><head><linkrel="stylesheet"href="./css/index.css"><metac......
  • vue中swiper轮播插件的一个错误
    在引入插件的时候无论如何也不生效,后来发现2.添加HTML内容。Swiper7的默认容器是'.swiper',Swiper6之前是'.swiper-container'。<divclass="swiper"><divclass="s......
  • Android ViewPager2 + Fragment + BottomNavigationView 联动
    AndroidViewPager2+Fragment+BottomNavigationView联动本篇主要介绍一下ViewPager2+Fragment+BottomNavigationView,上篇中把ViewPager2和Fragment联动起......
  • 【tp】相册轮播循环
    实现效果:  后台:   <dl><labelclass="item-label">相册:</label><divstyle='f......
  • Android ViewPager2 + Fragment 联动
    AndroidViewPager2+Fragment联动本篇主要介绍一下ViewPager2+Fragment,上篇中简单使用了ViewPager2实现了一个图片的滑动效果,那图片视图可以滑动,ViewPage......
  • 教你用JavaScript完成轮播图
    案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,做一个轮播图。图片每3秒自动轮换,也可以点击左右按键轮播图片,当图片......