AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

[安卓] 16、ListView和GridView结合显示单元实现自定义列表显示效果

2018-01-13 1348
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：


List在各种手机应用中都有体现，是安卓UI设计的必修课。

本文将介绍在开发中如何利用ListView和GridView设计自定义列表。

下面分别是用ListView和GridView做的效果：

    

上面两个看似相差很大，但是其代码非常类似，主要有：

   

① 在页面中嵌入ListView或GridView:

ListView的activity_main.xml

复制代码 
 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:paddingBottom="@dimen/activity_vertical_margin"
 6     android:paddingLeft="@dimen/activity_horizontal_margin"
 7     android:paddingRight="@dimen/activity_horizontal_margin"
 8     android:paddingTop="@dimen/activity_vertical_margin"
 9     tools:context="com.beautifulzzzz.activity.MainActivity" >
10 
11     <ListView
12         android:id="@+id/listView1"
13                 android:layout_width="match_parent"
14         android:layout_height="match_parent"
15         android:padding="5dp" >
16 
17     </ListView>
18 
19 </RelativeLayout>
复制代码

GridView的activity_main.xml

复制代码 
 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:background="@color/orange_red"
 6     android:paddingBottom="@dimen/activity_vertical_margin"
 7     android:paddingLeft="@dimen/activity_horizontal_margin"
 8     android:paddingRight="@dimen/activity_horizontal_margin"
 9     android:paddingTop="@dimen/activity_vertical_margin"
10     tools:context="com.beautifulzzzz.activity.MainActivity" >
11 
12  <GridView
13         android:id="@+id/gridView1"
14         android:layout_width="match_parent"
15         android:layout_height="match_parent"
16         android:numColumns="3"
17         android:padding="5dp" >
18     </GridView>
19 
20 </RelativeLayout>
复制代码

 

② 设计每个单元样式：

两个工程的item.xml一样，如果想定制不同的效果：如朋友圈列表那样的就要精心设计这个item了（不排除有其他方法）！

该item.xml布局显示效果就是上面一个图片，下面一个文字

复制代码 
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:gravity="center"
 6     android:orientation="vertical"
 7     android:padding="22dp" 
 8     android:background="@drawable/item_selector">
 9     
10 <ImageView
11     android:id="@+id/image"
12     android:layout_width="match_parent"
13     android:layout_height="50dp" />
14 
15 <TextView 
16     android:id="@+id/text"
17     android:layout_width="wrap_content"
18     android:layout_height="wrap_content"
19     android:textColor="#ffffff"
20     android:text="文字"
21     />
22 </LinearLayout>
复制代码

 

③ 设计Adapter和监听事件：

两个代码很相似，下面红色的部分是将数据和item.xml中的元素绑定~class ItemClickListener implements OnItemClickListener是item点击监听事件类，在其内部调用.get(key)获得点击item中相应的元素值（是一种map的存储方式）。

ListView的MainActivity.java

复制代码 
 1 public class MainActivity extends Activity {
 2 
 3     private ListView lview;
 4     private List<Map<String, Object>> data_list;
 5     private SimpleAdapter sim_adapter;
 6     // ICON
 7     private int[] icon = { R.drawable.icon_01, R.drawable.icon_02,
 8             R.drawable.icon_03, R.drawable.icon_04, R.drawable.icon_05,
 9             R.drawable.icon_06, R.drawable.icon_07, R.drawable.icon_08,
10             R.drawable.icon_09, R.drawable.icon_10, R.drawable.icon_11,
11             R.drawable.icon_12, R.drawable.icon_13, R.drawable.icon_14 };
12     private String[] iconName = { "ͨ茶叶", "汉堡", "肉", "香肠", "披萨", "虾", "水果", "鱼",
13             "面包", "蟹", "鸡腿", "根茎蔬菜", "蛋糕", "酒" };
14 
15     public void onCreate(Bundle savedInstanceState) {
16         super.onCreate(savedInstanceState);
17         this.requestWindowFeature(Window.FEATURE_NO_TITLE);
18         // this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
19         // WindowManager.LayoutParams.FLAG_FULLSCREEN);
20         setContentView(R.layout.activity_main);
21 
22         lview = (ListView) findViewById(R.id.listView1);
23         data_list = new ArrayList<Map<String, Object>>();
24 
25         getData();
26 
27         String[] from = { "image", "text" };
28         int[] to = { R.id.image, R.id.text };
29         sim_adapter = new SimpleAdapter(this, data_list, R.layout.item, from,
30                 to);
31 
32         lview.setAdapter(sim_adapter);
33         lview.setOnItemClickListener(new ItemClickListener());
34     }
35 
36     public List<Map<String, Object>> getData() {
37         for (int i = 0; i < icon.length; i++) {
38             Map<String, Object> map = new HashMap<String, Object>();
39             map.put("image", icon[i]);
40             map.put("text", iconName[i]);
41             data_list.add(map);
42         }
43 
44         return data_list;
45     }
46 
47     // 当AdapterView被单击(触摸屏或者键盘)，则返回的Item单击事件
48     class ItemClickListener implements OnItemClickListener {
49         public void onItemClick(AdapterView<?> arg0,// The AdapterView where the
50                                                     // click happened
51                 View arg1,// The view within the AdapterView that was clicked
52                 int arg2,// The position of the view in the adapter
53                 long arg3// The row id of the item that was clicked
54         ) {
55             // 在本例中arg2=arg3
56             HashMap<String, Object> item = (HashMap<String, Object>) arg0
57                     .getItemAtPosition(arg2);
58             // 显示所选Item的ItemText
59             setTitle((String) item.get("text"));// the item is map,you can
60                                                 // seethe function getData,if
61                                                 // want get the value, just use
62                                                 // .get(key) to get the value
63         }
64     }
65 }
复制代码

