1.引入依赖
implementation "com.youth.banner:banner:2.1.0"
2.xxx.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:fitsSystemWindows="true"
tools:context=".ui.main.home.HomeFragment">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="@+id/toolbar">
<com.youth.banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@color/white"
app:banner_indicator_selected_color="@color/colorPrimary"
app:banner_radius="@dimen/dp_10"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:listitem="@layout/item_article" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
3.设置banner属性,包括适配器
mViewModel.bannerList.observe(this, { bannerList ->
//动态设置高度
val layoutParams = mBinding.banner.layoutParams
layoutParams.height = (DisplayUtil.getScreenWidth() / 1.99).roundToInt()
mBinding.banner.apply {
addBannerLifecycleObserver(this@HomeFragment)
setBannerGalleryEffect(8, 5)
setPageTransformer(ScaleInTransformer())
addPageTransformer(AlphaPageTransformer())
indicator = CircleIndicator(requireContext())
adapter = BannerImageAdapter(bannerList,context)
setDatas(bannerList)
start()
}
mBinding.banner.setOnBannerListener { _, position ->
val intent = Intent(requireContext(), xxx::class.java).apply {
putExtra(DetailActivity.WEB_URL, bannerList[position].url)
putExtra(DetailActivity.WEB_TITLE, bannerList[position].title)
}
startActivity(intent)
}
})
4.BannerImageAdapter
package com.yechaoa.wanandroid_jetpack.ui.adapter
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.bumptech.glide.Glide
import com.yechaoa.wanandroid_jetpack.R
import com.yechaoa.wanandroid_jetpack.data.bean.Banner
import com.youth.banner.adapter.BannerAdapter
class BannerImageAdapter(imageUrls: MutableList<Banner>,val context:Context) :
BannerAdapter<Banner, BannerImageAdapter.ImageHolder>(imageUrls) {
override fun onCreateHolder(parent: ViewGroup?, viewType: Int): ImageHolder {
var view= LayoutInflater.from(context).inflate(R.layout.item_banner,parent,false)
return ImageHolder(view)
}
override fun onBindView(holder: ImageHolder, data: Banner, position: Int, size: Int) {
Glide.with(holder.itemView).load(data.imagePath).into(holder.imageView)
holder.tvTitle.text=data.title
}
class ImageHolder(view: View) : RecyclerView.ViewHolder(view) {
var imageView=view.findViewById(R.id.img_banner) as ImageView
var tvTitle=view.findViewById(R.id.tv_title) as TextView
}
}
5.item_banner
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="@+id/img_banner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="1111111"
android:textStyle="bold"
android:textSize="@dimen/dp_20"
android:textColor="@color/red"
app:layout_constraintBottom_toBottomOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
6.Banner实体类
data class Banner(
val desc: String,
val id: Int,
val imagePath: String,
val isVisible: Int,
val order: Int,
val title: String,
val type: Int,
val url: String
)
7.效果