android Banner轮播图自定义适配器

623 阅读1分钟

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

/**
 * Created by yechaoa on 2021/2/5.
 * Describe :
 */
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)
//        val imageView = ImageView(parent!!.context)
//        val params = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
//            ViewGroup.LayoutParams.MATCH_PARENT)
//        imageView.layoutParams = params
//        imageView.scaleType = ImageView.ScaleType.CENTER_CROP
        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: ImageView = view as ImageView
        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.效果

image.png

image.png