Android使用ExpandableListView实现仿微信通讯录UI

 这几天一直想着写一篇自己的博客，也不知道些什么好，刚好翻到微信通讯录界面，就想着何不写一下呢。话不多说，直接切入主题。先看下效果：

初始页面是这样的：

按下之后是这样的：

这个界面布局比较简单，左边我用的是一个ExpandableListView（为了省事儿引用ExpandableListView的每个group布局），右边是一个自定义的MyView（关键部分）,中间部分用来显示的就是个TextView了，这没什么好说的，好了，直接上代码了：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >
        <ExpandableListView
                android:id="@+id/letter_lv"
                android:background="@color/white"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent"
                />
        <com.ins.practice.app.lianXiRenLiebiao.MyView
                android:id="@+id/letter_my_view"
                android:background="@color/white"
                android:layout_width="80dp"
                android:layout_height="match_parent"/>
    </LinearLayout>

    <TextView
            android:background="@drawable/tv_shape"
            android:id="@+id/letter_show_view"
            android:text="A"
            android:visibility="gone"
            android:textSize="30sp"
            android:gravity="center"
            android:layout_gravity="center"
            android:layout_width="80dp"
            android:layout_height="80dp"
            />


</FrameLayout>

public class MyView extends View{

    public MyView(Context context) {
        super(context);
        initview(context);
    }

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

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initview(context);
    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initview(context);
    }

    /**
     * 右边要显示的字母列表
     */
    private String[] letters = new String[]{"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"};
    /**
     * 中间要显示的TextView
     */
    private TextView showText;
    private Paint paint;
    public void setShowText(TextView showText) {
        this.showText = showText;
    }
    private void initview(Context context){
        paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(5);
        paint.setTextSize(40);
    }
   
    @Override
    protected void onDraw(Canvas canvas) {
        int height = getHeight();
        int blockHeight = height/letters.length;
        for (int i = 0; i < letters.length; i++) {
            int measureText = (int)paint.measureText(letters[i]);
            canvas.drawText(letters[i],getWidth()/2-measureText/2,blockHeight/2+blockHeight*i,paint);
        }

    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int width = getHeight();
        int blockSize = width/letters.length;
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                setBackgroundColor(Color.GRAY);
                int y = (int)event.getY();
                for (int i = 0; i < letters.length; i++) {
                    if(y > i*blockSize && y < (i+1)*blockSize){
                        if(showText != null){
                            showText.setVisibility(VISIBLE);
                            showText.setText(letters[i]);
                            return true;
                        }
                    }

                }
                break;
            case MotionEvent.ACTION_UP:
                setBackgroundColor(Color.WHITE);
                if(showText != null)
                showText.setVisibility(GONE);
                break;
        }
        return true;
    }
}

最后就是Activity了

MyView myView = (MyView) view.findViewById(R.id.letter_my_view);
TextView showView = (TextView) view.findViewById(R.id.letter_show_view);
myView.setShowText(showView);
ExpandableListView listView = (ExpandableListView) view.findViewById(R.id.letter_lv);

ExpandableListView的实现考虑到不是重点，就不在此赘述了，

大体效果实现了，具体细节各位打野大神们可以自己慢慢调试（小弟就不啰嗦了哈）

欢迎牛鬼蛇神们多多指教，轻喷哈...

源码下载地址：https://github.com/wangguoqiangins/Practice.git