Android 高仿微信通讯录

来源：互联网发布：中国人民大学知乎编辑：程序博客网时间：2024/06/07 07:48

模仿了一下微信的联系人界面UI，由于是新手，所以看起来很简单的界面，结果被搞得半死，弄到凌晨5点，实在吃不消了，就睡了，早上9点又有小伙伴过来找我，约好了下午出去爬山的，没睡醒就出去玩了，一下午头都很痛，整个人也很晕，简直日了狗。。。不过还好，现在回来了，就迫不及待打开电脑写博客了，怕以后会忘。好了，废话不多说，开始切入正题！

先来一张原版的微信通讯录截图

对，界面就是这样的，很熟悉的界面吧，下面就开始写我是如何模仿的，先贴一下我的成果图

我只是模仿了一个大概，界面很简单，顶部是一个搜索框，然后下面是一个ListView用来显示好友列表，最右边有一排英文字母，用来快速定位的，我就不多做介绍了，这种功能如果还不清楚的话，就打开手机微信自己感受一下吧

1.自定义View－屏幕最右边的一排英文字母

public class LetterView extends View {    private OnTouchingLetterChangedListener mOnTouchingLetterChangedListener;    private String[] letters = { "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 TextView tv;    public void setTextView(TextView tv) {        this.tv = tv;    }    public LetterView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    public LetterView(Context context, AttributeSet attrs) {        super(context, attrs);    }    public LetterView(Context context) {        super(context);    }    @Override    protected void onDraw(Canvas canvas) {        // 每一个字母的高度        int letter_height = getHeight() / letters.length;        Paint paint = new Paint();        paint.setAntiAlias(true);        paint.setDither(true);        paint.setColor(Color.BLACK);        paint.setTypeface(Typeface.DEFAULT_BOLD);        paint.setTextAlign(Align.CENTER);        paint.setTextSize(Math.min(getWidth(), getHeight() / 27) - 2);        // drawText方法可以把26个英文字母画到控件上        for (int i = 0, current_height = 0; i < 27; i++) {            current_height += letter_height;            canvas.drawText(letters[i], getWidth() / 2, current_height, paint);        }    }    /** 当手指在该控件上拖动的时候，字母会改变 **/    @Override    public boolean dispatchTouchEvent(MotionEvent event) {        switch (event.getAction()) {        case MotionEvent.ACTION_UP:            tv.setVisibility(View.INVISIBLE);            break;        default:            float y = event.getY();            int position = (int) (y / (getHeight() / 27));            if (position < 27 && position >= 0) {                tv.setText(letters[position]);                tv.setVisibility(View.VISIBLE);                mOnTouchingLetterChangedListener.onTouchingLetterChanged(letters[position].charAt(0));            } else {                tv.setVisibility(View.INVISIBLE);            }            break;        }        return true;    }    public void setOntouchingLetterChangedListener(OnTouchingLetterChangedListener mtOnTouchingLetterChangedListener) {        this.mOnTouchingLetterChangedListener = mtOnTouchingLetterChangedListener;    }    /** 回调接口，手指的拖动，会导致英文字母的改变，并做出响应的处理 **/    public interface OnTouchingLetterChangedListener {        public void onTouchingLetterChanged(char c);    }}

2.顶部的搜索框
搜索框的代码其实很好写，也就是一个EditText，但是需要监听输入状态，每次输入框的内容改变，我们都要进行一次数据的检索，提高用户体验，调用EditText的addTextChangedListener()方法就可以了，业务逻辑自己在里面写

3.显示好友列表的ListView
首先，我们从数据库取出来的好友列表并不一定是我们想要的顺序，所以我们需要先对好友列表进行排序，排序规则：按照首字母进行A~Z排序,如果首字母不是英文字母，是特殊符号或者数字活着其他乱七八糟的什么，那就归类到＃，排序很简单，我的代码是这样的：

Collections.sort(list, new Comparator<Friend>() {            @Override            public int compare(Friend o1, Friend o2) {                String c1 = o1.getFistChar() + "";                String c2 = o2.getFistChar() + "";                if (c1.equals("#")) {                    return 1;                }                if (c2.equals("#")) {                    return -1;                }                return c1.compareTo(c2);            }        });

我已经提前用pinyin4j这个第三方库将每个好友的首字母提取出来了，这类文章网上很多，想知道如何使用的，自己去百度吧，我这里就不多讲了

排序排好了，我们就开始配置adapter了，adapter是继承了BaseAdapter，我的每个item布局是这样的：

再展示一下adapter里面的getView方法

class ViewHolder {        TextView key;        TextView friend_name;        ImageView friend_img;    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        Friend friend = getItem(position);        ViewHolder holder;        if (convertView == null) {            convertView = inflater.inflate(R.layout.friend_list_item, null);            holder = new ViewHolder();            holder.key = (TextView) convertView.findViewById(R.id.key);            holder.friend_img = (ImageView) convertView.findViewById(R.id.friend_img);            holder.friend_name = (TextView) convertView.findViewById(R.id.friend_name);            convertView.setTag(holder);        } else {            holder = (ViewHolder) convertView.getTag();        }        if (getPositionForSection(friend.getFistChar()) == position) {            holder.key.setText(friend.getFistChar() + "");            holder.key.setVisibility(View.VISIBLE);        } else {            holder.key.setVisibility(View.GONE);        }        holder.friend_name.setText(friend.getName());        return convertView;    }    private int getPositionForSection(char c) {        for (int i = 0; i < list.size(); i++) {            if (getItem(i).getFistChar() == c) {                return i;            }        }        return -1;    }

listview中的每个item都对应着一个联系人，判断该联系人的首字母是否是排在该类的第一个，如果是第一个，就显示首字母，如果不是第一个，就不显示首字母。举个例子，如果我有一个list，里面存放着一大堆联系人，并且已经排好顺序了，如｛”阿猫”,”阿狗”,”壁虎”,”Big”,”白天黑夜”,”单身狗”,”淡淡的”,”的”,”冯”,”种子”｝，如果item要显示壁虎的信息，就需要首字母这个控件，如果item要显示Big的信息，就不需要显示首字母这个空间，因为壁虎和Big都属于B类，而且壁虎排在第一个，所以只要第一个显示首字母空间就可以了

好了，这个项目差不多也完了，还有一个挤压的功能没有写出来，因为本人能力有限，等以后技术成熟了再来完善这篇博客吧

0 0