GridView的MainActivity.java

复制代码 
 1 public class MainActivity extends Activity {
 2 
 3     private GridView gview;
 4     private List<Map<String, Object>> data_list;
 5     private SimpleAdapter sim_adapter;
 6     // ICON
 7     private int[] icon = { R.drawable.icon_01, R.drawable.icon_02,
 8             R.drawable.icon_03, R.drawable.icon_04, R.drawable.icon_05,
 9             R.drawable.icon_06, R.drawable.icon_07, R.drawable.icon_08,
10             R.drawable.icon_09, R.drawable.icon_10, R.drawable.icon_11,
11             R.drawable.icon_12, R.drawable.icon_13, R.drawable.icon_14 };
12     private String[] iconName = { "ͨ茶叶", "汉堡", "肉", "香肠", "披萨", "虾", "水果", "鱼",
13             "面包", "蟹", "鸡腿", "根茎蔬菜", "蛋糕", "酒" };
14 
15     public void onCreate(Bundle savedInstanceState) {
16         super.onCreate(savedInstanceState);
17         this.requestWindowFeature(Window.FEATURE_NO_TITLE);
18         // this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
19         // WindowManager.LayoutParams.FLAG_FULLSCREEN);
20         setContentView(R.layout.activity_main);
21 
22         gview = (GridView) findViewById(R.id.gridView1);
23         data_list = new ArrayList<Map<String, Object>>();
24 
25         getData();
26 
27         String[] from = { "image", "text" };
28         int[] to = { R.id.image, R.id.text };
29         sim_adapter = new SimpleAdapter(this, data_list, R.layout.item, from,
30                 to);
31 
32         gview.setAdapter(sim_adapter);
33         gview.setOnItemClickListener(new ItemClickListener());
34     }
35 
36     public List<Map<String, Object>> getData() {
37         for (int i = 0; i < icon.length; i++) {
38             Map<String, Object> map = new HashMap<String, Object>();
39             map.put("image", icon[i]);
40             map.put("text", iconName[i]);
41             data_list.add(map);
42         }
43 
44         return data_list;
45     }
46 
47     // 当AdapterView被单击(触摸屏或者键盘)，则返回的Item单击事件
48     class ItemClickListener implements OnItemClickListener {
49         public void onItemClick(AdapterView<?> arg0,// The AdapterView where the
50                                                     // click happened
51                 View arg1,// The view within the AdapterView that was clicked
52                 int arg2,// The position of the view in the adapter
53                 long arg3// The row id of the item that was clicked
54         ) {
55             // 在本例中arg2=arg3
56             HashMap<String, Object> item = (HashMap<String, Object>) arg0
57                     .getItemAtPosition(arg2);
58             // 显示所选Item的ItemText
59             setTitle((String) item.get("text"));// the item is map,you can
60                                                 // seethe function getData,if
61                                                 // want get the value, just use
62                                                 // .get(key) to get the value
63         }
64     }
65 }
复制代码

 

在研究上面问题过程中记录了几个有用的链接：

1、安卓 GridView item均匀分布：http://zhidao.baidu.com/link?url=XphquqnT6InmtaovIy9XqfRNEaQqzE8JCvqsVN8H46Fb_aXCALxbADzotyMCNreQDiqC6i0Is1WUI5twCQfl6V1BkvbbW1RrzZoGHOSeNoq

2、Android API 中文（15） —— GridView：http://www.cnblogs.com/over140/archive/2010/10/19/1855366.html

MMMMMMMMMMMMM

  • 上面工程中点击item的点击效果被我重新定义过了，具体用了第5点链接中说的selector:
    • 在item.xml的第8行：android:background="@drawable/item_selector"
    • 在drawable文件夹内新建item_selector.xml
    • 复制代码 
      1 <?xml version="1.0" encoding="utf-8"?>
2 <selector xmlns:android="http://schemas.android.com/apk/res/android" >
3     <item android:state_pressed="true"
4         android:drawable="@color/orange_red_shen" />
5     <item android:state_focused="true"
6         android:drawable="@color/orange_red_shen" />
7     <item android:drawable="@color/orange_red" />
8 </selector>
      复制代码

MMMMMMMMMMMMM

上述两个工程的源码：

GridView工程：http://pan.baidu.com/s/1sjQlRCp

ListView工程：http://pan.baidu.com/s/1i3zxUj7

 

 

@beautifulzzzz

  2015-11-10 持续更新中~



