[安卓] 16、ListView和GridView结合显示单元实现自定义列表显示效果
List在各种手机应用中都有体现，是安卓UI设计的必修课。
本文将介绍在开发中如何利用ListView和GridView设计自定义列表。
下面分别是用ListView和GridView做的效果：
上面两个看似相差很大，但是其代码非常类似，主要有：
① 在页面中嵌入ListView或GridView:
ListView的activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.beautifulzzzz.activity.MainActivity" > <ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp" > </ListView> </RelativeLayout>
GridView的activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/orange_red"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.beautifulzzzz.activity.MainActivity" > <GridView
android:id="@+id/gridView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="3"
android:padding="5dp" >
</GridView> </RelativeLayout>
② 设计每个单元样式：
两个工程的item.xml一样，如果想定制不同的效果：如朋友圈列表那样的就要精心设计这个item了（不排除有其他方法）！
该item.xml布局显示效果就是上面一个图片，下面一个文字
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="22dp"
android:background="@drawable/item_selector"> <ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="50dp" /> <TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="文字"
/>
</LinearLayout>
③ 设计Adapter和监听事件：
两个代码很相似，下面红色的部分是将数据和item.xml中的元素绑定~class ItemClickListener implements OnItemClickListener是item点击监听事件类，在其内部调用.get(key)获得点击item中相应的元素值（是一种map的存储方式）。
ListView的MainActivity.java
public class MainActivity extends Activity {
private ListView lview;
private List<Map<String, Object>> data_list;
private SimpleAdapter sim_adapter;
// ICON
private int[] icon = { R.drawable.icon_01, R.drawable.icon_02,
R.drawable.icon_03, R.drawable.icon_04, R.drawable.icon_05,
R.drawable.icon_06, R.drawable.icon_07, R.drawable.icon_08,
R.drawable.icon_09, R.drawable.icon_10, R.drawable.icon_11,
R.drawable.icon_12, R.drawable.icon_13, R.drawable.icon_14 };
private String[] iconName = { "ͨ茶叶", "汉堡", "肉", "香肠", "披萨", "虾", "水果", "鱼",
"面包", "蟹", "鸡腿", "根茎蔬菜", "蛋糕", "酒" };
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
// this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
// WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_main);
lview = (ListView) findViewById(R.id.listView1);
data_list = new ArrayList<Map<String, Object>>();
getData();
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);
lview.setAdapter(sim_adapter);
lview.setOnItemClickListener(new ItemClickListener());
}
public List<Map<String, Object>> getData() {
for (int i = 0; i < icon.length; i++) {
Map<String, Object> map = new HashMap<String, Object>();
map.put("image", icon[i]);
map.put("text", iconName[i]);
data_list.add(map);
}
return data_list;
}
// 当AdapterView被单击(触摸屏或者键盘)，则返回的Item单击事件
class ItemClickListener implements OnItemClickListener {
public void onItemClick(AdapterView<?> arg0,// The AdapterView where the
// click happened
View arg1,// The view within the AdapterView that was clicked
int arg2,// The position of the view in the adapter
long arg3// The row id of the item that was clicked
) {
// 在本例中arg2=arg3
HashMap<String, Object> item = (HashMap<String, Object>) arg0
.getItemAtPosition(arg2);
// 显示所选Item的ItemText
setTitle((String) item.get("text"));// the item is map,you can
// seethe function getData,if
// want get the value, just use
// .get(key) to get the value
}
}
}
GridView的MainActivity.java
public class MainActivity extends Activity {
private GridView gview;
private List<Map<String, Object>> data_list;
private SimpleAdapter sim_adapter;
// ICON
private int[] icon = { R.drawable.icon_01, R.drawable.icon_02,
R.drawable.icon_03, R.drawable.icon_04, R.drawable.icon_05,
R.drawable.icon_06, R.drawable.icon_07, R.drawable.icon_08,
R.drawable.icon_09, R.drawable.icon_10, R.drawable.icon_11,
R.drawable.icon_12, R.drawable.icon_13, R.drawable.icon_14 };
private String[] iconName = { "ͨ茶叶", "汉堡", "肉", "香肠", "披萨", "虾", "水果", "鱼",
"面包", "蟹", "鸡腿", "根茎蔬菜", "蛋糕", "酒" };
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
// this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
// WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_main);
gview = (GridView) findViewById(R.id.gridView1);
data_list = new ArrayList<Map<String, Object>>();
getData();
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);
gview.setAdapter(sim_adapter);
gview.setOnItemClickListener(new ItemClickListener());
}
public List<Map<String, Object>> getData() {
for (int i = 0; i < icon.length; i++) {
Map<String, Object> map = new HashMap<String, Object>();
map.put("image", icon[i]);
map.put("text", iconName[i]);
data_list.add(map);
}
return data_list;
}
// 当AdapterView被单击(触摸屏或者键盘)，则返回的Item单击事件
class ItemClickListener implements OnItemClickListener {
public void onItemClick(AdapterView<?> arg0,// The AdapterView where the
// click happened
View arg1,// The view within the AdapterView that was clicked
int arg2,// The position of the view in the adapter
long arg3// The row id of the item that was clicked
) {
// 在本例中arg2=arg3
HashMap<String, Object> item = (HashMap<String, Object>) arg0
.getItemAtPosition(arg2);
// 显示所选Item的ItemText
setTitle((String) item.get("text"));// the item is map,you can
// seethe function getData,if
// want get the value, just use
// .get(key) to get the value
}
}
}
在研究上面问题过程中记录了几个有用的链接：
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
3、gridview中的OnItemClickListener事件触发问题！！！
4、Android应用开发笔记(10)：制作自定义背景Button按钮、自定义形状Button的全攻略
5、android selector(如对TextView点击样式改变) - perfect亮：http://www.cnblogs.com/liangstudyhome/p/3695305.html
MMMMMMMMMMMMM
- 上面工程中点击item的点击效果被我重新定义过了，具体用了第5点链接中说的selector:
- 在item.xml的第8行：android:background="@drawable/item_selector"
- 在drawable文件夹内新建item_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true"
android:drawable="@color/orange_red_shen" />
<item android:state_focused="true"
android:drawable="@color/orange_red_shen" />
<item android:drawable="@color/orange_red" />
</selector>
MMMMMMMMMMMMM
上述两个工程的源码：
GridView工程：http://pan.baidu.com/s/1sjQlRCp
ListView工程：http://pan.baidu.com/s/1i3zxUj7
@beautifulzzzz
2015-11-10 持续更新中~
[安卓] 16、ListView和GridView结合显示单元实现自定义列表显示效果的更多相关文章
- ListView嵌套GridView，显示不全解决办法
ListView嵌套GridView时,遇到了GridView只显示一行,其余都显示不出来的问题,最终解决办法如下: 需要自定义GridView,重新绘制高度即可: public class MyGr ...
- Android 用ListView实现GridView分列显示
我想实现百度影音首页的这种效果: 在网上用ScrollView+GridView可以实现,但是touch scrollview的时候会莫名刷新gridview,这样用户体验很不好,而且感觉百度不是这样 ...
- 安卓获取ListView、GridView等滚动的距离（高度）
public int getScrollY() { View c = mListView.getChildAt(0); if (c == null) { return 0; } int firstVi ...
- android中ScrollView嵌套ListView或GridView显示位置问题
Android中ScrollView中嵌套ListView或GridView时在开始进入界面时总是显示中间位置,开头的位置显示不出来.这种情况下只需要在ScrollView的父控件中添加以下两行代码即 ...
- 安卓学习之ListView和GridView
ListView 和 GridView是安卓中显示信息的两个很基本也最常用的控件.他们的用法很相似,但是他俩也是有区别的. ListView显示的数据会将他的item放在一行显示,而且根据内容给出it ...
- ListView嵌套GridView显示不完整的解决方案
转载注明出处:http://blog.csdn.net/allen315410/article/details/40152987 近期在做项目中,有个模块须要在ListView中嵌套一个GridVie ...
- listview嵌套gridview，并实现grid元素部分显示以及点击展开与折叠
原文链接:http://blog.csdn.net/duguju/article/details/49538341 有时我们需要用GridView显示目录列表,有时甚至是二级的,即listview每一 ...
- (转)解决ScrollView嵌套ListView或者GridView导致只显示一行的方法
即动态获取ListView和GridView的高度 一.对于ListView ListView listview= new ListView(this); setListViewHeightBased ...
- android 项目学习随笔十七（ListView、GridView显示组图）
ListView.GridView显示组图,处理机制相同 <?xml version="1.0" encoding="utf-8"?> <Li ...
随机推荐
- Oracle直方图的详细解析
yuanwen:http://blog.csdn.net/javacoffe/article/details/5578206 Oracle直方图解析 一. 何谓直方图: 直方图是一种统计学上的工 ...
- IOS 数据库
系统自带可以储存字段的字典: NSUserDefaults *user = [[NSUserDefaults alloc] init]; 存 : [user setObject:@"YES& ...
- pycharm 下载与配置
https://www.jetbrains.com/pycharm/download/
- js动态时间
一.在<head></head> 之间写入下面js代码 <script type="text/javascript" language="J ...
- Bomb
Description The counter-terrorists found a time bomb in the dust. But this time the terrorists impro ...
- 【OpenGL】如何绘制Shadow
背景 Shadow即阴影,它是光线被不透明物体遮挡而产生的黑暗区域,与光源的方向相反. 在Blender中编辑过程中没有Shadow,只有在经过渲染后才能显示.目前有一个基于Blender的项目,要求 ...
- svn服务器搭建与使用
- 【转】java架构师之路：JAVA程序员必看的15本书的电子版下载地址
作为Java程序员来说,最痛苦的事情莫过于可以选择的范围太广,可以读的书太多,往往容易无所适从.我想就我自己读过的技术书籍中挑选出来一些,按照学习的先后顺序,推荐给大家,特别是那些想不断提高自己技术水 ...
- Python解决八皇后问题
最近看Python看得都不用tab键了,哈哈.今天看了一个经典问题--八皇后问题,说实话,以前学C.C++的时候有这个问题,但是当时不爱学,没搞会,后来算法课上又碰到,只是学会了思想,应该是学回溯法的 ...
- 关于c++
http://www.ezlippi.com/blog/2014/12/c-open-project.html