现在很多APP只要涉及到联系人的界面,几乎都会采取字母排序以及导航的方式。作为程序猿,这种已经普及的需求还是需要学习的,于是小生开始了在网上默默的学习之路,网上学习的资料质量参差不齐,不过也有很不错的文章,文章后面分享给大家。这篇文章,仅是小生在学习之后,自己独立编写与总结吧。废话不多说先上效果图。

从界面上看,整个实现效果有两个重点:

  1. 实现字母分类。
  2. 实现右侧的字母导航。

我们先一个一个来了解解决方案,再上代码。

实现字母分类:

字母分类又分为三个小要点:一个是将中文转化为拼音,一个是实现按照字母的顺序排序,另一个是字母只显示在具有相同首字母中文的第一个前面。

1、将中文转化为拼音,这里使用了一个工具包,即pinyin4j-2.5.0.jar。官网地址:http://pinyin4j.sourceforge.net/

点击下载,导入项目即可。(至于教程,网上很多)

在这里我们只需要使用将中文转换成拼音的代码即可。

PinyinUtils.java

  1. public static String getPingYin(String inputString) {
  2. HanyuPinyinOutputFormat format = new HanyuPinyinOutputFormat();
  3. format.setCaseType(HanyuPinyinCaseType.LOWERCASE);
  4. format.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
  5. format.setVCharType(HanyuPinyinVCharType.WITH_V);
  6.  
  7. char[] input = inputString.trim().toCharArray();
  8. String output = "";
  9.  
  10. try {
  11. for (char curchar : input) {
  12. if (java.lang.Character.toString(curchar).matches("[\\u4E00-\\u9FA5]+")) {
  13. String[] temp = PinyinHelper.toHanyuPinyinStringArray(curchar, format);
  14. output += temp[0];
  15. } else
  16. output += java.lang.Character.toString(curchar);
  17. }
  18. } catch (BadHanyuPinyinOutputFormatCombination e) {
  19. e.printStackTrace();
  20. }
  21. return output;
  22. }

2、实现按照字母的顺序排序,使用的是JAVA自带的Comparator接口,利用之前获取到的中文拼音,得到首字母并根据ascii值来实现排序。

  1. private int sort(PersonBean lhs, PersonBean rhs) {
  2. // 获取ascii值
  3. int lhs_ascii = lhs.getFirstPinYin().toUpperCase().charAt(0);
  4. int rhs_ascii = rhs.getFirstPinYin().toUpperCase().charAt(0);
  5. // 判断若不是字母,则排在字母之后
  6. if (lhs_ascii < 65 || lhs_ascii > 90)
  7. return 1;
  8. else if (rhs_ascii < 65 || rhs_ascii > 90)
  9. return -1;
  10. else
  11. return lhs.getPinYin().compareTo(rhs.getPinYin());
  12. }

3、字母只显示在具有相同首字母中文的第一个前面。这里算是一个小技巧,这里字母显示的布局与中文名字的布局都是存放在ListView的item的布局中的。item的布局如下:

  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:orientation="vertical" >
  6. <!-- 这个TextView就是显示字母的 -->
  7. <TextView
  8. android:id="@+id/tv_lv_item_tag"
  9. android:layout_width="match_parent"
  10. android:layout_height="20dp"
  11. android:background="#e6e6e6"
  12. android:gravity="center_vertical"
  13. android:paddingLeft="10dip"
  14. android:text="Z"
  15. android:visibility="visible" />
  16.  
  17. <RelativeLayout
  18. android:layout_width="match_parent"
  19. android:layout_height="wrap_content" >
  20. <View
  21. android:id="@+id/view_lv_item_line"
  22. android:layout_width="match_parent"
  23. android:layout_height="0.5dip"
  24. android:background="#174465"
  25. android:layout_marginLeft="10dip"
  26. android:layout_marginRight="20dip"
  27. />
  28.  
  29. <ImageView
  30. android:id="@+id/iv_lv_item_head"
  31. android:layout_width="wrap_content"
  32. android:layout_height="wrap_content"
  33. android:src="@drawable/ic_launcher"
  34. android:layout_below="@id/view_lv_item_line"
  35. android:layout_marginLeft="5dp" />
  36. <TextView
  37. android:id="@+id/tv_lv_item_name"
  38. android:layout_width="wrap_content"
  39. android:layout_height="wrap_content"
  40. android:layout_centerVertical="true"
  41. android:layout_toRightOf="@id/iv_lv_item_head"
  42. android:layout_marginLeft="5dip"
  43. android:text="周华健"/>
  44. </RelativeLayout>
  45.  
  46. </LinearLayout>

