安卓常用控件之ListView、RecyclerView

一 ListView

Activity

class ListViewTestActivity : AppCompatActivity() {

    private val mFruitList = ArrayList<Fruit>()
    private var mFruitListViewAdapter: FruitListViewAdapter? = null
    private var mListView: ListView? = null

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

    private fun setListener() {
        mListView?.setOnItemClickListener { parent, view, position, id ->
            val fruit = mFruitList[position]
            Log.e("AAA", "fruit.name")
            Toast.makeText(this, fruit.name, Toast.LENGTH_SHORT).show()
        }
    }

    private fun initData() {
        repeat(2){
            mFruitList.add(Fruit("Apple", R.drawable.apple_pic))
            mFruitList.add(Fruit("Banana", R.drawable.banana_pic))
            mFruitList.add(Fruit("Orange", R.drawable.orange_pic))
            mFruitList.add(Fruit("Watermelon", R.drawable.watermelon_pic))
            mFruitList.add(Fruit("Pear", R.drawable.pear_pic))
            mFruitList.add(Fruit("Grape", R.drawable.grape_pic))
            mFruitList.add(Fruit("Pineapple", R.drawable.pineapple_pic))
            mFruitList.add(Fruit("Strawberry", R.drawable.strawberry_pic))
            mFruitList.add(Fruit("Cherry", R.drawable.cherry_pic))
            mFruitList.add(Fruit("Mango", R.drawable.mango_pic))
        }
        mListView = findViewById(R.id.listView)
        mFruitListViewAdapter = FruitListViewAdapter(this, R.layout.fruit_item_listview, mFruitList)
        mListView?.adapter = mFruitListViewAdapter
    }

}

bean

class Fruit(val name: String, val imageId: Int)

适配器

class FruitListViewAdapter(activity: Activity, val resourceItemLayoutId: Int, data: List<Fruit>) :
        ArrayAdapter<Fruit>(activity, resourceItemLayoutId, data) {

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        //convertView 缓存加载的布局
        val view:View
        val viewHolder: ViewHolder
        if(convertView == null){
            view = LayoutInflater.from(context).inflate(resourceItemLayoutId, parent, false)
            val fruitImage: ImageView = view.findViewById(R.id.fruitImage)
            val fruitName: TextView = view.findViewById(R.id.fruitName)
            viewHolder = ViewHolder(fruitImage, fruitName)
            view.tag = viewHolder
        }else{
            view = convertView
            viewHolder = view.tag as ViewHolder
        }

        val fruit = getItem(position)
        if (fruit != null){
            viewHolder.fruitImage.setImageResource(fruit.imageId)
            viewHolder.fruitName.text = fruit.name
        }
        return view
    }

    inner class ViewHolder(val fruitImage: ImageView, val fruitName: TextView)

}

效果图

listviewdemo.png

二 RecyclerView

class RecyclerViewTestActivity : AppCompatActivity(){

    private val mFruitList = ArrayList<Fruit>()
    private var mRecyclerView: RecyclerView ?= null
    private var mRecyclerAdapter: FruitRecyclerViewAdapter ?= null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_recyclerview)
        initData()
    }

    private fun initData() {
        repeat(2){
            mFruitList.add(Fruit("Apple", R.drawable.apple_pic))
            mFruitList.add(Fruit("Banana", R.drawable.banana_pic))
            mFruitList.add(Fruit("Orange", R.drawable.orange_pic))
            mFruitList.add(Fruit("Watermelon", R.drawable.watermelon_pic))
            mFruitList.add(Fruit("Pear", R.drawable.pear_pic))
            mFruitList.add(Fruit("Grape", R.drawable.grape_pic))
            mFruitList.add(Fruit("Pineapple", R.drawable.pineapple_pic))
            mFruitList.add(Fruit("Strawberry", R.drawable.strawberry_pic))
            mFruitList.add(Fruit("Cherry", R.drawable.cherry_pic))
            mFruitList.add(Fruit("Mango", R.drawable.mango_pic))
        }
        mRecyclerView = findViewById(R.id.recyclerView)
        mRecyclerAdapter = FruitRecyclerViewAdapter(mFruitList)
        mRecyclerView?.layoutManager = LinearLayoutManager(this)
        mRecyclerView?.adapter = mRecyclerAdapter
    }

}

适配器

