欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-22 17:49:28
...

今天学习带图片的列表,实现定制化的列表布局。带图片的列表要采用定制的列表布局,配合该布局的数据适配器应该采用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将效果实现
  • 运行代码,收获喜悦。

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

相关标签: 安卓尝试