而判断是否需要显示字母,是通过判断当前item的position是否等于第一个出现item对应的中文首字母的索引。如果相等,则说明是第一次出现,便需要显示字母,否则不显示字母。而这样的判断,有一个前提,那就是中文拼音的排序必须是按照字母顺序排序的,这就是我们在上一步排序的必要。

 实现右侧的字母导航:

右侧的字母导航,其本质就是一个自定义View。除了绘制界面之外,需要注意的就是触摸事件的处理,还有回调机制(这个很多地方都会用到)的使用。这个比较重要,直接上代码吧。

  1. package com.suse.contact;
  2.  
  3. import android.content.Context;
  4. import android.graphics.Canvas;
  5. import android.graphics.Color;
  6. import android.graphics.Paint;
  7. import android.graphics.Typeface;
  8. import android.graphics.drawable.ColorDrawable;
  9. import android.util.AttributeSet;
  10. import android.view.MotionEvent;
  11. import android.view.View;
  12. import android.widget.TextView;
  13.  
  14. public class SideBar extends View {
  15.  
  16. // 触摸事件
  17. private OnTouchingLetterChangedListener onTouchingLetterChangedListener;
  18. // 26个字母
  19. public static String[] A_Z = { "A", "B", "C", "D", "E", "F", "G", "H", "I",
  20. "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V",
  21. "W", "X", "Y", "Z", "#" };
  22. private int choose = -1;// 选中
  23. private Paint paint = new Paint();
  24.  
  25. private TextView mTextDialog;
  26.  
  27. /**
  28. * 为SideBar设置显示字母的TextView
  29. * @param mTextDialog
  30. */
  31. public void setTextView(TextView mTextDialog) {
  32. this.mTextDialog = mTextDialog;
  33. }
  34.  
  35. public SideBar(Context context, AttributeSet attrs, int defStyle) {
  36. super(context, attrs, defStyle);
  37. }
  38.  
  39. public SideBar(Context context, AttributeSet attrs) {
  40. super(context, attrs);
  41. }
  42.  
  43. public SideBar(Context context) {
  44. super(context);
  45. }
  46.  
  47. /**
  48. * 重写这个方法
  49. */
  50. protected void onDraw(Canvas canvas) {
  51. super.onDraw(canvas);
  52. // 获取焦点改变背景颜色.
  53. int height = getHeight();// 获取对应高度
  54. int width = getWidth(); // 获取对应宽度
  55. int singleHeight = height / A_Z.length-2;// 获取每一个字母的高度 (这里-2仅仅是为了好看而已)
  56.  
  57. for (int i = 0; i < A_Z.length; i++) {
  58. paint.setColor(Color.rgb(33, 65, 98)); //设置字体颜色
  59. paint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体
  60. paint.setAntiAlias(true); //设置抗锯齿
  61. paint.setTextSize(30); //设置字母字体大小
  62. // 选中的状态
  63. if (i == choose) {
  64. paint.setColor(Color.parseColor("#3399ff")); //选中的字母改变颜色
  65. paint.setFakeBoldText(true); //设置字体为粗体
  66. }
  67. // x坐标等于中间-字符串宽度的一半.
  68. float xPos = width / 2 - paint.measureText(A_Z[i]) / 2;
  69. float yPos = singleHeight * i + singleHeight;
  70. canvas.drawText(A_Z[i], xPos, yPos, paint); //绘制所有的字母
  71. paint.reset();// 重置画笔
  72. }
  73.  
  74. }
  75.  
  76. @Override
  77. public boolean dispatchTouchEvent(MotionEvent event) {
  78. final int action = event.getAction();
  79. final float y = event.getY();// 点击y坐标
  80. final int oldChoose = choose;
  81. final OnTouchingLetterChangedListener listener = onTouchingLetterChangedListener;
  82. final int c = (int) (y / getHeight() * A_Z.length);// 点击y坐标所占总高度的比例*b数组的长度就等于点击b中的个数.
  83.  
  84. switch (action) {
  85. case MotionEvent.ACTION_UP:
  86. setBackgroundDrawable(new ColorDrawable(0x00000000));
  87. choose = -1;//
  88. invalidate();
  89. if (mTextDialog != null) {
  90. mTextDialog.setVisibility(View.INVISIBLE);
  91. }
  92. break;
  93.  
  94. default:
  95. setBackgroundResource(R.drawable.sidebar_background);
  96. if (oldChoose != c) { //判断选中字母是否发生改变
  97. if (c >= 0 && c < A_Z.length) {
  98. if (listener != null) {
  99. listener.onTouchingLetterChanged(A_Z[c]);
  100. }
  101. if (mTextDialog != null) {
  102. mTextDialog.setText(A_Z[c]);
  103. mTextDialog.setVisibility(View.VISIBLE);
  104. }
  105.  
  106. choose = c;
  107. invalidate();
  108. }
  109. }
  110.  
  111. break;
  112. }
  113. return true;
  114. }
  115.  
  116. /**
  117. * 向外公开的方法
  118. *
  119. * @param onTouchingLetterChangedListener
  120. */
  121. public void setOnTouchingLetterChangedListener(
  122. OnTouchingLetterChangedListener onTouchingLetterChangedListener) {
  123. this.onTouchingLetterChangedListener = onTouchingLetterChangedListener;
  124. }
  125.  
  126. /**
  127. * 接口
  128. *
  129. * @author coder
  130. *
  131. */
  132. public interface OnTouchingLetterChangedListener {
  133. public void onTouchingLetterChanged(String s);
  134. }
  135.  
  136. }

