Controles de uso común: vista de lista

Language 2023-12-17 08:29:01 views: null

Directorio de artículos

1. Descripción general de la vista de lista

1. Diagrama de herencia

La vista de lista (ListView) hereda la vista de lista abstracta (AbsListView), que a su vez hereda la vista del adaptador (AdapterView). Las vistas del adaptador tienen una característica común, que es utilizar el adaptador para vincular la fuente de datos al control de pantalla.

2. Cuatro elementos de la vista de lista

elemento ilustrar
Control de lista Mostrar varios elementos para los usuarios
adaptador Adaptador de matriz, adaptador simple, adaptador de cursor, adaptador de base...
fuente de datos Matrices, listas, cursores...
Plantilla de elemento de lista Recursos de la plataforma, personalización del usuario.
  • Cuatro elementos de la vista de lista: control de lista, adaptador, plantilla de elemento de lista y fuente de datos

3. Cuatro tipos de adaptadores

  • List View (ListView), que es la clase hija de AdapterView, utiliza el adaptador como puente para vincular fuentes de datos.
adaptador significado
ArrayAdapter adaptador de matriz
Adaptador simple adaptador sencillo
Adaptador de cursor simple Adaptador de cursor simple
Adaptador base adaptador base

2. Caso de uso de vista de lista basada en un adaptador de matriz: lectura de poemas antiguos

  • Breve descripción del caso: Contiene dos ventanas. La primera ventana es una lista de títulos de poemas antiguos para que el usuario elija. Cuando el usuario hace clic en un elemento, salta inmediatamente a la segunda ventana, que muestra el contenido (título, autor). , etc.) del poema antiguo seleccionado por el usuario. , texto), la segunda ventana tiene un botón para regresar a la tabla de contenido, haga clic en este botón para regresar a la primera ventana que muestra la lista de títulos de poemas antiguos.

1. Puntos de conocimiento involucrados

  • Diseño lineal
  • Etiqueta (vista de texto)
  • Botón
  • Vista de la lista
  • Adaptador de matriz
  • Matriz o lista de matrices (Array | ArrayList)

2. Pasos de implementación

(1) Crear una aplicación para Android [ReadAncientPoetry]

  • Crear una aplicación de Android basada enEmpty ActivityReadAncientPoetry
    Insertar descripción de la imagen aquí
  • Haga clic en el botón [finalizar]

(2) Copie la imagen de fondo al directorio dibujable

  • Copiar la imagen de fondo aldrawabledirectorio
    Insertar descripción de la imagen aquí

(3), archivo de recursos de cadena

  • Archivo de recursos de cadenastrings.xml
    Insertar descripción de la imagen aquí
  • Ver código completo
<resources>
    <string name="app_name">阅读古诗</string>

    <string-array name="titles">
        <item>静夜思</item>
        <item>登鹳雀楼</item>
        <item>相思</item>
        <item>听弹琴</item>
        <item>登乐游原</item>
        <item>朝发白帝城</item>
        <item>巴山夜雨</item>
        <item>渭城曲</item>
        <item>春夜喜雨</item>
        <item>离离原上草</item>
        <item>示儿</item>
    </string-array>

    <string-array name="authors">
        <item>唐·李白</item>
        <item>唐·王之涣</item>
        <item>唐·王维</item>
        <item>唐·刘长卿</item>
        <item>唐·李商隐</item>
        <item>唐·李白</item>
        <item>唐·杜牧</item>
        <item>唐·王维</item>
        <item>唐·杜甫</item>
        <item>唐·白居易</item>
        <item>宋·陆游</item>
    </string-array>

    <string-array name="contents">
        <item>床前明月光，\n疑是地上霜。\n举头望明月，\n低头思故乡。</item>
        <item>白日依山尽，\n黄河入海流。\n欲穷千里目，\n更上一层楼。</item>
        <item>红豆生南国，\n春来发几枝。\n愿君多采撷，\n此物最相思。</item>
        <item>泠泠七弦上，\n静听松风寒。\n古调虽自爱，\n今人多不弹。</item>
        <item>向晚意不适，\n驱车登古原。\n夕阳无限好，\n只是近黄昏。</item>
        <item>朝辞白帝彩云间，\n千里江陵一日还。\n两岸猿声啼不住，\n轻舟已过万重山。</item>
        <item>君问归期未有期，\n巴山夜雨涨秋池。\n何当共剪西窗烛，\n却话巴山夜雨时。</item>
        <item>渭城朝雨浥轻尘，\n客舍青青柳色新。\n劝君更尽一杯酒，\n西出阳关无故人。</item>
        <item>好雨知时节，当春乃发生。\n随风潜入夜，润物细无声。\n野径云俱黑，江船火独明。\n晓看红湿处，花重锦官城。</item>
        <item>离离原上草，一岁一枯荣。\n野火烧不尽，春风吹又生。\n远芳侵古道，晴翠接荒城。\n又送王孙去，萋萋满别情。</item>
        <item>死去元知万事空，\n但悲不见九州同。\n王师北定中原日，\n家祭无忘告乃翁。 </item>
    </string-array>
