Android 联系人字母排序（仿微信）

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

从界面上看，整个实现效果有两个重点：

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

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

实现字母分类：

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

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

点击下载，导入项目即可。（至于教程，网上很多）

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

PinyinUtils.java

public static String getPingYin(String inputString) {
        HanyuPinyinOutputFormat format = new HanyuPinyinOutputFormat();
        format.setCaseType(HanyuPinyinCaseType.LOWERCASE);
        format.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
        format.setVCharType(HanyuPinyinVCharType.WITH_V);

        char[] input = inputString.trim().toCharArray();
        String output = "";

        try {
            for (char curchar : input) {
                if (java.lang.Character.toString(curchar).matches("[\\u4E00-\\u9FA5]+")) {
                    String[] temp = PinyinHelper.toHanyuPinyinStringArray(curchar, format);
                    output += temp[0];
                } else
                    output += java.lang.Character.toString(curchar);
            }
        } catch (BadHanyuPinyinOutputFormatCombination e) {
            e.printStackTrace();
        }
        return output;
    }

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

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

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

<?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:orientation="vertical" >
    <!-- 这个TextView就是显示字母的 -->
    <TextView
        android:id="@+id/tv_lv_item_tag"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:background="#e6e6e6"
        android:gravity="center_vertical"
        android:paddingLeft="10dip"
        android:text="Z"
        android:visibility="visible" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <View
            android:id="@+id/view_lv_item_line"
            android:layout_width="match_parent"
            android:layout_height="0.5dip"
            android:background="#174465"
            android:layout_marginLeft="10dip"
            android:layout_marginRight="20dip"
            />

        <ImageView
            android:id="@+id/iv_lv_item_head"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"
            android:layout_below="@id/view_lv_item_line"
            android:layout_marginLeft="5dp" />
        <TextView
            android:id="@+id/tv_lv_item_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/iv_lv_item_head"
            android:layout_marginLeft="5dip"
            android:text="周华健"/>
    </RelativeLayout>

</LinearLayout>

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

 实现右侧的字母导航：

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

package com.suse.contact;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.graphics.drawable.ColorDrawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextView;

public class SideBar extends View {

    // 触摸事件
    private OnTouchingLetterChangedListener onTouchingLetterChangedListener;
    // 26个字母
    public static String[] A_Z = { "A", "B", "C", "D", "E", "F", "G", "H", "I",
            "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V",
            "W", "X", "Y", "Z", "#" };
    private int choose = -1;// 选中
    private Paint paint = new Paint();  

    private TextView mTextDialog;  

    /**
     * 为SideBar设置显示字母的TextView
     * @param mTextDialog
     */
    public void setTextView(TextView mTextDialog) {
        this.mTextDialog = mTextDialog;
    }  

    public SideBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }  

    public SideBar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }  

    public SideBar(Context context) {
        super(context);
    }  

    /**
     * 重写这个方法
     */
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 获取焦点改变背景颜色.
        int height = getHeight();// 获取对应高度
        int width = getWidth(); // 获取对应宽度
        int singleHeight = height / A_Z.length-2;// 获取每一个字母的高度  (这里-2仅仅是为了好看而已)

        for (int i = 0; i < A_Z.length; i++) {
            paint.setColor(Color.rgb(33, 65, 98));  //设置字体颜色
            paint.setTypeface(Typeface.DEFAULT_BOLD);  //设置字体
            paint.setAntiAlias(true);  //设置抗锯齿
            paint.setTextSize(30);  //设置字母字体大小
            // 选中的状态
            if (i == choose) {
                paint.setColor(Color.parseColor("#3399ff"));  //选中的字母改变颜色
                paint.setFakeBoldText(true);  //设置字体为粗体
            }
            // x坐标等于中间-字符串宽度的一半.
            float xPos = width / 2 - paint.measureText(A_Z[i]) / 2;
            float yPos = singleHeight * i + singleHeight;
            canvas.drawText(A_Z[i], xPos, yPos, paint);  //绘制所有的字母
            paint.reset();// 重置画笔
        }  

    }  

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        final int action = event.getAction();
        final float y = event.getY();// 点击y坐标
        final int oldChoose = choose;
        final OnTouchingLetterChangedListener listener = onTouchingLetterChangedListener;
        final int c = (int) (y / getHeight() * A_Z.length);// 点击y坐标所占总高度的比例*b数组的长度就等于点击b中的个数.  

        switch (action) {
        case MotionEvent.ACTION_UP:
            setBackgroundDrawable(new ColorDrawable(0x00000000));
            choose = -1;//
            invalidate();
            if (mTextDialog != null) {
                mTextDialog.setVisibility(View.INVISIBLE);
            }
            break;  

        default:
            setBackgroundResource(R.drawable.sidebar_background);
            if (oldChoose != c) {  //判断选中字母是否发生改变
                if (c >= 0 && c < A_Z.length) {
                    if (listener != null) {
                        listener.onTouchingLetterChanged(A_Z[c]);
                    }
                    if (mTextDialog != null) {
                        mTextDialog.setText(A_Z[c]);
                        mTextDialog.setVisibility(View.VISIBLE);
                    }  

                    choose = c;
                    invalidate();
                }
            }  

            break;
        }
        return true;
    }  

    /**
     * 向外公开的方法
     *
     * @param onTouchingLetterChangedListener
     */
    public void setOnTouchingLetterChangedListener(
            OnTouchingLetterChangedListener onTouchingLetterChangedListener) {
        this.onTouchingLetterChangedListener = onTouchingLetterChangedListener;
    }  

    /**
     * 接口
     *
     * @author coder
     *
     */
    public interface OnTouchingLetterChangedListener {
        public void onTouchingLetterChanged(String s);
    }

}

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