接下来就是MainActivity和SortAdapter的代码了。

MainActivity.java:

  1. package com.suse.contact;
  2.  
  3. import java.util.ArrayList;
  4. import java.util.Collections;
  5. import java.util.List;
  6.  
  7. import android.app.Activity;
  8. import android.os.Bundle;
  9. import android.widget.ListView;
  10. import android.widget.TextView;
  11.  
  12. import com.suse.contact.SideBar.OnTouchingLetterChangedListener;
  13.  
  14. /**
  15. *
  16. * @ClassName: MainActivity
  17. * @Description: TODO(这里用一句话描述这个类的作用)
  18. * @author 银色的流星 欢迎批评、指导、交流 QQ:962455668
  19. */
  20. public class MainActivity extends Activity {
  21.  
  22. private ListView listView;
  23. private SortAdapter sortadapter;
  24. private List<PersonBean> data;
  25. private SideBar sidebar;
  26. private TextView dialog;
  27.  
  28. @Override
  29. protected void onCreate(Bundle savedInstanceState) {
  30. super.onCreate(savedInstanceState);
  31. setContentView(R.layout.activity_main);
  32. init();
  33. }
  34.  
  35. private List<PersonBean> getData(String[] data) {
  36. List<PersonBean> listarray = new ArrayList<PersonBean>();
  37. for (int i = 0; i < data.length; i++) {
  38. String pinyin = PinyinUtils.getPingYin(data[i]);
  39. String Fpinyin = pinyin.substring(0, 1).toUpperCase();
  40.  
  41. PersonBean person = new PersonBean();
  42. person.setName(data[i]);
  43. person.setPinYin(pinyin);
  44. // 正则表达式,判断首字母是否是英文字母
  45. if (Fpinyin.matches("[A-Z]")) {
  46. person.setFirstPinYin(Fpinyin);
  47. } else {
  48. person.setFirstPinYin("#");
  49. }
  50.  
  51. listarray.add(person);
  52. }
  53. return listarray;
  54.  
  55. }
  56.  
  57. private void init() {
  58. // TODO Auto-generated method stub
  59. sidebar = (SideBar) findViewById(R.id.sidebar);
  60. listView = (ListView) findViewById(R.id.listview);
  61. dialog = (TextView) findViewById(R.id.dialog);
  62. sidebar.setTextView(dialog);
  63. // 设置字母导航触摸监听
  64. sidebar.setOnTouchingLetterChangedListener(new OnTouchingLetterChangedListener() {
  65.  
  66. @Override
  67. public void onTouchingLetterChanged(String s) {
  68. // TODO Auto-generated method stub
  69. // 该字母首次出现的位置
  70. int position = sortadapter.getPositionForSelection(s.charAt(0));
  71.  
  72. if (position != -1) {
  73. listView.setSelection(position);
  74. }
  75. }
  76. });
  77. data = getData(getResources().getStringArray(R.array.listpersons));
  78. // 数据在放在adapter之前需要排序
  79. Collections.sort(data, new PinyinComparator());
  80. sortadapter = new SortAdapter(this, data);
  81. listView.setAdapter(sortadapter);
  82. }
  83.  
  84. }

