今天学习带图片的列表,实现定制化的列表布局。带图片的列表要采用定制的列表布局,配合该布局的数据适配器应该采用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将效果实现
- 运行代码,收获喜悦。
很高兴呢博文能帮助到大家!