MainActivity.java：

package com.suse.contact;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.TextView;

import com.suse.contact.SideBar.OnTouchingLetterChangedListener;

/**
 *
* @ClassName: MainActivity
* @Description: TODO(这里用一句话描述这个类的作用)
* @author 银色的流星 欢迎批评、指导、交流  QQ:962455668
 */
public class MainActivity extends Activity {

    private ListView listView;
    private SortAdapter sortadapter;
    private List<PersonBean> data;
    private SideBar sidebar;
    private TextView dialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private List<PersonBean> getData(String[] data) {
        List<PersonBean> listarray = new ArrayList<PersonBean>();
        for (int i = 0; i < data.length; i++) {
            String pinyin = PinyinUtils.getPingYin(data[i]);
            String Fpinyin = pinyin.substring(0, 1).toUpperCase();

            PersonBean person = new PersonBean();
            person.setName(data[i]);
            person.setPinYin(pinyin);
            // 正则表达式，判断首字母是否是英文字母
            if (Fpinyin.matches("[A-Z]")) {
                person.setFirstPinYin(Fpinyin);
            } else {
                person.setFirstPinYin("#");
            }

            listarray.add(person);
        }
        return listarray;

    }

    private void init() {
        // TODO Auto-generated method stub
        sidebar = (SideBar) findViewById(R.id.sidebar);
        listView = (ListView) findViewById(R.id.listview);
        dialog = (TextView) findViewById(R.id.dialog);
        sidebar.setTextView(dialog);
        // 设置字母导航触摸监听
        sidebar.setOnTouchingLetterChangedListener(new OnTouchingLetterChangedListener() {

            @Override
            public void onTouchingLetterChanged(String s) {
                // TODO Auto-generated method stub
                // 该字母首次出现的位置
                int position = sortadapter.getPositionForSelection(s.charAt(0));

                if (position != -1) {
                    listView.setSelection(position);
                }
            }
        });
        data = getData(getResources().getStringArray(R.array.listpersons));
        // 数据在放在adapter之前需要排序
        Collections.sort(data, new PinyinComparator());
        sortadapter = new SortAdapter(this, data);
        listView.setAdapter(sortadapter);
    }

}

SortAdapter.java:

package com.suse.contact;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class SortAdapter extends BaseAdapter {
    private Context context;
    private List<PersonBean> persons;
    private LayoutInflater inflater;

    public SortAdapter(Context context, List<PersonBean> persons) {
        this.context = context;
        this.persons = persons;
        this.inflater = LayoutInflater.from(context);

    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return persons.size();
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return persons.get(position);
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewholder = null;
        PersonBean person = persons.get(position);
        if (convertView == null) {
            viewholder = new ViewHolder();
            convertView = inflater.inflate(R.layout.list_item, null);
            viewholder.tv_tag = (TextView) convertView
                    .findViewById(R.id.tv_lv_item_tag);
            viewholder.tv_name = (TextView) convertView
                    .findViewById(R.id.tv_lv_item_name);
            convertView.setTag(viewholder);
        } else {
            viewholder = (ViewHolder) convertView.getTag();
        }
        // 获取首字母的assii值
        int selection = person.getFirstPinYin().charAt(0);
        // 通过首字母的assii值来判断是否显示字母
        int positionForSelection = getPositionForSelection(selection);
        if (position == positionForSelection) {// 相等说明需要显示字母
            viewholder.tv_tag.setVisibility(View.VISIBLE);
            viewholder.tv_tag.setText(person.getFirstPinYin());
        } else {
            viewholder.tv_tag.setVisibility(View.GONE);

        }
        viewholder.tv_name.setText(person.getName());
        return convertView;
    }

    public int getPositionForSelection(int selection) {
        for (int i = 0; i < persons.size(); i++) {
            String Fpinyin = persons.get(i).getFirstPinYin();
            char first = Fpinyin.toUpperCase().charAt(0);
            if (first == selection) {
                return i;
            }
        }
        return -1;

    }

    class ViewHolder {
        TextView tv_tag;
        TextView tv_name;
    }

}

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

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