SortAdapter.java:

  1. package com.suse.contact;
  2.  
  3. import java.util.List;
  4.  
  5. import android.content.Context;
  6. import android.view.LayoutInflater;
  7. import android.view.View;
  8. import android.view.ViewGroup;
  9. import android.widget.BaseAdapter;
  10. import android.widget.TextView;
  11.  
  12. public class SortAdapter extends BaseAdapter {
  13. private Context context;
  14. private List<PersonBean> persons;
  15. private LayoutInflater inflater;
  16.  
  17. public SortAdapter(Context context, List<PersonBean> persons) {
  18. this.context = context;
  19. this.persons = persons;
  20. this.inflater = LayoutInflater.from(context);
  21.  
  22. }
  23.  
  24. @Override
  25. public int getCount() {
  26. // TODO Auto-generated method stub
  27. return persons.size();
  28. }
  29.  
  30. @Override
  31. public Object getItem(int position) {
  32. // TODO Auto-generated method stub
  33. return persons.get(position);
  34. }
  35.  
  36. @Override
  37. public long getItemId(int position) {
  38. // TODO Auto-generated method stub
  39. return position;
  40. }
  41.  
  42. @Override
  43. public View getView(int position, View convertView, ViewGroup parent) {
  44. ViewHolder viewholder = null;
  45. PersonBean person = persons.get(position);
  46. if (convertView == null) {
  47. viewholder = new ViewHolder();
  48. convertView = inflater.inflate(R.layout.list_item, null);
  49. viewholder.tv_tag = (TextView) convertView
  50. .findViewById(R.id.tv_lv_item_tag);
  51. viewholder.tv_name = (TextView) convertView
  52. .findViewById(R.id.tv_lv_item_name);
  53. convertView.setTag(viewholder);
  54. } else {
  55. viewholder = (ViewHolder) convertView.getTag();
  56. }
  57. // 获取首字母的assii值
  58. int selection = person.getFirstPinYin().charAt(0);
  59. // 通过首字母的assii值来判断是否显示字母
  60. int positionForSelection = getPositionForSelection(selection);
  61. if (position == positionForSelection) {// 相等说明需要显示字母
  62. viewholder.tv_tag.setVisibility(View.VISIBLE);
  63. viewholder.tv_tag.setText(person.getFirstPinYin());
  64. } else {
  65. viewholder.tv_tag.setVisibility(View.GONE);
  66.  
  67. }
  68. viewholder.tv_name.setText(person.getName());
  69. return convertView;
  70. }
  71.  
  72. public int getPositionForSelection(int selection) {
  73. for (int i = 0; i < persons.size(); i++) {
  74. String Fpinyin = persons.get(i).getFirstPinYin();
  75. char first = Fpinyin.toUpperCase().charAt(0);
  76. if (first == selection) {
  77. return i;
  78. }
  79. }
  80. return -1;
  81.  
  82. }
  83.  
  84. class ViewHolder {
  85. TextView tv_tag;
  86. TextView tv_name;
  87. }
  88.  
  89. }

虽然不全,但比较重要的代码都已经贴上去了。

demo下载:http://download.csdn.net/detail/af74776/8997177

其他相关的文章:

http://blog.csdn.net/guolin_blog/article/details/9033553

http://blog.csdn.net/xiaanming/article/details/12684155(这个比我这个好)

http://blog.csdn.net/b275518834/article/details/9327485