</resources>

(4) Archivo de recursos de diseño Activity_main.xml

  • archivo de recursos de diseñoactivity_mian.xml
    Insertar descripción de la imagen aquí
  • Ver código completo
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:padding="15dp"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/lv_poem_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="#aaaaaa"
        android:dividerHeight="0.5dp"/>

</LinearLayout>
  • Ver efecto de vista previa
    Insertar descripción de la imagen aquí

(5) Crea una plantilla de lista de poesía

  • Crear una plantilla de lista de poesíapoem_list_item.xml
    Insertar descripción de la imagen aquí
    Insertar descripción de la imagen aquí
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/tv_poem_title"
    android:gravity="center_vertical"
    android:minHeight="80dp"
    android:textColor="#0000ff"
    android:textSize="25sp">

</TextView>

(6), función de implementación de la clase de interfaz principal

  • Clase de interfaz principal -MainActivity
    Insertar descripción de la imagen aquí

  • declarar variables
    Insertar descripción de la imagen aquí

  • Obtener la instancia de control por identificador de recurso
    Insertar descripción de la imagen aquí

  • Inicializar la matriz de títulos de poemas antiguos
    Insertar descripción de la imagen aquí

  • Cree un adaptador de matriz como puente entre los controles de lista y las fuentes de datos
    Insertar descripción de la imagen aquí

  • Establecer adaptador para la lista
    Insertar descripción de la imagen aquí

  • Modificar efecto deslizante
    Insertar descripción de la imagen aquí

  • Modifique la clase de interfaz principal y registre un detector de clics de elemento para el control de lista
    Insertar descripción de la imagen aquí

  • La posición del parámetro es la posición donde el usuario hizo clic en el elemento de la lista, comenzando desde 0. Por ejemplo, si el usuario hace clic en el tercer elemento de la lista, entonces la posición es igual a 2. En otras palabras, la posición debe aumentarse en 1 para determinar el número de línea.

  • El valor del parámetro id es igual al valor de la posición del parámetro. Los dos parámetros son simplemente tipos diferentes.

(7) Cree una interfaz para mostrar el contenido de poemas antiguos-ContentActivity

  • Archivo de recursos de diseño de interfaz de contenido -ContentActivity
    Insertar descripción de la imagen aquí

(8), archivo de recursos de cadena strings.xml

Insertar descripción de la imagen aquí

(9) Archivo de recursos de diseño de interfaz de contenido

  • Abra el archivo de recursos de diseño de contenido -content_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="20dp"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:textColor="#ff00ff"
        android:textSize="40sp" />

    <TextView
        android:id="@+id/tv_author"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginBottom="20dp"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:textColor="#000000"
        android:textSize="25sp" />

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginBottom="20dp"
        android:layout_weight="8"
        android:textColor="#0000ff"
        android:textSize="30sp" />

    <Button
        android:id="@+id/btn_back"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:onClick="doBack"
        android:text="@string/back"
        android:textSize="20sp" />

</LinearLayout>

(10) Modificar la clase de interfaz principal e implementar instancias de ventana

Insertar descripción de la imagen aquí

(11) Modificar la interfaz de contenido y mostrar poemas antiguos.

Insertar descripción de la imagen aquí

  • declarar variables
    Insertar descripción de la imagen aquí

  • Obtener la instancia de control por identificador de recurso
    Insertar descripción de la imagen aquí

  • Obtenga la intención del salto de ventana, obtenga la posición que lleva la intención y realice el procesamiento correspondiente
    Insertar descripción de la imagen aquí

  • Escriba el botón [Volver al catálogo de poesía antigua], haga clic en el método de procesamiento de eventos
    Insertar descripción de la imagen aquí

  • comprobar el efecto
    Insertar descripción de la imagen aquí

