快速索引的简单实现

防微信联系人快速索引的简单实现,
首先,要画出26个英文字母,所以,我们就要自定义控件的技术了,这里直接继承View,进行重绘比较简单的实现
1.定义一个自己的类,去继承View, 具体的代码如下:

public class QuickIndexView extends View {
    // 画笔的 类
    private Paint mPaint;

    // 单元格的宽和高
    private int singleWindth;
    private float singleHeight;
    private OnLetterUpdeteListener mListener;
    // 需要用到的26个字母
    private static final 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" };

    public QuickIndexView(Context context) {
        this(context, null);
    }

    public QuickIndexView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public QuickIndexView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        // 设置抗锯齿
        mPaint.setAntiAlias(true);
        // 设置画笔的颜色为 白色
        mPaint.setColor(Color.WHITE);
        // 设置文本的 格式为 加粗的格式
        mPaint.setTypeface(Typeface.DEFAULT_BOLD);
        // 设置显示字体的大小 参数为 float
        mPaint.setTextSize(20);
    }

自定义一个类继承View,把用到的26个字母声明出来 .把前两个构造方法,串起来,还有就是画笔的初始化,在代码里面也都有对应的注释. 还有声明出来的两个int的变量 主要的作用就是去确定每一个字母在屏幕显示的位置,用来绘制的
接下来,就是去重写onDraw()方法去绘制,

@Override
    protected void onDraw(Canvas canvas) {
        for (int i = 0; i < LETTERS.length; i++) {
            String text = LETTERS[i];
            // mPaint.measureText 画笔的方法 可以得到画的文本的 宽度
            // 通过这个方法 得到x轴的 坐标点
            int x = (int) (singleWindth / 2.0f - mPaint.measureText(text) / 2.0f);
            // 获得 文本的所在的 矩形
            Rect bounds = new Rect();
            // 获取文本的高度
            // 参数1 文本的内容,string类型 ,参数2和参数3 是文本内容的长度
            mPaint.getTextBounds(text, 0, text.length(), bounds);
            // 通过矩形的四个参数得到文本的高度
            int textHeight = bounds.height();
            // 得到每个 字母画的y轴的坐标
            int y = (int) (singleHeight / 2.0f + textHeight / 2.0f + i
                    * singleHeight);
            canvas.drawText(text, x, y, mPaint);

        }
    }

这里在刚刚前面声明的两个int类型的变量就用到了,但是我们并没有看到,在哪里赋值,看下 变量在哪里赋值的把,

    // 当view的大小 改变的时候回调的方法
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        singleWindth = getMeasuredWidth();
        int height = getMeasuredHeight();
        singleHeight = height * 1.0f / LETTERS.length;

    }

下面就可以简单的运行下,看下效果了.当然我们要在xml布局中 引用我们的控件的
代码如下

<LinearLayout 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:orientation="horizontal"
    tools:context=".MainActivity" >
      <ListView 
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:id="@+id/lv_main"
        ></ListView>


    <com.qianfeng.quickindex.ui.QuickIndexView
        android:layout_width="40dp"
        android:background="#ff0000"
        android:id="@+id/my_indexView"
        android:layout_height="match_parent"
         />

</LinearLayout>

布局也很简单,下面就可以简单的运行下,看下效果了.效果图

图是我截的,嘻嘻,
下面就是处理我们的点击事件了,其实点击的事件,也很好的处理 ,下面看具体的代码:

private int lastIndex= -1;
    @SuppressLint("NewApi") @Override
    public boolean onTouchEvent(MotionEvent event) {
        int index=  -1;
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            surePostion(index, event);

            break;
        case MotionEvent.ACTION_MOVE:

            surePostion(index, event);

            break;
        case MotionEvent.ACTION_UP:
            index=-1;
            break;
        }
        // 这里返回true 表示持续接收事件的处理 
        return true;
    }
    // 确定当前的位置 跟上一次的位置不相等的时候,才去显示吐司
    private void surePostion( int index,MotionEvent event){
        index =(int) event.getY()/LETTERS.length;
        if(index>0&&index<LETTERS.length){
            if (index!=lastIndex) {

                if (mListener!=null) {
                    mListener.onLetterUpdete(LETTERS[index]);
                }

//              Utils.showToast(getContext(), LETTERS[index]);
            }

        }
         lastIndex=index;
    }

