移动开发笔记(五) ListView和RecyclerView

1.ListView

首先在activity_main.xml中代码:

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FruitsActivity"
    android:orientation="vertical"
    >
        
        <ListView
            android:id="@+id/listView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:ignore="InvalidId"></ListView>
</LinearLayout>

在layout文件中创建fruit_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/fruitImage"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"></ImageView>

    <TextView
        android:id="@+id/fruitName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"
        ></TextView>
</LinearLayout>

接下来需要创建一个自定义的适配器FruitAdapter

class FruitAdapter(activity: Activity, val resourceId:Int, data:List<Fruit>) :ArrayAdapter<Fruit>(activity,resourceId,data){
    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
            val view:View
            val viewHolder:ViewHolder
        if(convertView == null){
            view = LayoutInflater.from(context).inflate(resourceId,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)
}

最后在MainActivity.xml修改

class FruitsActivity : AppCompatActivity() {

    //private val data= listOf("Apple","banana","Orange","Watermelon")
    private val fruitList=ArrayList<Fruit>()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_fruits)
        supportActionBar?.hide()
        initFruit()
        val adapter=FruitAdapter(this,R.layout.fruit_item,fruitList)
        //val adapter =ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,data)
        listView.adapter=adapter
        //点击事件
        listView.setOnItemClickListener{
            parent, view, position, id ->
            val fruit =fruitList[position]
            Toast.makeText(this,"想吃${fruit.name}自己买去",Toast.LENGTH_SHORT).show()
        }
    }
    private fun initFruit(){
            repeat(5){
                fruitList.add(Fruit("苹果",R.drawable.apple))
                fruitList.add(Fruit("香蕉",R.drawable.banana))
                fruitList.add(Fruit("蓝莓",R.drawable.blueberry))
                fruitList.add(Fruit("猕猴桃",R.drawable.kiwi))
                fruitList.add(Fruit("柠檬",R.drawable.lemon))
                fruitList.add(Fruit("芒果",R.drawable.mango))
                fruitList.add(Fruit("橙子",R.drawable.orange))
                fruitList.add(Fruit("桃子",R.drawable.peach))
                fruitList.add(Fruit("梨",R.drawable.pear))
                fruitList.add(Fruit("草莓",R.drawable.strawberry))
                fruitList.add(Fruit("西瓜",R.drawable.watermelon))

            }
    }
}

2.RecyclerView

首先在app/build.gradle文件 dependencies闭包中添加

dependencies {
implementation 'androidx.recyclerview:recyclerview:1.1.0'
}

在activity_main.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:orientation="vertical">

    <com.example.helloworld.TitleLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        ></com.example.helloworld.TitleLayout>
    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recyclerView"
        ></androidx.recyclerview.widget.RecyclerView>
</LinearLayout>

在layout文件中创建fruit_item.xml

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

    >
    <ImageView
        android:id="@+id/fruitImage2"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"></ImageView>

    <TextView
        android:id="@+id/fruitName2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"
        ></TextView>
</LinearLayout>

接下来需要创建一个自定义的适配器FruitAdapter

class FruitAdapter(activity: Activity, val resourceId:Int, data:List<Fruit>) :ArrayAdapter<Fruit>(activity,resourceId,data){
    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
            val view:View
            val viewHolder:ViewHolder
        if(convertView == null){
            view = LayoutInflater.from(context).inflate(resourceId,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)
}

最后在MainActivity修改

import android.os.Bundle
import com.google.android.material.snackbar.Snackbar
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager

import kotlinx.android.synthetic.main.activity_fruit_list2.*
import kotlinx.android.synthetic.main.content_fruit_list2.*

class FruitList2Activity : AppCompatActivity() {
    private val fruitList = ArrayList<Fruit>()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_fruit_list2)
        supportActionBar?.hide()
        initFruit()
        val layoutManager = LinearLayoutManager(this)
        recyclerView.layoutManager = layoutManager
        val adapter2 = FruitAdapter2(fruitList)
        recyclerView.adapter = adapter2


    }

    private fun initFruit() {
        repeat(5) {
            fruitList.add(Fruit("苹果", R.drawable.apple))
            fruitList.add(Fruit("香蕉", R.drawable.banana))
            fruitList.add(Fruit("蓝莓", R.drawable.blueberry))
            fruitList.add(Fruit("猕猴桃", R.drawable.kiwi))
            fruitList.add(Fruit("柠檬", R.drawable.lemon))
            fruitList.add(Fruit("芒果", R.drawable.mango))
            fruitList.add(Fruit("橙子", R.drawable.orange))
            fruitList.add(Fruit("桃子", R.drawable.peach))
            fruitList.add(Fruit("梨", R.drawable.pear))
            fruitList.add(Fruit("草莓", R.drawable.strawberry))
            fruitList.add(Fruit("西瓜", R.drawable.watermelon))

        }
    }
} 

3.瀑布流布局

修改MainActivity 中的代码

class FruitList3Activity : AppCompatActivity() {
    private val fruitList = ArrayList<Fruit>()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_fruit_list3)
        supportActionBar?.hide()
        initFruit()
        val layoutManager=StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL)

        recyclerView.layoutManager = layoutManager
        val adapter3= FruitAdapter3(fruitList)
        recyclerView.adapter = adapter3


    }

    private fun initFruit() {
        repeat(3) {
            fruitList.add(Fruit(getRandomLengthString("苹果"), R.drawable.apple))
            fruitList.add(Fruit(getRandomLengthString("香蕉"), R.drawable.banana))
            fruitList.add(Fruit(getRandomLengthString("蓝莓"), R.drawable.blueberry))
            fruitList.add(Fruit(getRandomLengthString("猕猴桃"), R.drawable.kiwi))
            fruitList.add(Fruit(getRandomLengthString("柠檬"), R.drawable.lemon))
            fruitList.add(Fruit(getRandomLengthString("芒果"), R.drawable.mango))
            fruitList.add(Fruit(getRandomLengthString("橙子"), R.drawable.orange))
            fruitList.add(Fruit(getRandomLengthString("桃子"), R.drawable.peach))
            fruitList.add(Fruit(getRandomLengthString("梨"), R.drawable.pear))
            fruitList.add(Fruit(getRandomLengthString("草莓"), R.drawable.strawberry))
            fruitList.add(Fruit(getRandomLengthString("西瓜"), R.drawable.watermelon))

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

修改fruit_item.xml代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/fruitImage3"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="10dp"></ImageView>

    <TextView
        android:id="@+id/fruitName3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_marginLeft="10dp"
        ></TextView>
</LinearLayout>

点击事件

  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view=LayoutInflater.from(parent.context).inflate(R.layout.fruit_item3 ,parent,false)
        val viewHolder =ViewHolder(view)
        viewHolder.itemView.setOnClickListener{
            val position=viewHolder.adapterPosition
            val fruit=fruitList[position]
            Toast.makeText(parent.context,"想吃${fruit.name}自己买去",Toast.LENGTH_SHORT).show()
        }
        viewHolder.fruitImage.setOnClickListener {
            val position=viewHolder.adapterPosition
            val fruit=fruitList[position]
            Toast.makeText(parent.context,"${fruit.name}好看吧",Toast.LENGTH_SHORT).show()
        }
        return viewHolder
    }