vista de la lista

(12), Ver el código final

①Clase de interfaz principal: MainActivity
package net.xyx.read_ancient_poetry;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private ListView lvPoemTitle;//诗歌标题列表控件 - 展示
    private ArrayAdapter<String> adapter;//数组适配器 - 桥梁
    private String[] titles;//诗歌标题数组 - 数据源


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //利用布局资源文件设置用户界面
        setContentView(R.layout.activity_main);

        //通过资源标识符获取控件实例
        lvPoemTitle = findViewById(R.id.lv_poem_title);

        //初始化古诗标题数组，作为列表控件的数据源
        titles = getResources().getStringArray(R.array.titles);
        //给古诗标题填上序号
        for (int i = 0; i < titles.length; i++){
            titles[i] = (i + 1) + "." + titles[i];
        }

        //创建数组适配器，作为连接列表控件与数据源的桥梁
        adapter = new ArrayAdapter<>(
                this,//上下文
                R.layout.poem_list_item,//列表项模板 - 平台布局资源
                titles //数据源 - 字符串数据组
        );

        //给列表控件设置适配器
        lvPoemTitle.setAdapter(adapter);

        //给列表控件注册项单击监听器
        lvPoemTitle.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(MainActivity.this,
                        "你选择了古诗[" + titles[position] + "]",
                        Toast.LENGTH_SHORT).show();

                //创建时新窗口跳转的意图
                Intent intent = new Intent(MainActivity.this, ContentActivity.class);
                //通过意图携带数据（选中的列表项位置）
                intent.putExtra("position",position);
                //按意图启动目标组件
                startActivity(intent);
            }
        });
    }
}
②Interfaz de contenido-ContentActivity
package net.xyx.read_ancient_poetry;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

public class ContentActivity extends AppCompatActivity {

    private TextView tvTitle;//标题标签
    private TextView tvAuthor;//作者标签
    private TextView tvContent;//内容标签
    private String[] titles;//标题数组
    private String[] authors;//作者数组
    private String[] contents;//内容数组

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //利用布局资源文件设置用户界面
        setContentView(R.layout.activity_content);

        //通过资源标识符获取控件实例
        tvTitle = findViewById(R.id.tv_title);
        tvAuthor = findViewById(R.id.tv_author);
        tvContent = findViewById(R.id.tv_content);

        //获取窗口跳转的意图
        Intent intent = getIntent();
        //判断意图是否为空
        if (intent != null){
            //获取意图携带的数据
            int position = intent.getIntExtra("position",0);
            //获取古诗标题数组
            titles = getResources().getStringArray(R.array.titles);
            //获取古诗作者数组
            authors = getResources().getStringArray(R.array.authors);
            //获取古诗内容数组
            contents = getResources().getStringArray(R.array.contents);
            //设置标题标签文本
            tvTitle.setText(titles[position]);
            //设置作为标签文本
            tvAuthor.setText(authors[position]);
            //设置内容标签文本
            tvContent.setText(contents[position]);
        }
    }

    /**
     *
     * 【返回古诗目录】按钮单击事件处理方法
     * @param view
     */

    public void doBack(View view){
        finish();//关闭当前窗口
    }
}

3. Crea un adaptador simple

1. Documentación API del adaptador simple

https://developer.android.google.cn/reference/kotlin/android/widget/SimpleAdapter?hl=en
Insertar descripción de la imagen aquí

2. Diagrama de herencia de adaptador simple

  • La clase SimpleAdapter hereda la clase BaseAdapter

3. Método de construcción de adaptador simple

  • El adaptador simple proporciona un constructor con 5 parámetros.

4. Estuche adaptador personalizado - libreta de direcciones

(1) Crear aplicaciones de Android

  • Crear una aplicación de Android basada enEmpty Activity plantilla - Contacts
    Insertar descripción de la imagen aquí
  • Haga clic en el botón [finalizar]
    Insertar descripción de la imagen aquí

(2) Copie el material de la imagen al directorio dibujable.

Insertar descripción de la imagen aquí

(3), archivo de recursos de cadena strings.xml

Insertar descripción de la imagen aquí

<resources>
    <string name="app_name">通讯录</string>
    <string name="icon">图标</string>
    <string name="name">姓名</string>
    <string name="phone">电话</string>
</resources>