时间： 2024-10-07 12:54:54

Android 联系人字母排序（仿微信）的相关文章

Android 自定义View，仿微信视频播放按钮

闲着,尝试实现了新版微信视频播放按钮,使用的是自定义View,先来个简单的效果图...真的很简单哈. 由于暂时用不到,加上时间原因,加上实在是没意思,加上……,本控件就没有实现自定义属性,有兴趣的朋友可以自己去添加一下,方法都给你们准备好了.- = 其实这个控件主要步骤 1.画外环的圆 2.画进度的圆或者画三角形播放按钮 其余剩下的都是围绕以上两步准备或者收尾的. 接下来贴主要我们的自定义控件代码,注释很全,我就不过多解释了,请各位看官自己分析,有疑问可以在评论区一起讨论. package co

android之使用GridView+仿微信图片上传功能(附源代码)

由于工作要求最近在使用GridView完成图片的批量上传功能,我的例子当中包含仿微信图片上传.拍照.本地选择.相片裁剪等功能,如果有需要的朋友可以看一下,希望我的实际经验能对您有所帮助. 直接上图,下面的图片就是点击"加号"后弹出的对话框,通过对话框可以根据自己需求进行相片选择. 项目结构: 下面直接上代码. 整体的布局文件activity_main.xml 1 <LinearLayout xmlns:android="http://schemas.android.co

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

拍照--裁剪,或者是选择图片--裁剪,是我们设置头像或上传图片时经常需要的一组操作.上篇讲了Camera的使用,这篇讲一下我对图片裁剪的实现. 背景 下面的需求都来自产品. 裁剪图片要像微信那样,拖动和放大的是图片,裁剪框不动. 裁剪框外的内容要有半透明黑色遮罩. 裁剪框下面要显示一行提示文字(这点我至今还是持保留意见的). 在Android中,裁剪图片的控件库还是挺多的,特别是github上比较流行的几个,都已经进化到比较稳定的阶段,但比较遗憾的是它们的裁剪过程是拖动或缩放裁剪框,于是只好自己

Android 使用NineOldAndroids实现仿微信listview左滑出现删除itembutton

这是一个使用NineOldAndroids实现仿微信listview左滑出现删除itembutton效果.使用的是Jake Wharton的动画开源库NineOldAndroids.在API3.0(Honeycomb), SDK新增了一个android.animation包,里面的类是实现动画效果相关的类,通过Honeycomb API,能够实现非常复杂的动画效果,但是如果开发者想在3.0以下使用这一套API, 则需要使用开源框架Nine Old Androids,在这个库中会根据我们运行的机器

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

(本博客为原创,http://home.cnblogs.com/u/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截图 六,完整项目 一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下  "仿微信打开网页的进度条效果" ,你会看到有很多类似的文章,不过他们有个共同点,就是实现方法都是一样的,而且,都忽略了微信加载网页时,进度条的缓慢动画效果,它不是生硬地一

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

1.首先我们把这几个工具类拷贝到自己的项目中,这些都是很常见的类: CharacterParser       –这是用来把中文转成拼音的工具类 PinyinComparator   –拼音首字母的比较器 SideBar                    –右侧的竖条,显示的是二十六个字母以及*,和#号 SortModel               –放排序name和key的bean 1 public class CharacterParser { 2 private static int

Android使用Retrofit技术仿微信图片上传，可以选择多张图片拍照上传

Android 仿照微信发说说,既能实现拍照,选图库,多图案上传 使用Retrofit技术. 使用方法:详见博客 http://blog.csdn.net/u010046908/article/details/50767904 项目的运行效果: 服务器端接收文件的action UploadFile.java @Controller public class UploadFile extends ActionSupport { /** * */ private static final long

仿IOS通讯录效果，实现获取手机通讯录、字母排序显示、搜索联系人、拨打电话

1.使用UITableView,实现联系人字母排序.点击字母跳转显示联系人组目录: 2.使用UISearchController,实现联系搜索,动态显示符合查询的联系人: 3.点击通讯录列表项,显示联系人信息(使用自定义模式化窗口类似与UIAlertView,使用UIwindow实现),点击拨号,可以直接拨打电话: 4.实现获取手机通讯录里面的联系人信息: 详情见资源:http://download.csdn.net/detail/u011622479/9505751 效果图如下: 获取联系人:

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

Android精选源码 仿微信打开红包旋转动画 使用Kotlin编写的Android应用,内容你想象不到 Android手机上的免Root Android系统日志Viewer 一个能让微信 Material Design 化的 Xposed 模块 仿最新版微信 Rxjava+Retrofit+MVP+Glide 技术开发 android一键清理/内存加速,缓存清理,自启管理,软件管理 android打造酷炫下拉视差效果并解决各种滑动冲突源码 android实现UC浏览器首页滑动动画实现 andr