实现LIstView图标在上文字在下

本文介绍了一个使用 Android ListView 控件展示带有图片和文字项的简单示例。通过创建自定义适配器 SimpleAdapter 并结合 XML 布局文件,实现了一个包含图标和文本的列表视图。该示例展示了如何加载图片资源和文本数据,并将其绑定到 ListView 上。

----------------------------------------------XML布局代码---------------------------------

<LinearLayout

  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"


  android:layout_width="match_parent"
  android:layout_height="match_parent">
<ImageView 
android:id="@+id/image" 
android:adjustViewBounds="true"
android:maxWidth="50dp"
android:maxHeight="50dp"
android:layout_height="wrap_content" 
android:layout_width="wrap_content"/>  
 <TextView  
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:id="@+id/title"
    android:textSize="20sp"/>  

</LinearLayout>

-----------------------------------------------MainActivity代码------------------------------------

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


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




public class MainActivity extends Activity {


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String[] text=new String[]{"菜单1","菜单2","菜单3","菜单4","菜单5","菜单6","菜单7"};
int[] image=new int[]{R.drawable.img01,R.drawable.img02,R.drawable.img03,
R.drawable.img04,R.drawable.img05,R.drawable.img06,R.drawable.img07};
ListView list=(ListView) findViewById(R.id.listView1);
List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();    //创建一个List集合

               //通过for循环将text和image数组中的值放到Map中并添加到List集合中
for(int i=0;i<text.length;i++){             
Map<String, Object> map=new HashMap<String, Object>();
map.put("image1", image[i]);
map.put("text1", text[i]);
items.add(map); // 将Map得到的对象添加到List集合中
}
SimpleAdapter app=new SimpleAdapter(this, items, R.layout.items, 
new String[]{"image1","text1"}, new int[]{R.id.image,R.id.title});
//创建SimpleAdapter适配器---------------R.layout.items指的是layout文件夹下的XML的资源              
list.setAdapter(app);
//将适配器与List关联




}


}

-----------运行效果-----------------------


Android 简单 UI 设计实验报告 一、实验目的 熟悉 Android 开发中的 UI 设计,包括了解和熟悉常用控件的使用、界面布局和事件处理等内容。 二、实验设备 • 计算机 • Android 开发环境(如 Android Studio 等) 三、实验内容 (一)运用 ImageView 实现运用 ImageView 显示带边框的图片。 (二)运用 CheckBox 实现勾选复选框后,“开始”按钮才可用,否则“开始”按钮为不可用状态。 (三)运用 ListView 编写 Android 程序,实现图标在上、文字在下的 ListView 展示效果。 四、实验过程 (一)运用 ImageView 1. 布局文件编写:在 activity_main.xml 中,使用 RelativeLayout 布局,添加 ImageView 控件。设置其 id 为 imageView1,内边距 padding 为 2dp,外边距 layout_margin 为 10dp,宽度和高度为 wrap_content,背景颜色 background 为黑色(#000),通过 android:src="@drawable/ic_launcher" 设置图片资源。 2. 资源准备:确保 ic_launcher 图片资源在 drawable 目录下存在。 (二)运用 CheckBox 1. 布局文件编写:在 activity_main.xml 中,使用 RelativeLayout 布局,添加 CheckBox 控件和 Button 控件。CheckBox 设置 id 为 checkBox1,文本为“让按钮可用”;Button 设置 id 为 button1,文本为“开始”,初始状态 enabled 为 false,并设置其相对于 CheckBox 的位置关系。 2. 逻辑代码编写:在 MainActivity.java 中,通过 findViewById 获取 Button 和 CheckBox 实例。为 CheckBox 设置 setOnCheckedChangeListener 监听器,在监听器的 onCheckedChanged 方法中,根据复选框是否勾选来设置按钮的可用状态(勾选时设置按钮可用,未勾选时设置按钮不可用 );为 Button 设置 setOnClickListener 监听器,在点击时通过 Toast.makeText 弹出提示“单击了按钮!”。 (三)运用 ListView 1. 布局文件编写 ◦ activity_main.xml 中,使用 LinearLayout 布局,添加 ListView 控件,设置 id 为 listView1,宽度为 match_parent,高度为 wrap_content。 ◦ 创建 items.xml 文件,定义列表项布局使用 LinearLayout 布局,添加 ImageView 用于显示图标,设置 id 为 image,并设置相关属性如 adjustViewBounds 为 true,最大宽度和高度为 72dp;添加 TextView 用于显示文字,设置 id 为 title,并设置内边距 padding 为 10dp。 2. 逻辑代码编写:在 MainActivity.java 中,通过 findViewById 获取 ListView 实例。定义数组保存图片资源 ID 和列表项文字内容。创建 ArrayList<Map<String, Object>> 类型的 listItems 集合,通过 for 循环将图片 ID 和文字内容添加到 Map 中,并加入到 listItems 集合。创建 SimpleAdapter 适配器,将 listItems 与列表项布局 items.xml 关联,设置 ListView 的适配器为创建的 SimpleAdapter。 五、实验结果 (一)运用 ImageView 成功显示带黑色边框的指定图片。 (二)运用 CheckBox 初始状态下“开始”按钮不可用,勾选复选框后,“开始”按钮变为可用状态,点击“开始”按钮能弹出提示“单击了按钮!”。 (三)运用 ListView 成功实现图标在上、文字在下的 ListView 展示效果,列表项按预期显示相应图标文字。 六、结果分析与结论 (一)结果分析 1. ImageView:通过合理设置 ImageView 的属性,如 padding、background 和 src 等,能够准确地按照需求显示带边框的图片。在实际开发中,这种方式可用于展示应用内的各种图片元素,如用户头像、图标等。 2. CheckBox:利用 CheckBox 的状态监听机制,实现了对 Button 可用性的控制,很好地体现了 Android 中事件处理和控件交互的逻辑。这种功能常用于需要用户确认某些条件后才能进行下一步操作的场景,如注册页面勾选协议后才能点击注册按钮等。 3. ListView:借助 SimpleAdapter 实现了数据与视图的绑定,将图片和文字数据正确展示在 ListView 中。在大型应用中,ListView 常用于展示列表数据,如联系人列表、新闻列表等,通过适配器可以灵活地定制列表项的显示样式。 (二)结论 通过本次实验,熟悉了 Android 开发中 ImageView、CheckBox、ListView 等常用控件的使用方法,掌握了基本的界面布局技巧以及控件的事件处理功能。在实验过程中,对 Android UI 设计的流程和原理有了更深入的理解,能够将所学的理论知识应用到实际的程序开发中。但在实验中也发现,对于复杂的界面布局和大量数据的展示,还需要进一步学习更高级的布局方式和优化技巧,后续会继续加强相关知识的学习和实践。 我是计算机科学与技术专业的学生,以上是我移动应用开发课程的实验,根据以上内容帮我生成一份实验报告,包括实验内容,实验目的,实验设备,实验过程,实验结果,结果分析与结论
最新发布
05-11
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值