还有就是自定义的一个监听器的实现 看实现

    // 监听 字母被点击的时候回调接口
    public interface OnLetterUpdeteListener{

        // 当字母被点击的时候回调的方法
        void onLetterUpdete(String msg);
    }

    public void setonLetterUpdeteListener(OnLetterUpdeteListener letterListener){
        this.mListener=letterListener;
    }```

 下面就是ListView填充数据还有拼音字母的转化了,话不多说,直接上代码

public class MainActivity extends Activity {
private QuickIndexView mIndexView;
private ListView mlistView;
private List mPersons;

// private MyListViewAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mlistView = (ListView) findViewById(R.id.lv_main);
    mIndexView = (QuickIndexView) findViewById(R.id.my_indexView);
    // 监听 利用接口回调的

    mIndexView.setonLetterUpdeteListener(new OnLetterUpdeteListener() {

        @Override
        public void onLetterUpdete(String msg) {
            Utils.showToast(MainActivity.this, msg);

            for (int i = 0; i < mPersons.size(); i++) {
                Person person = mPersons.get(i);
                String l = person.getPinyin().charAt(0) + "";
                if (TextUtils.equals(l, msg)) {
                    mlistView.setSelection(i);
                    break;

                }

            }
        }
    });

    getDataAndSort();

    mlistView.setAdapter(new MyListViewAdapter(mPersons, this));

}

private void getDataAndSort() {
    mPersons = new ArrayList<Person>();
    for (int i = 0; i < Cheeses.NAMES.length; i++) {
        mPersons.add(new Person(Cheeses.NAMES[i]));
    }

    Collections.sort(mPersons);
}

}

汉子转化的拼音的类

public class PinyinUtils {

/**
 * 根据传入的字符串(包含汉子),得到 字母
 * 
 * @param str
 * @return
 */
public static String getPinyin(String str) {
    // 汉字拼音输出的类型 都封装到这个类上面去了 
    HanyuPinyinOutputFormat format = new HanyuPinyinOutputFormat();
    format.setCaseType(HanyuPinyinCaseType.UPPERCASE);
    format.setToneType(HanyuPinyinToneType.WITHOUT_TONE);

    StringBuilder sb = new StringBuilder();

    char[] charArray = str.toCharArray();
    try {
        for (int i = 0; i < charArray.length; i++) {
            char c = charArray[i];
            // Character.isWhitespace 判断得到的字符串是不是空格 如果是空格跳过
            if (Character.isWhitespace(c)) {
                continue;
            }
            // 如果是特殊的字符, 直接添加到 sb上面去
            if (c >= -127 && c < 128) {
                sb.append(c);
            } else {
                String s = "";

                s = PinyinHelper.toHanyuPinyinStringArray(c, format)[0];
                sb.append(s);

            }
        }
    } catch (BadHanyuPinyinOutputFormatCombination e) {
        e.printStackTrace();

    }

    return sb.toString();
}

}

当然这里要用到一个jar包,下面有连接 自己去下载吧,还有就是ListViewAdapter的实现了

public class MyListViewAdapter extends BaseAdapter {
private List mPersons;
private Context context;

public MyListViewAdapter(List<Person> mPersons, Context context) {
    this.mPersons = mPersons;
    this.context = context;
}

@Override
public int getCount() {
    return mPersons.size();
}

@Override
public Object getItem(int position) {
    return null;
}

@Override
public long getItemId(int position) {
    return 0;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    if (convertView == null) {
        convertView = View.inflate(context, R.layout.list_item, null);



    }
    Viewholder holder = Viewholder.getHolder(convertView);



    Person p=mPersons.get(position);
    String flag=null;
    String currentPinyin=p.getPinyin().charAt(0)+"";

    if (position==0) {
        flag= currentPinyin;
    }else {
        String lastString=mPersons.get(position-1).getPinyin().charAt(0)+"";
        if (!lastString.equals(currentPinyin)) {
            flag=currentPinyin;
        }

    }
    holder.tv_name.setText(p.getName());
    // 如果flag ==null 的时候 不让它 显示 .不等于null 的时候显示 
    holder.tv_title.setVisibility(flag==null? View.GONE:View.VISIBLE);
    holder.tv_title.setText(currentPinyin);
    return convertView;
}

static class Viewholder {
    TextView tv_name;
    TextView tv_title;

    public static Viewholder getHolder(View view) {
        Object tag = view.getTag();

        if (tag != null) {
            return (Viewholder) (tag);
        } else {
            Viewholder viewholder = new Viewholder();
            viewholder.tv_name = (TextView) view.findViewById(R.id.tv_name);
            viewholder.tv_title = (TextView) view
                    .findViewById(R.id.tv_title);
            view.setTag(viewholder);
            return viewholder;

        }

    }
}

}

listView的布局文件

<?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
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:textColor="#ffffff"
        android:layout_height="40dp"
        android:background="#888888" />
    <TextView
        android:id="@+id/tv_name"
        android:layout_width="match_parent"
        android:layout_height="40dp"/>

</LinearLayout>

下面是代码的下载连接
http://download.csdn.net/detail/ma229358084/9249367