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

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

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

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

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

[安卓] 16、ListView和GridView结合显示单元实现自定义列表显示效果   [安卓] 16、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

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 持续更新中~

上一篇:微信小程序学习指南


下一篇:Django学习之三:django-admin 和 项目manage.py程序