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

案例效果

android layer-list 设置图片叠加 安卓实现图片列表_xml

程序步骤

创建项目,项目名为My fourApplication

android layer-list 设置图片叠加 安卓实现图片列表_java_02


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

android layer-list 设置图片叠加 安卓实现图片列表_android_03


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

上传图片资源到drawable

android layer-list 设置图片叠加 安卓实现图片列表_android_04

android layer-list 设置图片叠加 安卓实现图片列表_java_05

android layer-list 设置图片叠加 安卓实现图片列表_android_06


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

android layer-list 设置图片叠加 安卓实现图片列表_android_07


千万不要出现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一个数组集合。

运行程序

将程序运行获得最终结果

结果图片

android layer-list 设置图片叠加 安卓实现图片列表_android_08

总结

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

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