本文转自beautifulzzzz博客园博客，原文链接：http://www.cnblogs.com/zjutlitao/p/4954385.html，如需转载请自行联系原作者

文章标签：
Android开发
关键词：
Android自定义
Android列表
Android gridview
Android listview gridview
Android ListView
史迪奇2号
目录
相关文章
shuj
|
28天前
|
Android开发 开发者
安卓应用开发中的自定义视图
【9月更文挑战第37天】在安卓开发的海洋中，自定义视图犹如一座座小岛，等待着勇敢的探索者去发现其独特之处。本文将带领你踏上这段旅程，从浅滩走向深海，逐步揭开自定义视图的神秘面纱。
shuj
31 3
shuj
|
21天前
|
数据可视化 Android开发 开发者
安卓应用开发中的自定义View组件
【10月更文挑战第5天】在安卓应用开发中，自定义View组件是提升用户交互体验的利器。本篇将深入探讨如何从零开始创建自定义View，包括设计理念、实现步骤以及性能优化技巧，帮助开发者打造流畅且富有创意的用户界面。
shuj
52 0
请看我回答~
|
3月前
|
供应链 物联网 区块链
未来触手可及：探索新兴技术的趋势与应用安卓开发中的自定义视图：从基础到进阶
【8月更文挑战第30天】随着科技的飞速发展，新兴技术如区块链、物联网和虚拟现实正在重塑我们的世界。本文将深入探讨这些技术的发展趋势和应用场景，带你领略未来的可能性。
请看我回答~
52 6
游客moiomvrp3vyac2
|
21天前
|
XML 前端开发 Java
安卓应用开发中的自定义View组件
【10月更文挑战第5天】自定义View是安卓应用开发的一块基石，它为开发者提供了无限的可能。通过掌握其原理和实现方法，可以创造出既美观又实用的用户界面。本文将引导你了解自定义View的创建过程，包括绘制技巧、事件处理以及性能优化等关键步骤。
游客moiomvrp3vyac2
22 1
mrq4nk6ni2neg
|
2月前
|
Android开发 开发者
安卓开发中的自定义视图：从入门到精通
【9月更文挑战第19天】在安卓开发的广阔天地中，自定义视图是一块充满魔力的土地。它不仅仅是代码的堆砌，更是艺术与科技的完美结合。通过掌握自定义视图，开发者能够打破常规，创造出独一无二的用户界面。本文将带你走进自定义视图的世界，从基础概念到实战应用，一步步展示如何用代码绘出心中的蓝图。无论你是初学者还是有经验的开发者，这篇文章都将为你打开一扇通往创意和效率的大门。让我们一起探索自定义视图的秘密，将你的应用打造成一件艺术品吧！
mrq4nk6ni2neg
56 10
mrq4nk6ni2neg
|
2月前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中，自定义视图控件是一种高级技巧，它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例，引导你了解如何在安卓项目中实现自定义视图控件，包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者，这篇文章都会为你提供有价值的见解和技巧。
mrq4nk6ni2neg
38 3
天下无贼001
|
2月前
|
前端开发 Android开发 开发者
安卓应用开发中的自定义视图基础
【9月更文挑战第13天】在安卓开发的广阔天地中，自定义视图是一块神奇的画布，它允许开发者将想象力转化为用户界面的创新元素。本文将带你一探究竟，了解如何从零开始构建自定义视图，包括绘图基础、触摸事件处理，以及性能优化的实用技巧。无论你是想提升应用的视觉吸引力，还是追求更流畅的交互体验，这里都有你需要的金钥匙。
天下无贼001
39 4
请看我回答~
|
2月前
|
缓存 搜索推荐 Android开发
安卓应用开发中的自定义View组件实践
【9月更文挑战第10天】在安卓开发领域，自定义View是提升用户体验和实现界面个性化的重要手段。本文将通过一个实际案例，展示如何在安卓项目中创建和使用自定义View组件，包括设计思路、实现步骤以及可能遇到的问题和解决方案。文章不仅提供了代码示例，还深入探讨了自定义View的性能优化技巧，旨在帮助开发者更好地掌握这一技能。
请看我回答~
58 7
请看我回答~
|
3月前
|
XML 搜索推荐 Android开发
安卓开发中的自定义View组件实践
【8月更文挑战第30天】探索Android世界，自定义View是提升应用界面的关键。本文以简洁的语言带你了解如何创建自定义View，从基础到高级技巧，一步步打造个性化的UI组件。
请看我回答~
120 2
请看我回答~
|
2月前
|
前端开发 搜索推荐 Android开发
探索安卓开发中的自定义视图##
【9月更文挑战第6天】 在安卓应用开发的世界里，自定义视图如同绘画艺术中的色彩，它们为界面设计增添了无限可能。通过掌握自定义视图的绘制技巧，开发者能够创造出既符合品牌形象又提升用户体验的独特界面元素。本文将深入浅出地介绍如何从零开始构建一个自定义视图，包括基础框架搭建、关键绘图方法实现、事件处理机制以及性能优化策略。准备好让你的安卓应用与众不同了吗？让我们开始吧！ ##
请看我回答~
33 0