创新源于模仿之二：美化ListView的尝试

今天继续，模仿MIUI做那个Contacts的ListView，如下图：

其实可以这样归纳一下我们要做的事情：

1. 按首字母分组，显示一个分组的标签头。

2. 在右边做一个全字母表，可以用手指上下滑动快速选择字母分组。

3. 再做一个当前选中的那个字母的显示。

先说第一件事。我们已经了解ListView/ListAdapter组合做出一个列表界面。那么，怎么在列表中显示一些不可选且模样不同的行，在SDK提供的例子其实是有相关代码可供参考的。

相关的代码是在ListAdapter中这两个方法：

@Override<br /> public boolean areAllItemsEnabled() {<br /> return false; //不是所有项都可选<br /> }<br /> @Override<br /> public boolean isEnabled(int position) {<br /> return !getItem(position).name.startsWith("@section"); //如果名字以@section开头，则该项不可选<br /> }
 

简言之，在position这个项是否可选完全可以由你来控制的。

模样的问题也容易解决，只是这样做的效率会降低：

public View getView(int position, View convertView, ViewGroup parent) {<br /> // 如果每一项都一样，就可以这样。<br /> // if(convertView==null){<br /> // convertView=mInflater.inflate(R.layout.friends_list_row, null);<br /> // }<br /> //但我们每一项的模样都可能不一样，只能这样了<br /> FriendInfo item = (FriendInfo)getItem(position);<br /> if(item!=null){<br /> if(!item.name.startsWith("@section")){<br /> convertView=mInflater.inflate(R.layout.friends_list_row, null);<br /> //... ...<br /> convertView.setTag(item);<br /> }<br /> else {<br /> convertView=mInflater.inflate(R.layout.friends_list_section, null);<br /> // ... ...<br /> }<br /> }<br /> return convertView;<br /> }
 

可以运行看看，第一个问题解决了。

第二个问题的处理就是找一张图，放在ListView的右边即可。先看看我们的Layout文件片断：

注意这个QuickAlphabeticBar是我们自定义的一个View，extends ImageButton，所以你可以先试试用ImageButton放这儿也能很快看到效果。

<FrameLayout<br /> android:layout_width="fill_parent"<br /> android:layout_height="0.0dip"<br /> android:layout_weight="1.0"><br /> <ListView<br /> android:id="@id/friends_list"<br /> android:scrollbars="vertical"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> android:layout_marginLeft="0.0dip"<br /> android:drawSelectorOnTop="false"<br /> android:scrollingCache="true"<br /> android:layout_weight="1.0"<br /> android:fastScrollEnabled="false"<br /> android:footerDividersEnabled="true"<br /> android:cacheColorHint="#00000000"<br /> style="@style/Widget.ListViewGreen"<br /> /><br /> <cn.sharetop.xmessenger.ui.QuickAlphabeticBar<br /> android:layout_gravity="top|right|center"<br /> android:id="@id/fast_scroller"<br /> android:background="@null"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_marginTop="10.0px"<br /> android:scaleType="centerInside"<br /> android:src="@drawable/contact_list_scroll_long" /><br /> <TextView<br /> android:id="@id/fast_position"<br /> android:textSize="48dip"<br /> android:textColor="#99FFFFFF"<br /> android:background="@drawable/fast_scroller_overlay"<br /> android:layout_gravity="center_horizontal|top"<br /> android:padding="2dip"<br /> android:layout_margin="24dip"<br /> android:layout_width="@dimen/header_width"<br /> android:layout_height="@dimen/header_width"<br /> android:gravity="center"/><br /> </FrameLayout>
 

很好，这个字母表有了，因为我们需要对手指在上面滑动时的事件进行处理，所以我们自定义它，无非就是要处理这个onTouchEvent(MotionEvent event) 事件罢了，怎么处理？大家应该都想到了，就是根据手指所在位置算一下是哪个字母。

所以呢，我们先处理一下那个ListAdapter，让它implements SectionIndexer。

public class FriendsListAdapter extends ArrayAdapter<FriendInfo> implements SectionIndexer{<br /> private Context mContext;<br /> private LayoutInflater mInflater;<br /> private HashMap<String, Integer> alphaIndexer;<br /> private String[] sections = new String[0];<br /> public FriendsListAdapter(Context context, int textViewResourceId,<br /> List<BuddyInfo> objects) {<br /> super(context, textViewResourceId, objects);<br /> mContext=context;<br /> mInflater=LayoutInflater.from(mContext);<br /> initSections(objects);<br /> }<br /> //......<br /> @Override<br /> public int getPositionForSection(int section) {<br /> String letter = sections[section];<br /> return alphaIndexer.get(letter);<br /> }<br /> @Override<br /> public int getSectionForPosition(int position) {<br /> int prevIndex = 0;<br /> for(int i = 0; i < sections.length; i++) {<br /> if(getPositionForSection(i) > position && prevIndex <= position) {<br /> prevIndex = i;<br /> break;<br /> }<br /> prevIndex = i;<br /> }<br /> return prevIndex;<br /> }<br /> @Override<br /> public Object[] getSections() {<br /> return sections;<br /> }<br /> private void initSections(List<BuddyInfo> items){<br /> alphaIndexer = new HashMap<String, Integer>();<br /> for(int i = items.size() - 1; i >= 0; i--) {<br /> BuddyInfo element = items.get(i);<br /> String firstChar = element.sortKey;//.substring(0, 1).toUpperCase();<br /> if(firstChar.charAt(0) > 'Z' || firstChar.charAt(0) < 'A')<br /> firstChar = "#";<br /> alphaIndexer.put(firstChar, i);<br /> }<br /> Set<String> keys = alphaIndexer.keySet();<br /> Iterator<String> it = keys.iterator();<br /> ArrayList<String> keyList = new ArrayList<String>();<br /> while(it.hasNext())<br /> keyList.add(it.next());<br /> Collections.sort(keyList);<br /> sections = new String[keyList.size()];<br /> keyList.toArray(sections);<br /> }<br /> }
 

然后，在QuickAlphabeticBar里的onTouchEvent里，我们可以快速定位到相应的段上：

@Override<br /> public boolean onTouchEvent(MotionEvent event) {<br /> int act=event.getAction();<br /> //......<br /> float y = event.getY();<br /> //算手指位置，找到对应的段，让mList移动段开头的位置上<br /> if(mListAdapter!=null){<br /> int x=getAlphabeticPostion(y);<br /> if(x<0)x=0;<br /> if(x>=mSections.length) x=mSections.length-1;<br /> int pos=((SectionIndexer)mListAdapter).getPositionForSection(x);<br /> this.mList.setSelectionFromTop(pos, 0);<br /> }<br /> else{<br /> this.mList.setSelectionFromTop(getAlphabeticPostion(y),0);<br /> }<br /> return super.onTouchEvent(event);<br /> }
 

OK了，现在我们已经解决两个问题了，但是如何显示一个小的浮动窗口提示当前选中的段的首字母呢，也不复杂，大家注意到文章开头那个Layout中的ID为fast_position的TextView了吧？就是它了。

public class QuickAlphabeticBar extends ImageButton implements OnScrollListener {<br /> //... ...<br /> public void init(Context ctx){<br /> mDialogText=(TextView)((FriendsActivity)ctx).findViewById(R.id.fast_position);<br /> mDialogText.setVisibility(View.INVISIBLE);<br /> mReady = true;<br /> //... ...<br /> }<br /> //... ...<br /> @Override<br /> public void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {<br /> if (mReady) {<br /> if(mListAdapter!=null && mListAdapter.getCount()>0){<br /> BuddyInfo item = (BuddyInfo)mListAdapter.getItem(firstVisibleItem);<br /> char firstLetter = (item.sortKey!=null && item.sortKey.trim().length()>0)?item.sortKey.toUpperCase().charAt(0):' ';<br /> if (!mShowing && firstLetter != mPrevLetter) {<br /> mShowing = true;<br /> mDialogText.setVisibility(View.VISIBLE);<br /> }<br /> mDialogText.setText(((Character)firstLetter).toString());<br /> mHandler.removeCallbacks(mRemoveWindow);<br /> mHandler.postDelayed(mRemoveWindow, 1000);<br /> mPrevLetter = firstLetter;<br /> }<br /> }<br /> }<br /> //... ...<br /> }
 

这段代码就是ListView滚动时，让mDialogText显示出来，并且设置它的内容为首字母即可。关键是那个mHandler，即1秒后要记得让它隐藏起来。

就是这么多事情了，大家可以试试。