安卓|实现带图片的列表布局(含效果及源码)

今天学习带图片的列表，实现定制化的列表布局。带图片的列表要采用定制的列表布局，配合该布局的数据适配器应该采用SimpleAdapter适配器。该适配器使用的数据都是HashMap构成的列表LIst，里面的每一个元素对应ListView的每一行。HashMap的每个键值数据<key,value>映射到布局文件对应ID的组件。

案例效果

程序步骤

创建项目,项目名为My fourApplication

点进Project—>Empty Activity—>然后名字改下，finish即可。成功之后，点击箭头运行程序。

程序正常可以跑成功hello world字样，下面我们继续

上传图片资源到drawable

大家将这三张图另存为，第一张图叫做lock.gjf,第二张图xj.gif,第三张图cw.gif.因此将这些文件拖拽到

千万不要出现v24，因为这样，之前写程序都无法实现。

搭建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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/img"
        android:layout_margin="5px"/>

    <LinearLayout

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/title"
            android:textSize="18dp"
         />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/info"
            android:textSize="14dp"/>
    </LinearLayout>

</LinearLayout>

LinearLayout详解

细心的小伙伴会发现，我们用到了两个线性布局，第一个线性布局我们水平方向可以保证我们的图片不在字体的上面，大家可以理解为混合排列。设置了基本的width与height和方向后，其他可以不做设置

ImageView讲解

就是放图片用的控件，边缘5像素单位，包含自身内容大小，id必须设置，后面java控制它进行Map的放置。

TextView讲解

对id、width与height和做相应的设置。字体大小也要设置。

MainActivity.java文件搭建

java文件需要新建一个SimpleAdapter对象，需要的5个参数以此是this,HashMap构成的列表，行布局文件(activity_main.xml),HashMap的键名(title,info和img)，布局文件的组件(title,info,img)。

package com.example.myfourapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.app.ListActivity;
import android.os.Bundle;
import android.widget.SimpleAdapter;

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

public class MainActivity extends ListActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.activity_main);
        SimpleAdapter adapter = new SimpleAdapter(this,getData(),R.layout.activity_main,
                new String[]{"title","info","img"},
                new int[]{R.id.title,R.id.info,R.id.img});
        setListAdapter(adapter);
    }
    private List<Map<String,Object>> getData() {
        String[] title = {
                "企业会话",
                "办公邮件",
                "财务信息查询",
        };
        String[] info = {
                "嘿,你好",
                "写信",
                "发补贴了",
        };
        int[] imageId = {
                R.drawable.xj,
                R.drawable.lock,
                R.drawable.cw
        };
        List<Map<String,Object>>listItems = new ArrayList<Map<String,Object>>();
        //通过循环将图片放到集合里
        for(int i=0;i<title.length;i++) {
            Map<String,Object> map = new HashMap<String,Object>();
            map.put("title",title[i]);
            map.put("info",info[i]);
            map.put("img",imageId[i]);
            listItems.add(map);
        }

        return listItems;
    }

}

如果大家对hash不是很了解，博主写了这篇文章，跟随浙江大学《数据结构》学的，由c语言实现的，可以参考一下(先看理论后看实践)
50、(c语言)散列表(分离链接法)基本操作集(含测试用例)
49、(c语言)散列表(开放定址法-平方探测法)基本操作集(含测试用例)
48、散列表基本常识(必知必会·理论篇)
在这里总结一下这几行java代码运行逻辑，先要**元素，适配器创建，字符串，id放到数组里，然后设置数组适配器，包括里面内容具体填充，比如将标题中“企业会话”放进去，“嘿，你好”和图片里的文件名放进去。最后设置临时变量接受值，不断遍历塞进去，最后不要忘记返回这个listitem，listitem一个数组集合。

运行程序

将程序运行获得最终结果

结果图片

总结

• 创建新项目，跑成功hello world
• 上传图片资源文件
• 搭建布局文件
• 用java将效果实现
• 运行代码，收获喜悦。

很高兴呢博文能帮助到大家！