(4) Archivo de recursos de diseño principal actividad_main.xml

Insertar descripción de la imagen aquí

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context=".MainActivity">

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

        <TextView
            android:id="@+id/tv_icon"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="20dp"
            android:layout_weight="0.5"
            android:text="@string/icon"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/name"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/tv_phone"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1.5"
            android:text="@string/phone"
            android:textSize="20sp" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:background="#aaaaaa" />

    <ListView
        android:id="@+id/lv_contact"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ListView>

</LinearLayout>

(5) Plantilla de elemento de lista de contactos contact_list_item.xml

Insertar descripción de la imagen aquí

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context=".MainActivity">

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

        <TextView
            android:id="@+id/tv_icon"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="20dp"
            android:layout_weight="0.5"
            android:text="@string/icon"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/name"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/tv_phone"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1.5"
            android:text="@string/phone"
            android:textSize="20sp" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:background="#aaaaaa" />

    <ListView
        android:id="@+id/lv_contact"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ListView>

</LinearLayout>

(6), clase de interfaz principal-MainActivity

Insertar descripción de la imagen aquí

  • declarar variables
    Insertar descripción de la imagen aquí
  • Obtener la instancia de control por identificador de recurso
    Insertar descripción de la imagen aquí
  • Inicializar lista de contactos (fuente de datos)
  • Crea un adaptador simple como puente.
    Insertar descripción de la imagen aquí
  • Configurar un adaptador para el control de lista
    Insertar descripción de la imagen aquí

(7), código fuente de MainActivity de la clase de interfaz principal

package net.xyx.contacts;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private ListView lvContact; // 联系人列表控件（展示）
    private SimpleAdapter adapter; // 简单适配器（桥梁）
    private List<HashMap<String, Object>> contacts; // 联系人列表（数据源）

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 利用布局资源文件设置用户界面
        setContentView(R.layout.activity_main);
        // 通过资源标识符获取控件实例
        lvContact = findViewById(R.id.lv_contact);

        // 初始化联系人列表（数据源）
        contacts = getContacts();

        // 创建简单适配器作为桥梁
        adapter = new SimpleAdapter(
                this, // 上下文
                contacts, // 数据源（列表）
                R.layout.contact_list_item, // 列表项模板
                new String[] {"icon", "name", "phone"}, // 字段名数组
                new int[] {R.id.tv_icon, R.id.tv_name, R.id.tv_phone} // 控件标识数组
        );

        // 给列表控件设置适配器
        lvContact.setAdapter(adapter);
    }

    /**
     * @return 联系人列表
     */
    private List<HashMap<String, Object>> getContacts() {
        // 声明联系人列表
        List<HashMap<String, Object>> contacts = new ArrayList<>();

        // 声明联系人
        HashMap<String, Object> contact = null;

        // 创建第1个联系人
        contact = new HashMap<>();
        contact.put("icon", R.drawable.img1);
        contact.put("name", "李红梅");
        contact.put("phone", "15895953456");
        // 将联系人添加到联系人列表
        contacts.add(contact);

        // 创建第2个联系人
        contact = new HashMap<>();
        contact.put("icon", R.drawable.img2);
        contact.put("name", "王晓玲");
        contact.put("phone", "13956572345");
        // 将联系人添加到联系人列表
        contacts.add(contact);

        // 创建第3个联系人
        contact = new HashMap<>();
        contact.put("icon", R.drawable.img3);
        contact.put("name", "唐语涵");
        contact.put("phone", "15845891234");
        // 将联系人添加到联系人列表
        contacts.add(contact);

        // 创建第4个联系人
        contact = new HashMap<>();
        contact.put("icon", R.drawable.img4);
        contact.put("name", "佟大为");
        contact.put("phone", "13934345680");
        // 将联系人添加到联系人列表
        contacts.add(contact);

        // 创建第5个联系人
        contact = new HashMap<>();
        contact.put("icon", R.drawable.img5);
        contact.put("name", "钟小翠");
        contact.put("phone", "15890904520");
        // 将联系人添加到联系人列表
        contacts.add(contact);

        // 创建第6个联系人
        contact = new HashMap<>();
        contact.put("icon", R.drawable.img6);
        contact.put("name", "张三丰");
        contact.put("phone", "13890985670");
        // 将联系人添加到联系人列表
        contacts.add(contact);

        // 创建第7个联系人
        contact = new HashMap<>();
        contact.put("icon", R.drawable.img7);
        contact.put("name", "刘玉玲");
        contact.put("phone", "15895673450");
        // 将联系人添加到联系人列表
        contacts.add(contact);

        // 返回联系人列表
        return contacts;
    }
}

