最近由于项目加急,手里有好多看了差不多的开源项目,其中好多是大家经常用到的。图片的缓存BitmapFun(Android的文档中),AfinalMap,下拉刷新PullToRefresh等等吧,不过由于项目需要,我要就简要说下今天我要讲的这个组件,这个组件的项目地址.
看着左边的猪脚是不是觉得这个很像IOS中的UITableView,不过我告诉这是Android的ListView。
没看代码前,我看到作者说这个是a customized ListView,这是不敢相信,ListView是每一项都基本上一样,看看我们猪脚,怎么看都不像,不过后来一看代码,这不用ListView还用什么呢。
在开始前,先扯远点,在Android中感觉组件中最常用且最有个性且最复杂的就是ListView了,你想想PullToRefreshListView,SwipToDismiss 以及后来的点击展开的那个叫ExpandableList,无一不是ListView的杰出代表。貌似GoogleMail客户端的ListView挺有意思,有兴趣看看他是怎么实现的。
对了,我的3DListView翻译也是ListView开始的,尽管没写完剩下的文章,不过我会补上的。
为什么要用到UITableView
因为要做一个定位选择机构的页面,和美团、糯米的客户端定位很相似,上面是个定位的Item,下面显示的各位城市的Item,这个在IOS那肯定是用UITableView,且我的IOS同时也在做这个页面,的确就是用UITableView。一个分组下,是几个Item。如热门城市:北京 武汉 信阳 全部城市:A 鞍山市 安庆市……信阳市……资阳市
实现原理
看看这个UITableView样式,其实就两种Item,每个分组(Group)的顶部标题(Header)和每个分组的列表选项(Cell)。
为了使ListVIew的positiom和UITableView中对应的分组(Group)和分组中的位置(Row),我们需要一个对应二者的一个数据结构,我们把它定为IndexPath。
我们需要根据数据分组,每个分组里都要一个Header和多个Cell,而在Listview中无论Cell亦或是Header我们统一认为它是一个Item,只是这个Item的IndexPath的属性不一样,他可能是一个Header,那个对应他的View就是一个HeaderView,同理Cell对应的是CellView,这个是不是可以理解呢。
用法
先去Github上现在UITableViewUI库:下载地址
建立一个自己的项目。
public class MainActivity extends Activity implements OnClickListener { UITableView tableView; private Button btnChange = null; SimpleUITableViewAdapter tableViewAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tableViewAdapter = new SimpleUITableViewAdapter(); tableView = (UITableView) findViewById(R.id.listView); tableView.setAdapter(tableViewAdapter); tableView.setOnCellClickListener(tableViewAdapter); tableView.setOnCellLongClickListener(tableViewAdapter); tableView.setOnCellAccessoryClickListener(tableViewAdapter); tableView.setOnHeaderClickListener(tableViewAdapter); tableView.setOnHeaderLongClickListener(tableViewAdapter); btnChange = (Button) findViewById(R.id.btnChange); btnChange.setOnClickListener(this); } @Override public void onClick(View v) { int id = v.getId(); if(id == R.id.btnChange){ tableViewAdapter.setChange(); } } class SimpleUITableViewAdapter extends UITableViewAdapter implements OnCellClickListener, OnCellLongClickListener, OnCellAccessoryClickListener, OnHeaderClickListener, OnHeaderLongClickListener { private int[] color_line1_default; private int[] color_line2_default; private int[] color_line1_pressed; private int[] color_line2_pressed; public SimpleUITableViewAdapter() { // Prepare two sets of colors for odd and even lines color_line1_default = new int[] { getResources().getColor(R.color.base_start_color_line1_default), getResources().getColor(R.color.base_start_color_line1_default) }; color_line2_default = new int[] { getResources().getColor(R.color.base_start_color_line2_default), getResources().getColor(R.color.base_start_color_line2_default) }; color_line1_pressed = new int[] { getResources().getColor(R.color.base_start_color_line1_pressed), getResources().getColor(R.color.base_start_color_line1_pressed) }; color_line2_pressed = new int[] { getResources().getColor(R.color.base_start_color_line2_pressed), getResources().getColor(R.color.base_start_color_line2_pressed) }; } int number = 4; int rad = 1; public void setChange(){ number = 3; rad = 2; } @Override public int numberOfGroups() { return number; } @Override public int numberOfRows(int group) { return (group + rad) * 2; } @Override public UITableHeaderItem headerItemForGroup(Context context, IndexPath indexPath) { return new UITableHeaderItem("Group " + indexPath.getGroup()); } @Override public UITableCellItem cellItemForRow(Context context, IndexPath indexPath) { String title = "Cell number " + indexPath.getRow() + " in group " + indexPath.getGroup(); String subtitle = (indexPath.getRow() % 2 == 0) ? "Subtitle " + indexPath.getRow() : null; return new UITableCellItem(title, subtitle); } @Override public UITableHeaderView headerViewForGroup(Context context, IndexPath indexPath, UITableHeaderItem headerItem, UITableHeaderView convertView) { UITableHeaderView headerView; if (convertView == null) { // If the recycled view is null, we just creating one headerView = new UITableHeaderView(context, indexPath); } else { headerView = (UITableHeaderView) convertView; } headerView.setTitle(headerItem.title); return headerView; } @Override public UITableCellView cellViewForRow(Context context, IndexPath indexPath, UITableCellItem cellItem, UITableCellView convertView) { UITableCellView cellView; if (convertView == null) { // If the recycled view is null, we just creating one with cell's commons parameters cellView = new UITableCellView(context, indexPath); cellView.setMinimumHeight(80); cellView.setAccessory(AccessoryType.DISCLOSURE); } else { cellView = (UITableCellView) convertView; } cellView.setTitle(cellItem.title); cellView.setSubtitle(cellItem.subtitle); // Set alternated background color if (indexPath.getRow() % 2 == 0) { cellView.setBackgroundColor(color_line1_default, color_line1_pressed); } else { cellView.setBackgroundColor(color_line2_default, color_line2_pressed); } return cellView; } @Override public void onCellClick(IndexPath indexPath) { Toast.makeText(getApplicationContext(), "Cell clicked : " + indexPath, 1000).show(); } @Override public boolean onCellLongClick(IndexPath indexPath) { Toast.makeText(getApplication(), "Cell long clicked : " + indexPath, 1000).show(); return indexPath.getRow() % 2 == 0; // Consume the long click one row out of two } @Override public void onCellAccessoryClick(IndexPath indexPath) { Toast.makeText(getApplication(), "Cell accessory clicked : " + indexPath, 1000).show(); } @Override public void onHeaderClick(IndexPath indexPath) { Toast.makeText(getApplicationContext(), "Header clicked : " + indexPath, 1000).show(); } @Override public boolean onHeaderLongClick(IndexPath indexPath) { Toast.makeText(getApplicationContext(), "Header long clicked : " + indexPath, 1000).show(); return indexPath.getGroup() % 2 == 0; // Consume the long click one row out of two } } }
看下这个SimpleUITableViewAdapter 的实现,headerItemForGroup ()和cellItemForRow ()这个是需要的item数据,headerViewForGroup()和cellViewForRow是为分组的顶部标题和分组中的列表选项的试图展示。numberOfGroups()numberOfRows(int group)则表示每个分组的个数和对应group分组下的选项个数。
这个例子看着你不是觉得这个很有意思啊。
下一篇我们就可以看一下他的项目设计详细设计吧。