class FruitRecyclerViewAdapter(val mFruitList: List<Fruit>) :
    RecyclerView.Adapter<FruitRecyclerViewAdapter.ViewHolder>(){

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val fruitImage: ImageView = itemView.findViewById(R.id.fruitImage)
        val fruitName: TextView = itemView.findViewById(R.id.fruitName)
    }

    /**
     * 用于创建ViewHolder实例，把item子布局加载进来
     * 并把这个item布局传入ViewHolder的主构造函数中
     */
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int)
            : FruitRecyclerViewAdapter.ViewHolder {
        val itemView: View = LayoutInflater.from(parent.context).inflate(R.layout.fruit_item_listview, parent, false)

        //注册监听事件
        val viewHolder = ViewHolder(itemView)
        viewHolder.itemView.setOnClickListener{
            val position = viewHolder.adapterPosition
            val fruit = mFruitList[position]
            Toast.makeText(parent.context, "you click view ${fruit.name}", Toast.LENGTH_SHORT).show()
        }
        viewHolder.fruitImage.setOnClickListener { 
            val position = viewHolder.adapterPosition
            val fruit = mFruitList[position]
            Toast.makeText(parent.context, "you click image ${fruit.name}", Toast.LENGTH_SHORT).show()
        }
        
        return viewHolder
    }

    override fun getItemCount() = mFruitList.size

    /**
     * 用于对RecyclerView的子项的数据进行赋值，会在每个子项被滚动到屏幕内的时候执行
     */
    override fun onBindViewHolder(holder: FruitRecyclerViewAdapter.ViewHolder, position: Int) {
        val fruit = mFruitList[position]
        holder.fruitImage.setImageResource(fruit.imageId)
        holder.fruitName.text = fruit.name
    }

}

效果图与ListView一致

瀑布流效果

xml item项布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="wrap_content"
    android:layout_margin="5dp">

    <ImageView
        android:id="@+id/fruitImage"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginStart="10dp"/>

    <TextView
        android:id="@+id/fruitName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_marginTop="10dp"/>

</LinearLayout>

Activity

class RecyclerViewTestActivity : AppCompatActivity(){

    private val mFruitList = ArrayList<Fruit>()
    private var mRecyclerView: RecyclerView ?= null
    private var mRecyclerAdapter: FruitRecyclerViewAdapter ?= null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_recyclerview)
        initData()
    }

    private fun initData() {
        repeat(2){
            mFruitList.add(Fruit(getRandomLengthString("Apple"), R.drawable.apple_pic))
            mFruitList.add(Fruit(getRandomLengthString("Banana"), R.drawable.banana_pic))
            mFruitList.add(Fruit(getRandomLengthString("Orange"), R.drawable.orange_pic))
            mFruitList.add(Fruit(getRandomLengthString("Watermelon"), R.drawable.watermelon_pic))
            mFruitList.add(Fruit(getRandomLengthString("Pear"), R.drawable.pear_pic))
            mFruitList.add(Fruit(getRandomLengthString("Grape"), R.drawable.grape_pic))
            mFruitList.add(Fruit(getRandomLengthString("Pineapple"), R.drawable.pineapple_pic))
            mFruitList.add(Fruit(getRandomLengthString("Strawberry"), R.drawable.strawberry_pic))
            mFruitList.add(Fruit(getRandomLengthString("Cherry"), R.drawable.cherry_pic))
            mFruitList.add(Fruit(getRandomLengthString("Mango"), R.drawable.mango_pic))
        }
        mRecyclerView = findViewById(R.id.recyclerView)
        mRecyclerAdapter = FruitRecyclerViewAdapter(mFruitList)
        val layoutManager = StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL)
        mRecyclerView?.layoutManager = layoutManager
        mRecyclerView?.adapter = mRecyclerAdapter
    }

    private fun getRandomLengthString(str: String) : String{
        val n = (1..20).random()
        val builder = StringBuilder()

        repeat(n){
            builder.append(str)
        }
        return builder.toString()
    }

}

效果图

stagger.png

编写精美的聊天界面

xml activity布局

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#d8e0e8"
    android:orientation="vertical">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/inputText"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="Type something here"
            android:maxLines="2"/>

        <Button
            android:id="@+id/send"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Send"
            android:textAllCaps="false"/>

    </LinearLayout>

</LinearLayout>

xml item LeftMsg子布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:background="@drawable/message_left">

        <TextView
            android:id="@+id/leftMsg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_gravity="center"
            android:textColor="#fff"/>


    </LinearLayout>

</FrameLayout>

xml item RightMsg子布局

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:background="@drawable/message_left">

        <TextView
            android:id="@+id/leftMsg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_gravity="center"
            android:textColor="#fff"/>


    </LinearLayout>

</FrameLayout>

数据实体类

class Msg(val content: String, val type: Int){
    companion object {
        const val TYPE_RECEIVED = 0
        const val TYPE_SEND = 1
    }
}

封装ViewHolder 新建MsgViewHolder.kt 使用密封类

/**
 * 使用密封类 在条件判断时 编译器会自动检查该密封类有哪些子类
 * 并强制你将每一个子类所对应的条件全部处理，可以避免写else等无意义的分支
 */
