第一行代码第四章读书笔记（4）RecycleView

一、实现与ListView同样的效果

1.1 xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

1.2 Item文件布局

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

    <ImageView
        android:id="@+id/iv_fruit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/tv_fruit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <View
        android:layout_width="match_parent"
        android:background="#000"
        android:layout_height="1dp"/>

</LinearLayout>

1.3 Adapter逻辑

package com.example.recycleviewdemo

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

class FruitAdapter(val fruitList: List<Fruit>) : RecyclerView.Adapter<FruitAdapter.ViewHolder>(){
    override fun onCreateViewHolder(
        parent: ViewGroup,
        viewType: Int
    ): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.fruit_item, parent,false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(
        holder: ViewHolder,
        position: Int
    ) {
        val fruit = fruitList[position]
        holder.fruitName.text = fruit.name
        holder.fruitImage.setImageResource(fruit.imageId)
    }

    override fun getItemCount(): Int {
        return fruitList.size
    }

    inner class ViewHolder(view: View) : RecyclerView.ViewHolder(view){
        val fruitName: TextView = view.findViewById<TextView>(R.id.tv_fruit)
        val fruitImage: ImageView = view.findViewById<ImageView>(R.id.iv_fruit)
    }
}

1.4 控件和布局关联

    private fun customListView(view: RecyclerView) {
        initData()
        val layout = LinearLayoutManager(this)
        view.layoutManager = layout
        val fruitAdapter = FruitAdapter(fruitList)
        view.adapter = fruitAdapter
    }

    private fun initData() {
        fruitList.add(Fruit("苹果", R.drawable.apple_pic))
        fruitList.add(Fruit("香蕉", R.drawable.banana_pic))
        fruitList.add(Fruit("樱桃", R.drawable.cherry_pic))
        fruitList.add(Fruit("葡萄", R.drawable.grape_pic))
        fruitList.add(Fruit("芒果", R.drawable.mango_pic))
        fruitList.add(Fruit("橘子", R.drawable.orange_pic))
        fruitList.add(Fruit("梨", R.drawable.pear_pic))
        fruitList.add(Fruit("菠萝", R.drawable.pineapple_pic))
        fruitList.add(Fruit("草莓", R.drawable.strawberry_pic))
        fruitList.add(Fruit("西瓜", R.drawable.watermelon_pic))
    }

1.5运行结果

二、横向滚动

将竖向滚动的代码进行改动

2.1 设置布局方向为横向

        val layout = LinearLayoutManager(this)
        layout.orientation = LinearLayoutManager.HORIZONTAL

2.2 xml文件修改

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="120dp"
    android:gravity="center"
    android:layout_height="120dp">

    <ImageView
        android:id="@+id/iv_fruit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/tv_fruit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <View
        android:layout_width="1dp"
        android:background="#000"
        android:layout_height="match_parent"/>

</LinearLayout>

2.3 运行效果

三、瀑布流布局

3.1 xml文件

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

    <ImageView
        android:id="@+id/iv_fruit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/tv_fruit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <View
        android:layout_width="1dp"
        android:background="#000"
        android:layout_height="match_parent"/>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

3.2 设置瀑布流布局

    private fun customListView(view: RecyclerView) {
        initData()
        val layout = StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL)
        view.layoutManager = layout
        val fruitAdapter = FruitAdapter(fruitList)
        view.adapter = fruitAdapter
    }

    private fun initData() {
        fruitList.add(Fruit(getRandomLengthString("苹果"), R.drawable.apple_pic))
        fruitList.add(Fruit(getRandomLengthString("香蕉"), R.drawable.banana_pic))
        fruitList.add(Fruit(getRandomLengthString("樱桃"), R.drawable.cherry_pic))
        fruitList.add(Fruit(getRandomLengthString("葡萄"), R.drawable.grape_pic))
        fruitList.add(Fruit(getRandomLengthString("芒果"), R.drawable.mango_pic))
        fruitList.add(Fruit(getRandomLengthString("橘子"), R.drawable.orange_pic))
        fruitList.add(Fruit(getRandomLengthString("梨"), R.drawable.pear_pic))
        fruitList.add(Fruit(getRandomLengthString("菠萝"), R.drawable.pineapple_pic))
        fruitList.add(Fruit(getRandomLengthString("草莓"), R.drawable.strawberry_pic))
        fruitList.add(Fruit(getRandomLengthString("西瓜"), R.drawable.watermelon_pic))
    }

    fun getRandomLengthString(str: String): String {
        val count = (1..50).random()
        val builder = StringBuilder()
        repeat(count) {
            builder.append(str)
        }
        return builder.toString()
    }

3.3 运行效果

3.4 给Item设置点击事件

    override fun onBindViewHolder(
        holder: ViewHolder,
        position: Int
    ) {
        val fruit = fruitList[position]
        holder.fruitName.text = fruit.name
        holder.fruitImage.setImageResource(fruit.imageId)
        holder.itemView.setOnClickListener {
            Toast.makeText(holder.itemView.context,"点击了" + fruit.name, Toast.LENGTH_SHORT).show()
        }
    }

点击事件的效果