微信的通讯录首字母滑动的实现

国际规矩，关门，放截图

                       

左边是我写的，右边是微信的，功能差不多了

先讲使用到的东西

列表使用的是ExpandableListView，上面的字母就是Group来的

SideBar 的实现是使用了一个View，ABCD的排布是第一次初始化的时候使用Cavans画上去的

小方块就是一个在列表上面的TextView

具体情况，请看代码

Side.java

package auggie.demo.sidebardemo.widget;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import auggie.demo.sidebardemo.R;


/**
 * Created With Android Studio
 * User Auggie Liang
 * Date 13-9-3
 * Time 上午9:33
 * 仿微信通许录旁边的bar
 */
public class SideBar extends View {
    public static final String TAG = SideBar.class.getName();
    private String[] letters;
    private OnLetterTouchListener letterTouchListener;

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

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

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

    public void init(Context context){

    }

    /**
     * 每一项的高度
     */
    private float itemHeight = -1;
    private Paint paint;
    private Bitmap letterBitmap;
    @Override
    protected void onDraw(Canvas canvas) {
        if(letters == null){
            return ;
        }
        if(itemHeight == -1){
            itemHeight = getHeight() /letters.length;
        }
        if(paint == null){
            //初始化画笔
            paint = new Paint();
            paint.setTextSize(itemHeight - 4);
            //字体颜色
            paint.setColor(getResources().getColor(R.color.white));
            paint.setFlags(Paint.ANTI_ALIAS_FLAG);

            //创建一张包含所有列表的图
            Canvas mCanvas = new Canvas();
            letterBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(),
                    Bitmap.Config.ARGB_8888);
//            Log.v(TAG, "width,height" + getMeasuredWidth() + ":" + getMeasuredHeight());
            mCanvas.setBitmap(letterBitmap);
            float widthCenter = getMeasuredWidth() / 2.0F;
            //画字符上图片中
            for(int i = 0 ; i < letters.length; i ++){
                mCanvas.drawText(letters[i], widthCenter-paint.measureText(letters[i])/2,
                        itemHeight * i +itemHeight,paint);
            }
        }
        if(letterBitmap != null){//图片不为空就画图
            canvas.drawBitmap(letterBitmap,0,0,paint);
        }
        super.onDraw(canvas);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        if(letterTouchListener == null || letters == null){
            return false;
        }
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                Log.v(TAG, "action down or move");
                int position = (int) (event.getY() / itemHeight + 1);
                if(position >= 0 && position < letters.length){
                    letterTouchListener.onLetterTouch(letters[position],position);
                }
                return true;
            case MotionEvent.ACTION_OUTSIDE:
            case MotionEvent.ACTION_UP:
                Log.v(TAG, "action up");
                letterTouchListener.onActionUp();
                return true;
        }
        return false;
    }

    /**
     * 设置显示在边栏上的字母
     * @param letters
     */
    public void setShowString(String[] letters){
        this.letters = letters;
    }

    /**
     * 设置点击某个字母的时候
     * @param listener
     */
    public void setOnLetterTouchListener (OnLetterTouchListener listener){
        this.letterTouchListener = listener;
    }

    public interface OnLetterTouchListener{

        /**
         * 某个字母被按下的时候
         * @param letter
         * @param position
         */
        public void onLetterTouch(String letter, int position);

        /**
         * 触控手指离开的时候
         */
        public void onActionUp();
    }
}

MainActivity.java

package auggie.demo.sidebardemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ExpandableListView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.HashMap;

import auggie.demo.sidebardemo.widget.SideBar;

public class MainActivity extends Activity {

    ExpandableListView expandableListView;
    TextView tViewShowLetter;
    private static String[] letters;
    private HashMap<String, ArrayList<String>> lettersDivider = new HashMap<String,
            ArrayList<String>>();

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

