前言
最近心血来潮,突然想搞点仿制品玩玩,很不幸小米成为我苦逼的第一个试验品。既然雷布斯的MIUI挺受欢迎的(本人就是其的屌丝用户),所以就拿其中的一些小功能做一些小demo来玩玩。小米的通讯录大家估计用过小米的都清楚是啥子样的,没用过小米的也别着急,瞧瞧我的demo,起码也有七八分相似滴。先上图看效果
我是图:
PS:吐槽一下,博客园上个图真难,所以搞了个短点的gif上才没失败。。。。唉。。。
在这里仅仅是实现了逻辑交互的效果,并没有点击打电话的功能,因为也不难就懒得加了。。。
分析
我们说说这个东西主要的实现功能点在哪些?
1、输入数据按首字母排序
2、查询框输入时快速更改数据显示
3、右端首字母跟随数据列表位置高亮显示
4、滑动时,出现数据第一个字提示
解决方案
1、输入数据按首字母排序
这个怎么办呢?毕竟一个android小小的一个软件不可用把整个汉字拼音转换库放进去对吧,如果真的放进去,你觉得这样用户会买你的帐,对不起你的APP太大啦;所以Stop这个想法!但是我们换一个思路,既然汉字在计算机中的是以编码的存放的,我们是不是可以再编码这里面做点文章。就以GB2312来说,里面的汉字是按字典序排列的,就是越前面其声母越靠前,例如第一个汉字编码代表的就是“啊”这个字,那好办了,我们只要把各个首字母的编码获取区间,然后对于任何一个汉字,判断其是否在相对应区间中即可获取该汉字的首字母。但是但是,对于多音字这个东西,大家当我没说好吧???
附核心源码:
/** * GetPYUntl工具类提供根据汉字获取首字母的功能 * 仅支持GB2312简体汉字 */ public class GetPYUntl { //简体中文的编码范围从B0A1(45217)一直到F7FE(63486) private static final int BEGIN = 45217; private static final int END = 63486; //按照声 母表示,这个表是在GB2312中的出现的第一个汉字,也就是说“啊”是代表首字母a的第一个汉字 //i, u, v都不做声母, 自定规则跟随前面的字母 //最后保持空格 private static final char[] charTable = new char[]{'啊', '芭', '擦', '搭', '蛾', '发', '噶', '哈', '哈', '击', '喀', '垃', '妈', '拿', '哦', '啪', '期', '然', '撒', '塌', '塌', '塌', '挖', '昔', '压', '匝'}; //对应首字母区间表 private static final char[] initialtable = new char[]{'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'H', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'T', 'T', 'W', 'X', 'Y', 'Z'}; //二十六个字母区间对应二十七个端点 //GB2312码汉字区间十进制表示 private static int[] table = new int[27]; //工具类初始化代码块,进行初始化操作 static{ for(int i = 0; i < 26; i++){ table[i] = getGBValue(charTable[i]);//得到GB2312码的首字母区间端点表,十进制。 } table[26] = END;//区间表的结尾数值 } /** * 根据汉字c获取其对应的编码 * 将一个汉字(GB2312)转换为十进制表示 */ private static int getGBValue(char c) { String str = c + ""; try{ byte[] bytes = str.getBytes("GB2312"); if (bytes.length < 2){ return 0; } return (bytes[0] << 8 & 0xff00) + (bytes[1] & 0xff); } catch (Exception e){ return 0; } } //----------------------对外调用方法区---------------------------------------// /** * 根据输入的单汉字,返回首字母 * @param ch 所需要查询的汉字 * @return 返回对应输入汉字的首字母 */ public static char getFristWord(char ch){ //ch为英文字符,小写转为大写,大写直接返回 if(ch >= 'a' && ch <= 'z'){ return (char)(ch - 'a' + 'A'); } if(ch >= 'A' && ch <= 'Z'){ return ch; } //若为汉字,获取其区间值,并判断是否在码表的范围中 //若不是,返回& //若是,在码表对其进行判断 int gb = getGBValue(ch); if(gb < BEGIN || gb > END){ return '&'; } int i; for(i = 0; i < 26; i++){//判断匹配码表区间,匹配到就break,判断区间形如“[,)” if(gb >= table[i] && gb < table[i+1]){ break; } } if(gb == END){//补齐GB2312区间最右端,就是首字母编码值为END i = 25; } return initialtable[i];//在码表区间中,返回首字母 } /** * 根据输入的汉字字符串,返回首字母字符串,内部机制依赖调用 getFristWord(char ch)方法。 * @param str 所需要查询的汉字字符串 * @return 返回对应输入汉字字符串的首字母字符串 */ public static String getFristWord(String str){ String reslut = ""; if(str != null || str != ""){//容错操作,校验输入的字符串 int length = str.length(); for(int i = 0; i < length; i++){//分别对str的各个字符进行取首字母操作 reslut += getFristWord(str.charAt(i)); } } return reslut; } /** * 提供两个字符串,根据其首字母字符串的排列顺序 * @param str1 * @param str2 * @return true:str1位于str2前面,false:str1位于str2后面 */ public static int Compare(String str1, String str2){ String cstr1 = getFristWord(str1); String cstr2 = getFristWord(str2); return cstr1.compareTo(cstr2); } }
2、查询框输入时快速更改数据显示
这个实现比较简单,主要是用到TextWatcher这个类来监听EditText的内容变化,如果我们在输入查询内容,TextWatcher会监听EditText的状态改变,调用onTextChanged()方法响应。
@Override public void onTextChanged(CharSequence s, int start, int before, int count) { dealData.clear();//清空上次的query查询处理后的数据,用于加载新一次数据 if(data != null && !"".equals(s.toString())){//query有内容,显示根据query处理后的数据 for(int i = 0; i < data.size(); i++){//编译显示内容,将符合的数据收集到dealData String str = data.get(i); //判断s是否为str的子字符串,如果是,则是需要收集的数据,s为query当前输入的内容 boolean find = str.contains(s.toString()); if(find){ dealData.add(str); } } //更新listView的数据源 adapter.setData(dealData, s.toString()); //刷新listView list.invalidateViews(); } else{//数据集合为空,或者不存在查询的query请求 adapter.setData(data, s.toString()); list.invalidateViews();//刷新listView为初始状态 } }
但是!这个东西实现的最重要逻辑并不是TextWatcher的代码,而是我们重写的BaseAdapter里面的getView方法。因为我们要根据查询内容高亮显示字体,所以我们的ListView的item对应的View需要着重处理,但是这样会引入大量的View,估计教育我们要记得重用View,所以我在getView里面也大量用重用思想,减少资源占用率。
由于逻辑比较复杂,说以简略说说实现思路吧:BaseAdapter会根据是否有查询请求的接入,如果没有查询请求则是显示全部数据,那么我们会在每一个convertView里面add一个TextView的实例,显示全部内容。如果有查询请求,BaseAdapter会整理要显示的数据,然后在convertView里面add若干个TextView,每一个TextView将会只显示一个字,在对应需要高亮的TextView会进行设置字体颜色。但是这样会导致很多TextView的存在,所以我们在每一个convertView里面会设置缓存缓存这些TextView的引用,如果下次复用时直接从Tag中取得TextView进行处理后add到convertView里面显示,然后清理掉多余的缓存。如果你看懵了不要紧,注释非常详细,可以过一下代码。
核心代码:
@Override public View getView(int position, View convertView, ViewGroup parent) { List<TextView> cache = null; //进行convertView的复用,如果第一次使用,则实例化该View if(convertView == null){ convertView = inflater.inflate(R.layout.mark_list_item, null, false); //申请一个缓冲cache用于保存其子TextView的引用 cache = new ArrayList<TextView>(); TextView tv = null; if(query == null || "".equals(query)){//如果query为null,或者为空字符串,则直接加载 tv = new TextView(context); tv.setText(data.get(position));//将其整个字符串设置到TextView里面,而不单字加载 setTextParmas(tv); ((LinearLayout)convertView).addView(tv);//加载到convertView节点下 cache.add(tv);//缓存集合中保存tv的引用,便于下次复用该TextView } else{//query不为null,其有query内容,我们需要将该查询内容对于的字符高亮显示 //将显示内容的字符串拆分为字符数组,用于单字加载 char[] words = data.get(position).toCharArray(); for(int i = 0; i < words.length; i++){ tv = new TextView(context); tv.setText(words[i]+"");//单字加载,即一个字用一个TextView显示 setTextParmas(tv); //查询是否在query的内容之中,如果为是则将该TextView高亮显示 for(char c : query){ if(c == words[i]) tv.setTextColor(Color.RED); } ((LinearLayout)convertView).addView(tv); cache.add(tv); } } } else{//如果不是第一次使用,则该convertView可以被复用 cache = (List<TextView>) convertView.getTag();//获取缓存cache集合 TextView tv; int usingSize = 0;//记录当前convertView所有使用的TextView个数 int length = cache.size(); if(query == null || "".equals(query)){//如果query为null,或者为空字符串,则直接加载 if(length > 0){//检测cache是否存在可复用的View tv = cache.get(0);//取首个TextView复用 tv.setTextColor(Color.GRAY); } else{//如果没有可复用的TextView,实例化一个TextView并加入缓存中 tv = new TextView(context); setTextParmas(tv); ((LinearLayout)convertView).addView(tv); cache.add(tv); } tv.setText(data.get(position)); usingSize++; } else{//query不为null,其有query内容,我们需要将该查询内容对于的字符高亮显示 //将显示内容的字符串拆分为字符数组,用于单字加载 char[] words = data.get(position).toCharArray(); for(int i = 0; i < words.length; i++){ if(i < length){//获取第i个缓存的TextView tv = cache.get(i); tv.setTextColor(Color.GRAY); } else{//如果已经没有缓存TextView可获取了 tv = new TextView(context); setTextParmas(tv); ((LinearLayout)convertView).addView(tv); cache.add(tv); } //查询是否在query的内容之中,如果为是则将该TextView高亮显示 for(char c : query){ if(c == words[i]) tv.setTextColor(Color.RED); } tv.setText(words[i]+"");//单字加载,即一个字用一个TextView显示 usingSize++; } } clearCache(convertView, cache, usingSize); } convertView.setTag(cache);//保存缓存cache集合 firstWord.add(position, cache.get(0).getText().toString().charAt(0)); return convertView; }
3、右端首字母跟随数据列表位置高亮显示
这个实现的思路主要用到OnScrollListener这个监听接口,其中onScroll()这个方法会在滚动时调用,那么我们在滚动listView的时候就可以在这里操作首字母的高亮显示了。
@Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { ListViewAdapter adapter = (ListViewAdapter)(view.getAdapter()); if(adapter != null){//在首次加载listview时会调用onScroll(),那时候的adapter为null,容错处理 char c1 = adapter.getFristWord(firstVisibleItem + 4); char c2 = GetPYUntl.getFristWord(c1); TextView tv = tvMaps.get(c2+""); if(tv != null){ if(oldTv != null)//如果前次已经有TextView高亮显示,取消高亮效果 oldTv.setTextColor(Color.GRAY); tv.setTextColor(Color.RED);//设置高亮效果 centerTextView.setText(c1+""); oldTv = tv; } } }
4、滑动时,出现数据第一个字提示
这个做的不是那么好,如果快速多次滑动还是会出现一些问题。如果大家有兴趣就整改一下哈,还是用到OnScrollListener这个监听接口里面的onScrollStateChanged方法,逻辑也简单,在滚动时设置显示的TextView可见,在停止滚动时启动定时器2秒后取消TextView可见。但是对于多次快速滚动来说,这个方法还需要微调一下。
核心代码
@Override public void onScrollStateChanged(AbsListView view, int scrollState) { //构造一个定时器,用于延时2000毫秒取消显示 Runnable runnable = new Runnable() { @Override public void run() { centerTextView.setVisibility(View.INVISIBLE); } }; Handler handler = new Handler(); switch (scrollState){ case OnScrollListener.SCROLL_STATE_TOUCH_SCROLL: //如果手指还接触界面,则取消定时,主要用于第二次后触发事件使用 if(centerTextView.getVisibility() == View.VISIBLE) handler.removeCallbacks(runnable); break; case OnScrollListener.SCROLL_STATE_FLING: //如果手指离开屏幕,屏幕滑动,设置centerTextView可见 centerTextView.setVisibility(View.VISIBLE); //如果第二次手指离开屏幕,屏幕滑动,则取消定时,主要用于第二次后触发事件使用 if(centerTextView.getVisibility() == View.VISIBLE) handler.removeCallbacks(runnable); break; case OnScrollListener.SCROLL_STATE_IDLE: //启动定时任务,于2秒后取消显示 handler.postDelayed(runnable, 1000); break; } }
后记
由于代码量太多,也不好仔细讲实现的逻辑,那么一篇博客肯定写不完,我又比较懒,不喜欢折腾好几个博客来写,所以我在代码里面进行了详尽的注释,希望你参考demo能看懂这些功能的实现思路。
源码请戳(这里)
作者:enjoy风铃
出处:http://www.cnblogs.com/net168/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则下次不给你转载了。