快速索引

如下是快速索引的效果图，是从网上下的实例。如图实现的难点1:是最右侧的索引是用自定义View来实现的，主要通过onDraw的方法将其画出；

难点2:是如何拿到每个名字的首字母用的是pinyin4j-2.5.0.jar  将汉字转化成拼音再去第一个字符；难点3:ListView的adapte不好实现

下图的布局是一个ListView右侧是一个自定义的View，中间是一个TextView点击的时候显示

                              

如下是自定义的View来实现快速索引

package com.demo.sb.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

/**
 * 快速索引 用于根据字母快速定位联系人 也就是界面最右边的那个红色竖条
 * 
 * @author Administrator
 * 
 */
public class QuickIndexBar extends View {

    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" };

    private Paint mPaint;

    private float cellHeight;

    private int cellWidth;

    /**
     * 暴露一个字母的监听
     */
    public interface OnLetterUpdateListener {
        void onLetterUpdate(String letter);
    }

    private OnLetterUpdateListener listener;

    public OnLetterUpdateListener getListener() {
        return listener;
    }

    /**
     * 设置字母更新的监听
     */
    public void setListener(OnLetterUpdateListener listener) {
        this.listener = listener;
    }

    public QuickIndexBar(Context context) {
        this(context, null);
        // TODO Auto-generated constructor stub
    }

    public QuickIndexBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        // TODO Auto-generated constructor stub
    }

    public QuickIndexBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.WHITE);
        mPaint.setTypeface(Typeface.DEFAULT_BOLD);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        // TODO Auto-generated method stub
        super.onSizeChanged(w, h, oldw, oldh);
        cellWidth = getMeasuredWidth();

        int mHeight = getMeasuredHeight();
        cellHeight = mHeight * 1.0f / LETTERS.length;
    }

    /**
     * 绘制自定义最重要的一步重写onDraw方法 画什么，由Canvas处理 怎么画，由Paint处理
     */
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        for (int i = 0; i < LETTERS.length; i++) {
            String text = LETTERS[i];
            // 计算坐标
            int x = (int) (cellWidth / 2.0f - mPaint.measureText(text) / 2.0f);
            // 获取文本的高度
            Rect bounds = new Rect();// 矩形
            mPaint.getTextBounds(text, 0, text.length(), bounds);
            int textHeight = bounds.height();
            int y = (int) (cellHeight / 2.0f + textHeight / 2.0f + i
                    * cellHeight);

            // 根据按下的字母，设置画笔颜色
            mPaint.setColor(touchIndex == i ? Color.GRAY : Color.WHITE);

            // 绘制文本A-Z
            canvas.drawText(text, x, y, mPaint);
        }
    }

    int touchIndex = -1;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
        int index = -1;
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            // 获取当前触摸到的字母索引
            index = (int) (event.getY() / cellHeight);
            if (index >= 0 && index < LETTERS.length) {
                // 判断是否跟上一次触摸到的一样
                if (index != touchIndex) {

                    if (listener != null) {
                        listener.onLetterUpdate(LETTERS[index]);
                    }

                    Log.d("jiejie", "onTouchEvent:  " + LETTERS[index]);

                    touchIndex = index;
                }
            }
            break;
        case MotionEvent.ACTION_MOVE:

            index = (int) (event.getY() / cellHeight);
            if (index >= 0 && index < LETTERS.length) {
                // 判断是否跟上一次触摸到的一样
                if (index != touchIndex) {

                    if (listener != null) {
                        listener.onLetterUpdate(LETTERS[index]);
                    }

                    Log.d("jiejie", "onTouchEvent : " + LETTERS[index]);
                    touchIndex = index;
                }
            }
            break;
        case MotionEvent.ACTION_UP:
            touchIndex = -1;
            break;
        default:
            break;
        }
        // 重新绘制
        invalidate();
        return true;
    }
}

主代码和布局文件

package com.demo.sb.main;

import java.util.ArrayList;
import java.util.Collections;
import com.demo.sb.entity.Cheeses;
import com.demo.sb.entity.HaoHanAdapter;
import com.demo.sb.entity.Person;
import com.demo.sb.utils.DensityUtil;
import com.demo.sb.widget.QuickIndexBar;
import com.demo.sb.widget.QuickIndexBar.OnLetterUpdateListener;
import com.demo.suibian.R;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.text.TextUtils;
import android.view.View;
import android.widget.ListView;
import android.widget.TextView;

/**
 * 快速索引
 * 
 * @author Administrator
 * 
 */
public class Activity_Index extends Activity {
    
    /**ListView用来展示数据的*/
    private ListView mListView;
    
    /**贮存的数据*/
    private ArrayList<Person> persons;
    