Android 联系人字母排序(仿微信)的更多相关文章

  1. Android 自定义View,仿微信视频播放按钮

    闲着,尝试实现了新版微信视频播放按钮,使用的是自定义View,先来个简单的效果图...真的很简单哈. 由于暂时用不到,加上时间原因,加上实在是没意思,加上……,本控件就没有实现自定义属性,有兴趣的朋友 ...

  2. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  3. android之使用GridView+仿微信图片上传功能

    由于工作要求最近在使用GridView完成图片的批量上传功能,我的例子当中包含仿微信图片上传.拍照.本地选择.相片裁剪等功能,如果有需要的朋友可以看一下,希望我的实际经验能对您有所帮助. 直接上图,下 ...

  4. Android开发技巧——定制仿微信图片裁剪控件

    拍照--裁剪,或者是选择图片--裁剪,是我们设置头像或上传图片时经常需要的一组操作.上篇讲了Camera的使用,这篇讲一下我对图片裁剪的实现. 背景 下面的需求都来自产品. 裁剪图片要像微信那样,拖动 ...

  5. 【转】仿Android 联系人SideBar排序,根据拼音A-Z字母快速导航,以及输入搜索条件过滤,显示姓名的文字图片

    1.首先我们把这几个工具类拷贝到自己的项目中,这些都是很常见的类: CharacterParser       –这是用来把中文转成拼音的工具类 PinyinComparator   –拼音首字母的比 ...

  6. Android自定义view之仿微信录制视频按钮

    本文章只写了个类似微信的录制视频的按钮,效果图如下:             一.主要的功能: 1.长按显示进度条,单击事件,录制完成回调 2.最大时间和最小时间控制 3.进度条宽度,颜色设置 二.实 ...

  7. Android开发之高仿微信图片选择器

    记得刚开始做Andriod项目那会,经常会碰到一些上传图片的功能需求,特别是社交类的app,比如用户头像,说说配图,商品配图等功能都需要让我们到系统相册去选取图片,但官方却没有提供可以选取多张图片的相 ...

  8. android仿微信红包动画、Kotlin综合应用、Xposed模块、炫酷下拉视觉、UC浏览器滑动动画等源码

    Android精选源码 仿微信打开红包旋转动画 使用Kotlin编写的Android应用,内容你想象不到 Android手机上的免Root Android系统日志Viewer 一个能让微信 Mater ...

  9. GSD_WeiXin(高仿微信)应用源码

    高仿微信计划:已经实现功能 1.微信首页(cell侧滑编辑.下拉眼睛动画.下拉拍短视频.点击进入聊天详情界面) 2.通讯录(联系人字母排序.搜索界面) 3.发现(朋友圈) 4.我(界面) 待实现功能( ...

随机推荐

  1. SCCM2012分发脚本

    1.分发批处理脚本 命令行:script.bat 2.分发PowerShell脚本 命令行:PowerShell.exe -executionpolicy unrestricted -file .\s ...

  2. myeclipse如何导入相应的jar包

    方法一: 相应的项目------>右键------->build path-------->Config BuildPath...------->Libraries------ ...

  3. C++ Code_HotKey

            Code::使用HotKeyCtrl定义一个系统热键 // 关联HotKeyCtrl控件变量 m_HotKey1       BEGIN_MESSAGE_MAP(CXyzDlg, CD ...

  4. 高效编程之cache命中对于程序性能的影响

    下面这个代码用两个双层循环遍历了一个二维数组里所有的元素,以我自己机器的测试 上面那个循环耗时基本为下面的一半,两个循环的时间复杂度相同,为什么会有这么大的差别? 首先要明白的是不管是几维数组,他们都 ...

  5. NHibernate讲解

    第1章 NHibernate体系结构 总览 对NHibernate体系结构的非常高层的概览: 这幅图展示了NHibernate使用数据库和配置文件数据来为应用程序提供持久化服务(和持久化的对象). 我 ...

  6. 约瑟夫环问题及python与c++实现效率对比

    约瑟夫环是一个数学的应用问题:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到m的那个人出列;他的下一个人又从1开始报数,数到m的那个人又出列;依此规律重 ...

  7. java 考试试题

    Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语法,集合的语法,io 的语法,虚拟机方面的语法,其他.有些题来自网上搜集整理,有些题来自学员 ...

  8. 倒数计数器-CountDownLatch

    最近写一个多线程程序,老是MAIN方法执行完了子线程还没执行完(不知道以前怎么玩儿的),得不到最终结果,于是找到了CountDownLatch CountDownLatch是一个同步辅助类,java. ...

  9. A C

    Problem Description Are you excited when you see the title "AC" ? If the answer is YES , A ...

  10. Android消息推送完美方案

    转自:http://bbs.hiapk.com/thread-4652657-1-1.html 推送功能在手机应用开发中越来越重要,已经成为手机开发的必须.在Android应用开发中,由于众所周知的原 ...