4. Caja adaptadora personalizada - Persona de contacto

1. Crea una aplicación de Android

  • Cree una aplicación de Android basada enEmpty Activity - ContactList
    Insertar descripción de la imagen aquí
  • Haga clic en el botón [finalizar]
    Insertar descripción de la imagen aquí

2. Copie la imagen de fondo al directorio dibujable.

  • Copiar la imagen de fondo aldrawabledirectorio
    Insertar descripción de la imagen aquí

3. Archivo de recursos de cadena

  • Archivo de recursos de cadena -string.xml
    Insertar descripción de la imagen aquí
<resources>
    <string name="app_name">联系人（采用自定义适配器）</string>
    <string name="icon">图标</string>
    <string name="name">姓名</string>
    <string name="phone">电话</string>
</resources>

3. Archivo de recursos de diseño principal actividad_main.xml

  • archivo de recursos de diseñoactivity_mian.xml
    Insertar descripción de la imagen aquí
<?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:background="@drawable/background"
    android:padding="10dp"
    android:orientation="vertical">

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

        <TextView
            android:id="@+id/tv_icon"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="20dp"
            android:layout_weight="0.5"
            android:text="@string/icon"
            android:textColor="#000000"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/name"
            android:textColor="#000000"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/tv_phone"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1.5"
            android:text="@string/phone"
            android:textColor="#000000"
            android:textSize="20sp" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:background="#aaaaaa" />

    <ListView
        android:id="@+id/lv_contact"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>
  • Ver efecto de vista previa
    Insertar descripción de la imagen aquí

5. Cree una plantilla de elemento de lista de contactos

  • Crear plantilla de elemento de lista de contactos -contact_list_item.xml
    Insertar descripción de la imagen aquí
<?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal">

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginRight="10dp"
        android:scaleType="fitXY"
        android:src="@drawable/img1" />

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

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#0000ff"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/tv_phone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="70dp"
        android:textColor="#555555"
        android:textSize="16sp" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

6. Cree una clase de entidad de contacto

  • Clase de entidad de contacto -Contact
    Insertar descripción de la imagen aquí
package net.xyx.contact_list;

/**
 * 功能：
 * 作者：肖宇轩
 * 日期：2022年11月28日
 */
public class Contact {
    private int icon;//联系人图片
    private String phone;//联系人电话
    public String name;//联系人姓名

    public int getIcon() {
        return icon;
    }

    public void setIcon(int icon) {
        this.icon = icon;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    @Override
    public String toString() {
        return "Contact{" +
                "icon=" + icon +
                ", phone='" + phone + '\'' +
                ", name='" + name + '\'' +
                '}';
    }
}

7. Crea un adaptador de contactos

  • Crear adaptador de contacto -ContactAdapter
    Insertar descripción de la imagen aquí
  • Heredar el adaptador base e implementar cuatro métodos abstractos vacíos
    Insertar descripción de la imagen aquí
  • declarar variables
    Insertar descripción de la imagen aquí
  • Crear constructor

8. Función de implementación de la clase de interfaz principal

  • Clase de interfaz principal -MainActivity

Insertar descripción de la imagen aquí

  • Método para obtener el número de elementos de la lista:getCount()
    Insertar descripción de la imagen aquí
  • Obtener identificador de elemento de lista -getItem()
    Insertar descripción de la imagen aquí
  • Obtener método de identificador de elemento de lista -getItrmld()
    Insertar descripción de la imagen aquí
  • Obtener método de visualización de elementos de lista - getView() - Dificultad
    Insertar descripción de la imagen aquí

8. Funciones de la interfaz principal

  • Clase de interfaz principal -MainActivity
    Insertar descripción de la imagen aquí
  • declarar variables
    Insertar descripción de la imagen aquí
  • Obtener la instancia de control por identificador de recurso
    Insertar descripción de la imagen aquí
  • Cree un método para obtener una lista de contactos -getContacts()

Supongo que te gusta

Origin blog.csdn.net/m0_63887380/article/details/127957338
Recomendado
Clasificación
Diario
Más
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(4)
2024-05-16(22)
2024-05-15(5)
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)

Code World

© 2018 codetd.com