    /**展示所点的字母，相当于Toast*/
    private TextView tv_center;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.mactivity_index);
        
        QuickIndexBar bar = (QuickIndexBar) findViewById(R.id.bar);
        bar.setListener(new OnLetterUpdateListener() {

            @Override
            public void onLetterUpdate(String letter) {
                // TODO Auto-generated method stub
                DensityUtil.showToast(Activity_Index.this, letter);
                showLetter(letter);
                // 根据字母定位ListView，找到集合中第一个以letter为拼音首字母的对象，得到索引
                for (int i = 0; i < persons.size(); i++) {
                    Person p = persons.get(i);
                    String l = p.getPinyin().charAt(0) + "";
                    if (TextUtils.equals(letter, l)) {
                        mListView.setSelection(i);
                        break;
                    }
                }
            }
        });

        mListView = (ListView) findViewById(R.id.lv_index);
        persons = new ArrayList<Person>();
        // 填充数据，排序
        fillAndSortData(persons);

        mListView.setAdapter(new HaoHanAdapter(Activity_Index.this, persons));

        tv_center = (TextView) findViewById(R.id.tv_center);

    }

    private Handler mHandler = new Handler();

    /**
     * 显示字母
     * 
     * @param letter
     */
    protected void showLetter(String letter) {
        // TODO Auto-generated method stub
        tv_center.setVisibility(View.VISIBLE);
        tv_center.setText(letter);

        mHandler.removeCallbacksAndMessages(null);
        mHandler.postDelayed(new Runnable() {

            @Override
            public void run() {
                // TODO Auto-generated method stub
                tv_center.setVisibility(View.GONE);
            }
        }, 2000);
    }

    private void fillAndSortData(ArrayList<Person> persons2) {
        // TODO Auto-generated method stub
        // 填充数据
        for (int i = 0; i < Cheeses.NAMES.length; i++) {
            String name = Cheeses.NAMES[i];
            persons2.add(new Person(name));
        }

        // 进行排序
        Collections.sort(persons2);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ListView
        android:id="@+id/lv_index"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.demo.sb.widget.QuickIndexBar
        android:id="@+id/bar"
        android:layout_width="30dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:background="#f00" />

    <TextView
        android:id="@+id/tv_center"
        android:layout_width="160dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:background="@drawable/bg_index"
        android:gravity="center"
        android:text=""
        android:textColor="#fff"
        android:textSize="32sp"
        android:visibility="gone" />

</RelativeLayout>

适配器

package com.demo.sb.entity;

import java.util.ArrayList;

import com.demo.sb.utils.DensityUtil;
import com.demo.suibian.R;

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

public class HaoHanAdapter extends BaseAdapter {

    private Context mContext;
    private ArrayList<Person> persons;

    public HaoHanAdapter(Context mContext, ArrayList<Person> persons) {
        this.mContext = mContext;
        this.persons = persons;
    }

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

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

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

    @Override
    public View getView(final int arg0, View arg1, ViewGroup arg2) {
        // TODO Auto-generated method stub
        ViewHolder holder = null;
        if (arg1 == null) {
            arg1 = View.inflate(mContext, R.layout.item_haohanadapter, null);
            holder = new ViewHolder();
            holder.mIndex = (TextView) arg1.findViewById(R.id.item_tv_index);
            holder.mName = (TextView) arg1.findViewById(R.id.item_tv_name);
            arg1.setTag(holder);
        } else {
            holder = (ViewHolder) arg1.getTag();
        }
        
        final Person p = persons.get(arg0);
        String string = null;
        String currentLetter = p.getPinyin().charAt(0) + "";
        // 根据上一个首字母，决定当前是否显示字母
        if (arg0 == 0) {
            string = currentLetter;
        } else {
            // 上一个人的拼音的首字母
            String preLetter = persons.get(arg0 - 1).getPinyin().charAt(0) + "";
            if (!TextUtils.equals(preLetter, currentLetter)) {
                string = currentLetter;
            }
        }

        // 根据string 是否为空，决定是否显示索引栏
        holder.mIndex.setVisibility(string == null ? View.GONE : View.VISIBLE);
        holder.mIndex.setText(currentLetter);
        holder.mName.setText(p.getName());
        
        holder.mName.setOnClickListener(new View.OnClickListener() {
            
            @Override
            public void onClick(View view) {
                // TODO Auto-generated method stub
                DensityUtil.showToast(mContext, arg0 + "  "+p.getName());
            }
        });
        return arg1;
    }

    static class ViewHolder {
        TextView mIndex;
        TextView mName;
    }
}

实体类

package com.demo.sb.entity;

import com.demo.sb.utils.PinyinUtils;

public class Person implements Comparable<Person>{

    private String name;
    private String pinyin;
    
    public Person(String name){
        super();
        this.name = name;
        this.pinyin = PinyinUtils.getPinyin(name);
    }
    
    
    
    public String getName() {
        return name;
    }



    public void setName(String name) {
        this.name = name;
    }



    public String getPinyin() {
        return pinyin;
    }



    public void setPinyin(String pinyin) {
        this.pinyin = pinyin;
    }



    @Override
    public int compareTo(Person another) {
        // TODO Auto-generated method stub
        return this.pinyin.compareTo(another.getPinyin());
    }

    

}

汉字转成拼音

package com.demo.sb.utils;

import net.sourceforge.pinyin4j.PinyinHelper;
import net.sourceforge.pinyin4j.format.HanyuPinyinCaseType;
import net.sourceforge.pinyin4j.format.HanyuPinyinOutputFormat;
import net.sourceforge.pinyin4j.format.HanyuPinyinToneType;
import net.sourceforge.pinyin4j.format.exception.BadHanyuPinyinOutputFormatCombination;

public class PinyinUtils {
    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();
        for (int i = 0; i < charArray.length; i++) {
            char c = charArray[i];
            // 如果是空格, 跳过
            if (Character.isWhitespace(c)) {
                continue;
            }
            if (c >= -127 && c < 128) {
                // 肯定不是汉字
                sb.append(c);
            } else {
                String s = "";
                try {
                    // 通过char得到拼音集合. 单 -> dan, shan
                    s = PinyinHelper.toHanyuPinyinStringArray(c, format)[0];
                    sb.append(s);
                } catch (BadHanyuPinyinOutputFormatCombination e) {
                    e.printStackTrace();
                    sb.append(s);
                }
            }
        }

        return sb.toString();
    }
}