Requirements are as follows:
1. Create the online shopping mall project EShop;
2. Modify the layout file activity_main.xmland use LineaLayout and ListView to create a product list UI;
3. Create the list item layout list_item.xml, and design the UI to display product icons, names and price information;
4. Create the GoodsAdapter class to display the data in the list;
5. Write simulated product data in MainActivity, associate the ListView object to the GoodsAdapter, and realize the display of product data;
6. Try to use SimpleAdapter and ArrayAdapter to achieve the same function.
0.Create project
Create a new project according to the requirements, named: EShop, select the appropriate minimum API level and other project configurations.
1. Modify the layout file activity_main.xml
Found in res/layoutthe folder activity_main.xml, use LinearLayout and ListView to create a product list UI.
If it doesn't exist
res/layout, just create it yourself.
<?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"
android:orientation="vertical">
<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
2. Create list item layout list_item.xml
res/layoutCreate a new XML layout file in the folder, named , list_item.xmlto display product icons, names and price information.
Note: If there is no icon here, you can use the default: ic_launcher_foreground and "@drawable/ic_launcher_background"
<?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:orientation="horizontal">
<ImageView
android:id="@+id/imageView"
android:layout_width="64dp"
android:layout_height="64dp"
android:src="@drawable/ic_launcher_foreground" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="16dp">
<TextView
android:id="@+id/productName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Product Name"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="@+id/productPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Price: $10.00"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
3. Create GoodsAdaptera class to display the data in the list:
Create a Goods class to represent goods, including name and price attributes.
Create the Goods.kt file in the src directory:
data class Goods(val name: String, val price: Double)
Create a GoodsAdapter class to associate product data with ListView.
Create the GoodsAdapter.kt file in the src directory
package com.leo.eshop
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.ImageView
import android.widget.TextView
class GoodsAdapter(private val context: Context, private val goodsList: List<Goods>) : BaseAdapter() {
override fun getCount(): Int {
return goodsList.size
}
override fun getItem(position: Int): Any {
return goodsList[position]
}
override fun getItemId(position: Int): Long {
return position.toLong()
}
override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
val view = convertView ?: LayoutInflater.from(context).inflate(R.layout.list_item, parent, false)
val goods = getItem(position) as Goods
val name:TextView = view.findViewById(R.id.productName)
val price :TextView = view.findViewById(R.id.productPrice)
name.text = goods.name
price.text = "Price: $${
goods.price}"
return view
}
}
4. Realize the display of product data
In the MainActivity.kt file, write simulated product data and associate the ListView object to the GoodsAdapter to display the product data:
package com.leo.eshop
import android.os.Bundle
import android.widget.ListView
import androidx.activity.ComponentActivity
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val goodsList = listOf(
Goods("Product 1", 10.99),
Goods("Product 2", 19.99),
Goods("Product 3", 5.99),
// Add more items as needed
)
val adapter = GoodsAdapter(this,goodsList)
val listView:ListView = findViewById(R.id.listView)
listView.adapter = adapter
}
}
In this way, you have completed a simple online mall project, using LinearLayout and ListView to design the product list UI, and using GoodsAdapter to handle the association between data and UI.
achieve effect
