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
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
-
![复制代码]()
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，如需转载请自行联系原作者
