Online-Einkaufszentrumsprojekt EShop [ListView, Adapter]

Die Anforderungen sind wie folgt:

1. Erstellen Sie das Online-Einkaufszentrumsprojekt EShop;

2. Ändern Sie die Layoutdatei activity_main.xmlund verwenden Sie LineaLayout und ListView, um eine Produktlisten-Benutzeroberfläche zu erstellen.

3. Erstellen Sie das Listenelement-Layout list_item.xml und entwerfen Sie die Benutzeroberfläche für die Anzeige von Produktsymbolen, Namen und Preisinformationen.

4. Erstellen Sie die GoodsAdapter-Klasse, um die Daten in der Liste anzuzeigen.

5. Schreiben Sie simulierte Produktdaten in MainActivity, verknüpfen Sie das ListView-Objekt mit GoodsAdapter und realisieren Sie die Anzeige von Produktdaten.

6. Versuchen Sie, SimpleAdapter und ArrayAdapter zu verwenden, um dieselbe Funktion zu erreichen.

0.Projekt erstellen

Erstellen Sie entsprechend den Anforderungen ein neues Projekt mit dem Namen: EShop, wählen Sie die entsprechende Mindest-API-Ebene und andere Projektkonfigurationen aus.

1. Ändern Sie die Layoutdateiactivity_main.xml

Verwenden Sie im res/layoutOrdner activity_main.xmlLinearLayout und ListView, um eine Produktlisten-Benutzeroberfläche zu erstellen.

Wenn es nicht existiert res/layout, erstellen Sie es einfach selbst.

<?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>

Fügen Sie hier eine Bildbeschreibung ein

2. Erstellen Sie das Listenelement-Layout list_item.xml

res/layoutErstellen Sie im Ordner eine neue XML-Layoutdatei mit dem Namen , list_item.xmlum Produktsymbole, Namen und Preisinformationen anzuzeigen.

Hinweis: Wenn hier kein Symbol vorhanden ist, können Sie die Standardeinstellungen verwenden: ic_launcher_foreground und „@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. Erstellen Sie `GoodsAdapter`eine Klasse, um die Daten in der Liste anzuzeigen:

Erstellen Sie eine Warenklasse zur Darstellung von Waren, einschließlich Namens- und Preisattributen.

Erstellen Sie die Datei Goods.kt im Verzeichnis src:

data class Goods(val name: String, val price: Double)

Fügen Sie hier eine Bildbeschreibung ein

Erstellen Sie eine GoodsAdapter-Klasse, um Produktdaten mit ListView zu verknüpfen.

Erstellen Sie die Datei GoodsAdapter.kt im Verzeichnis src

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. Realisieren Sie die Anzeige von Produktdaten

Schreiben Sie in die Datei MainActivity.kt simulierte Produktdaten und verknüpfen Sie das ListView-Objekt mit dem GoodsAdapter, um die Produktdaten anzuzeigen:

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

    }
}

Auf diese Weise haben Sie ein einfaches Online-Einkaufszentrumsprojekt abgeschlossen, bei dem Sie LinearLayout und ListView zum Entwerfen der Produktlisten-Benutzeroberfläche verwenden und GoodsAdapter verwenden, um die Zuordnung zwischen Daten und Benutzeroberfläche zu verwalten.

Wirkung erzielen

Fügen Sie hier eine Bildbeschreibung ein