        //test data;
        letters = getResources().getStringArray(R.array.alphabet);
        //由于是演示就不是用真实数据了
        ArrayList<String> names = new ArrayList<String>();
        names.add("heheh");
        names.add("我了个");
        names.add("并不是我");
        names.add("呵呵");
        names.add("嘻嘻");
        names.add("啦啦");
        names.add("lel");
        names.add("lle");
        names.add("lele");
        names.add("hehe");
        for (String letter : letters) {
            lettersDivider.put(letter, names);
        }

        tViewShowLetter = (TextView) findViewById(R.id.tView_letter);
        expandableListView = (ExpandableListView) findViewById(R.id.expandableListView);
        expandableListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
            @Override
            public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) {
                return true;//屏蔽点击收缩事件
            }
        });
        expandableListView.setAdapter(new MyBaseAdapter());

        SideBar sideBar = ((SideBar) findViewById(R.id.side_bar));
        sideBar.setOnLetterTouchListener(new SideBar.OnLetterTouchListener() {
            @Override
            public void onLetterTouch(String letter, int position) {
                tViewShowLetter.setVisibility(View.VISIBLE);
                tViewShowLetter.setText(letter);
                expandableListView.setSelectedGroup(position);
            }

            @Override
            public void onActionUp() {
                tViewShowLetter.setVisibility(View.GONE);
            }
        });
        sideBar.setShowString(letters);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }


    class MyBaseAdapter extends BaseExpandableListAdapter {

        @Override
        public int getGroupCount() {
            return letters.length;
        }

        @Override
        public int getChildrenCount(int groupPosition) {
            return lettersDivider.get(letters[groupPosition]).size();
        }

        @Override
        public Object getGroup(int groupPosition) {
            return null;
        }

        @Override
        public Object getChild(int groupPosition, int childPosition) {
            return null;
        }

        @Override
        public long getGroupId(int groupPosition) {
            return 0;
        }

        @Override
        public long getChildId(int groupPosition, int childPosition) {
            return 0;
        }

        @Override
        public boolean hasStableIds() {
            return false;
        }

        @Override
        public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
            if (!isExpanded) {
                expandableListView.expandGroup(groupPosition);//展开组
            }
            if (convertView == null) {
                convertView = View.inflate(MainActivity.this, R.layout.adapter_group_view, null);
                convertView.setTag(new GroupViewHolder(convertView));
            }
            GroupViewHolder holder = (GroupViewHolder) convertView.getTag();
            holder.tViewGroupName.setText(letters[groupPosition]);
            return convertView;
        }

        @Override
        public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
            if (convertView == null) {
                convertView = View.inflate(MainActivity.this, R.layout.adapter_child_view, null);
                convertView.setTag(new ChildViewHolder(convertView));
            }
            ChildViewHolder holder = (ChildViewHolder) convertView.getTag();
            holder.tViewChildName.setText(lettersDivider.get(letters[groupPosition]).get(childPosition));
            return convertView;
        }

        @Override
        public boolean isChildSelectable(int groupPosition, int childPosition) {
            return false;
        }

        class GroupViewHolder {
            TextView tViewGroupName;

            public GroupViewHolder(View parent) {
                tViewGroupName = (TextView) parent.findViewById(R.id.tView_group_name);
            }
        }

        class ChildViewHolder {
            TextView tViewChildName;

            public ChildViewHolder(View parent) {
                tViewChildName = (TextView) parent.findViewById(R.id.tView_child_name);
            }
        }
    }


}

主布局acivity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                android:paddingBottom="@dimen/activity_vertical_margin"
                tools:context=".MainActivity">

    <ExpandableListView
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:groupIndicator="@null"
            android:id="@+id/expandableListView"/>

    <auggie.demo.sidebardemo.widget.SideBar
            android:id="@+id/side_bar"
            android:layout_alignParentRight="true"
            android:background="@color/black"
            android:layout_width="14dp"
            android:layout_height="match_parent"/>

    <TextView
            android:id="@+id/tView_letter"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:textSize="35sp"
            android:visibility="gone"
            android:gravity="center"
            tools:text="A"
            android:textColor="@color/white"
            android:background="@color/blue"
            android:layout_centerInParent="true"/>
</RelativeLayout>