sealed class MsgViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)

class LeftMsgViewHolder(itemView: View) : MsgViewHolder(itemView){
    val leftMsg: TextView = itemView.findViewById(R.id.leftMsg)
}

class RightMsgViewHolder(itemView: View) : MsgViewHolder(itemView){
    val rightMsg: TextView = itemView.findViewById(R.id.rightMsg)
}

适配器

class MsgAdapter(val mMsgList: List<Msg>) : RecyclerView.Adapter<MsgViewHolder>(){


    override fun getItemViewType(position: Int): Int {
        return mMsgList[position].type
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MsgViewHolder = if (viewType == Msg.TYPE_RECEIVED){
        val itemView = LayoutInflater.from(parent.context).inflate(R.layout.item_chat_left, parent, false)
        LeftMsgViewHolder(itemView)
    }else{
        val itemView = LayoutInflater.from(parent.context).inflate(R.layout.item_chat_right,parent,false)
        RightMsgViewHolder(itemView)
    }

    override fun getItemCount() = mMsgList.size

    override fun onBindViewHolder(holder: MsgViewHolder, position: Int) {
        val msg = mMsgList[position]
        when(holder){
            is LeftMsgViewHolder -> holder.leftMsg.text = msg.content
            is RightMsgViewHolder -> holder.rightMsg.text = msg.content
        }
    }

}

activity

class UIChatActivity : AppCompatActivity(), View.OnClickListener{

    private lateinit var mRecyclerView: RecyclerView
    private val mMsgList = ArrayList<Msg>()
    private lateinit var mMsgAdapter: MsgAdapter
    private lateinit var mSendBtn: Button
    private lateinit var mInputText: EditText

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

        initData();
        initView();
        setListener();
    }

    private fun setListener() {
        mSendBtn.setOnClickListener(this)
    }

    private fun initView() {
        mRecyclerView = findViewById(R.id.recyclerView)
        mSendBtn = findViewById(R.id.send)
        mInputText = findViewById(R.id.inputText)
        /**
         * 判断变量是否已经初始化
         * 避免对某一个变量进行重复初始化的操作
         * ::mMsgAdapter.isInitialized:  这是固定格式 返回这个变量是否已经被初始化
         */
        if (!::mMsgAdapter.isInitialized){
            mMsgAdapter = MsgAdapter(mMsgList)
        }
        val layoutManager = LinearLayoutManager(this)
        mRecyclerView.layoutManager = layoutManager
        mRecyclerView.adapter = mMsgAdapter
    }

    private fun initData() {
        mMsgList.add(Msg("你后悔么？",Msg.TYPE_RECEIVED))
        mMsgList.add(Msg("有这个想法",Msg.TYPE_SEND))
        mMsgList.add(Msg("那你现在的想法？",Msg.TYPE_RECEIVED))
        mMsgList.add(Msg("想回到过去。", Msg.TYPE_SEND))
        mMsgList.add(Msg("为什么想回去？",Msg.TYPE_RECEIVED))
        mMsgList.add(Msg("因为遗憾",Msg.TYPE_RECEIVED))
        mMsgList.add(Msg("因为我想重新开始",Msg.TYPE_RECEIVED))
    }

    override fun onClick(v: View?) {
        when(v){
            mSendBtn -> {
                val content = mInputText.text.toString()
                if (content.isNotEmpty()){
                    val msg = Msg(content, Msg.TYPE_SEND)
                    mMsgList.add(msg)
                    //通知列表有新的数据插入，这样新增的一条消息才能显示 并且不会刷新之前的 效率高一些
                    mMsgAdapter.notifyItemInserted(mMsgList.size - 1)
                    //将显示的数据定位到最后一行，以保证一定可以看到最后发出的一条消息
                    mRecyclerView.scrollToPosition(mMsgList.size - 1)
                    mInputText.setText("")
                }
            }
        }
    }

}

效果图

chat.png

最后编辑于：2021.12.12 11:08:07

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 221,635评论 6赞 515
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 94,543评论 3赞 399
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 168,083评论 0赞 360
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 59,640评论 1赞 296
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 68,640评论 6赞 397
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 52,262评论 1赞 308
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,833评论 3赞 421
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,736评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 46,280评论 1赞 319
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 38,369评论 3赞 340
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,503评论 1赞 352
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 36,185评论 5赞 350
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,870评论 3赞 333
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 32,340评论 0赞 24
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,460评论 1赞 272
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,909评论 3赞 376
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 45,512评论 2赞 359

安卓常用控件之ListView、RecyclerView

一 ListView

二 RecyclerView

瀑布流效果

编写精美的聊天界面

推荐阅读更多精彩内容