recycleview+cardview列表显示

简介

列表显示图片和文字介绍，项目中很大情况都会使用到，现在我们来看图片效果：
在这里插入图片描述
只需要传一个ListArray的数据，就可以显示，废话不多说，大家来看代码是怎么实现的

代码

1、导入依赖

	implementation 'com.android.support:recyclerview-v7:28.0.0'
    implementation 'com.android.support:cardview-v7:28.0.0'
    implementation 'com.github.bumptech.glide:glide:3.6.1'

2、网络权限

<uses-permission android:name="android.permission.INTERNET" />

<application
...
...
android:usesCleartextTraffic="true">

3、BaseAdapter

import android.content.Context
import android.support.v7.widget.RecyclerView
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import com.bumptech.glide.Glide
import kotlinx.android.synthetic.main.item_cardview.view.*

class BaseAdapter(var context: Context, private var mData: List<BaseBean>) : RecyclerView.Adapter<BaseAdapter.ItemViewHolder>() {

    var mListener: ((View, Int) -> Unit)? = null
    /**
     * 把数组的数据放到控件里
     */
    override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
        Log.d("WY+", "=onBindViewHolder=")
        val bean = mData!![position]
        holder.mTitle.text = bean.title
        holder.mDesc.text = bean.digest
//        加载图片到mNewsImg，这里省略
        Glide.with(context).load(bean.imgsrc).crossFade().into(holder.imageView)
    }

    override fun getItemCount(): Int {
        Log.d("WY+", "=getItemCount=")
        return mData.size
    }

    /**
     * 可视界面中，加载一个项就调用一次，滑动看见多一个item就会调用一次
     * @param holder
     * @param position
     */
    override fun onCreateViewHolder(parent: ViewGroup, p1: Int): BaseAdapter.ItemViewHolder {
        Log.d("WY+", "=getItemCount=")
        val v = LayoutInflater.from(parent.context)
                .inflate(R.layout.item_cardview, parent, false)
        return ItemViewHolder(v)
    }

    inner class ItemViewHolder(v: View) : RecyclerView.ViewHolder(v), View.OnClickListener {
        var mTitle: TextView = v.tvTitle//大字标题 控件绑定
        var mDesc: TextView = v.tvDesc//小字内容
        var imageView: ImageView = v.ivNews//显示recycleview中的图片

        init {
            v.setOnClickListener(this)
        }

        override fun onClick(view: View) {
            mListener?.invoke(view, this.adapterPosition)//回调给mainactivity
        }
    }
}

4、BaseBean

data class BaseBean(
        var title: String,//标题
        var digest: String,//小内容
        var imgsrc: String//图片地址
)

5、MainActivity


import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.widget.DefaultItemAnimator
import android.support.v7.widget.LinearLayoutManager
import android.util.Log
import kotlinx.android.synthetic.main.activity_main.*

/**
 * 需要下拉刷新，上拉加载更多的，可以看另外一个demo
 */
class MainActivity : AppCompatActivity() {

    private var mBaseAdapter: BaseAdapter? = null
    private var mLayoutManager: LinearLayoutManager? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //list测试数据
        var data: MutableList<BaseBean> = ArrayList<BaseBean>()
        data.add(BaseBean("大标题111", "小内容介绍：大家好，我是一只猫，很高兴见到你", "http://img4.imgtn.bdimg.com/it/u=1758683838,870080854&fm=26&gp=0.jpg"))
        data.add(BaseBean("大标题222", "小内容介绍：大家好，我是一只狗，很高兴见到你", "http://img5.imgtn.bdimg.com/it/u=1516480511,2613316848&fm=26&gp=0.jpg"))
        data.add(BaseBean("大标题333", "小内容介绍：大家好，我是一只鹦鹉，很高兴见到你", "http://img0.imgtn.bdimg.com/it/u=3393771436,2235115002&fm=26&gp=0.jpg"))
        data.add(BaseBean("大标题444", "小内容介绍：大家好，我是一头马，很高兴见到你", "http://img5.imgtn.bdimg.com/it/u=2641759927,653981782&fm=26&gp=0.jpg"))
        data.add(BaseBean("大标题555", "小内容介绍：大家好，我是一只鹰，很高兴见到你", "http://img2.imgtn.bdimg.com/it/u=2858674446,2998506708&fm=26&gp=0.jpg"))
        data.add(BaseBean("大标题666", "小内容介绍：大家好，我是一只海豚，很高兴见到你", "http://img0.imgtn.bdimg.com/it/u=3906213888,2720000782&fm=26&gp=0.jpg"))

        /***初始化recycle_view**/
        recycle_view.setHasFixedSize(true)
        mLayoutManager = LinearLayoutManager(this)
        recycle_view.layoutManager = mLayoutManager//设置LayoutManager
        recycle_view.itemAnimator = DefaultItemAnimator()
        /***初始化BaseAdapter**/
        mBaseAdapter = BaseAdapter(this, data)
        mBaseAdapter!!.mListener = { _, posion ->
            Log.d("WY+", "按下了$posion")
        }
        /***把recycleview和adapter关联**/
        recycle_view.setAdapter(mBaseAdapter)

    }
}

6、activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycle_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="5dp"
        android:scrollbars="vertical"
        app:layout_behavior="ceshi"></android.support.v7.widget.RecyclerView>
</android.support.constraint.ConstraintLayout>

7、item_cardview.xml

<?xml version="1.0" encoding="utf-8"?>
    <!--app:cardBackgroundColor:设置背景颜色-->
    <!--app:cardCornerRadius:设置圆角大小-->
    <!--app:cardElevation:设置z轴的阴影-->
    <!--app:cardMaxElevation:设置z轴的最大高度值-->
    <!--app:cardUseCompatPadding:是否使用CompatPadding-->
    <!--app:cardPreventCornerOverlap:是否使用PreventCornerOverlap-->
    <!--app:contentPadding:设置内容的padding-->
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:clickable="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="12dp">

        <ImageView
            android:id="@+id/ivNews"
            android:layout_width="80dp"
            android:layout_height="60dp"
            android:scaleType="centerCrop"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="8dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tvTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textAppearance="@style/TextAppearance.AppCompat.Title"
                android:textColor="#293131"
                android:textSize="16sp"
                android:maxLines="1"/>

            <TextView
                android:id="@+id/tvDesc"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="6dp"
                android:textColor="#354b4a"
                android:maxLines="2"
                android:textSize="12sp"/>
        </LinearLayout>

    </LinearLayout>

</android.support.v7.widget.CardView>

如果需要demo的话，可以到这里下载：

wy313622821

原创文章 38 获赞 39 访问量 6万+

关注私信

kotlin recycleview+cardview列表显示

recycleview+cardview列表显示

简介

代码

猜你喜欢