源碼地址:https://github.com/maoqitian/MyQuickIndexBar

• 自定義控件第三篇筆記。
  平時使用微信查找聯系人的時候，我們可以根據想要找的聯系人的名字首字母快速找到該聯系人，這個快速檢索的控件有不少地方使用，比如手機原生的聯系人應用中也有這個功能。今天我們就來手動實現一下這個自定義控件。
  按照慣例，首先來一發效果圖：

navigation.gif

• 要實現這個控件，首先我們可以實現右邊的導航欄MyQuickIndexBar；有些人看到這個導航欄可能會想到繼承ViewGroup，然后再將字母作為子View去擺放，其實大可不必，這個導航欄的目的就是你點中那個字母，控件就可以根據你點中的字母自動找到對應聯系人，也就是調用者需要知道導航控件點中的是哪個字母，這樣其實就可以集成View來實現這個自定義控件，我們只需要將每個字母在View上等分繪制出來就可以了；具體思想：

• 1. 將26字母定義在String數組中，循環遍歷將每個字母繪制在View中，繪制的坐標X應該等于控件寬度一半，而y坐標等于控件格子高度一半+文本字母高度的一半+格子所處位置*每個格子的高度（相當于把View等分成26格子，讓后在每個格子中間繪制字母）

• 2.記下來是處理觸摸事件，手指按下（ACTION_DOWN）和手指滑動（ACTION_MOVE）獲取此時的Y坐標，除與每個格子的高度的余數，就是手指所處字母的索引，記錄下這個索引，并將這個索引對應的字母通過
  接口回調的方式傳告訴調用者，并在手指抬起的時候將之前記錄的索引清除，防止下次點擊重復位置沒有反應，并且只要按下則調用invalidate();方法引起界面重繪使按下的字母顏色變化；下面上代碼：

/**
 * Created by 毛麒添 on 2017/2/26 0026.
 * 觸摸View的時候，能快速定位獲取觸摸的是哪個字母
 */

public class MyQuickIndexBar extends View {

    private String[] indexArr = { "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 paint;
    private int width;//控件寬度

    private float latticeHeight;//將控件等分每個部分的高度

    private int lastIndex=-1;//上一次點擊字母記錄的索引

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

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

    public MyQuickIndexBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        //初始化畫筆參數
        paint=new Paint(Paint.ANTI_ALIAS_FLAG);//設置抗鋸齒
        paint.setTextSize(40);
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setColor(Color.GRAY);
    }

    //初始化寬高
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = getMeasuredWidth();
        latticeHeight=getMeasuredHeight()*1f/indexArr.length;
    }

    //繪制
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < indexArr.length; i++) {
            float x=width/2;
            //每一個格子字母的擺放位置 控件格子高度一半+文本字母高度的一半+格子所處位置*每個格子的高度
            float y=latticeHeight/2+getTextHeight(indexArr[i])/2+i*latticeHeight;
            //如果索引相等，則改變字體的顏色
            paint.setColor(lastIndex==i?Color.BLACK:Color.GRAY);
            canvas.drawText(indexArr[i],x,y,paint);
        }
    }
    //觸摸監聽，需要有自己的處理，返回true
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                //獲取按下的位置
                float y = event.getY();
                //獲取按下位置與每個格子高度的余數，這個余數就是每個字母的索引
                int index= (int) (y/latticeHeight);
                if(lastIndex!=index){
                    //Log.w("毛麒添",indexArr[index]);
                    if(index>=0 && index<indexArr.length){//索引安全性檢查
                        if(listener!=null){
                            listener.onTouchIndex(indexArr[index]);
                        }
                    }
                }
                lastIndex=index;
                break;
            case MotionEvent.ACTION_UP：
                lastIndex=-1;
                break;
        }
        //引發重繪
        invalidate();
        return true;
    }

    /**
     * 獲取文本的高度
     * @param text 需要獲取高度的文本
     * @return 文本的高度
     */
    private int getTextHeight(String text) {
        Rect rect=new Rect();
        paint.getTextBounds(text,0,text.length(),rect);
        return rect.height();
    }


    //回調監聽，把點擊的字母暴露給使用者

    private onTouchIndexListener listener;
    public void setOnTouchIndexListener(onTouchIndexListener listener){
         this.listener=listener;
    }
    public interface onTouchIndexListener{
        void onTouchIndex(String text);
    }
}

• 這時候我們可以給ListView填充一些假數據，并設置每個ListView的item由兩個TextView組成，一個是聯系人名字，一個是首字母標題，在下面的步驟中當我們就可以做根據是否是相同首字母的聯系人來讓首字母標題是否隱藏的處理；ListView數據適配器代碼：

**
 * Created by 毛麒添 on 2017/2/27 0027.
 * 聯系人數據適配器
 */

public class MyAdapter extends BaseAdapter {
    private ArrayList<Contacts> contactsArrayList=new ArrayList<Contacts>();
    private Context context;
    public MyAdapter(Context context, ArrayList<Contacts> contactsArrayList){
        this.context=context;
        this.contactsArrayList=contactsArrayList;
    }
    @Override
    public int getCount() {
        return contactsArrayList.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.layout_listview_item,null);
        }
        ViewHolder viewHolder=ViewHolder.getHolder(convertView);
        Contacts contacts = contactsArrayList.get(position);
        viewHolder.tv_name.setText(contacts.getName());
        //當前漢字的首字母
        String currentWord=contacts.getPinYin().charAt(0)+"";
        if(position>0){
            //獲取上一個漢字的首字母
            String lastcurrentWord = contactsArrayList.get(position - 1).getPinYin().charAt(0) + "";
            if(lastcurrentWord.equals(currentWord)){
                //如果首字母相同，將其頭部隱藏
                viewHolder.tv_index.setVisibility(View.GONE);
            }else {//不一樣則顯示(ListView的復用，所以需要設置顯示)
                viewHolder.tv_index.setVisibility(View.VISIBLE);
                viewHolder.tv_index.setText(currentWord);
            }
        }else {
            viewHolder.tv_index.setVisibility(View.VISIBLE);
            viewHolder.tv_index.setText(currentWord);
        }

        return convertView;
    }

    static class ViewHolder{
        TextView tv_index;
        TextView tv_name;
        //重新封裝ViewHolder
        public ViewHolder(View convertView){
            tv_index= (TextView) convertView.findViewById(R.id.tv_index);
            tv_name= (TextView) convertView.findViewById(R.id.tv_name);
        }
        public static ViewHolder getHolder(View convertView){
            ViewHolder viewHolder = (ViewHolder) convertView.getTag();
            if(viewHolder==null){
               viewHolder=new ViewHolder(convertView);
                convertView.setTag(viewHolder);
            }
            return viewHolder;
        }
    }
}

• 接下來就是處理漢字獲取拼音，這里需要用到類庫pinyin4j.jar，我們可以把這個處理寫成一個工具類PinYinUtil，具體思路為：
• 首先判斷傳入的字符型聯系人名字是否為空，不為空則將其轉換成字節數組（由于pinyin4j.jar只能將單個漢字的轉換成對應的拼音，所有轉換成字節數組），
• 一個漢字占2個字節，一字節8位，范圍-128~~127， 大于127則可能是漢字，如果轉換成功，則將去返回的拼音字母的第一個作為工具類返回值，而如果是其他字符而不是漢字也需要將其拼接起來返回，下面上代碼：

/**
 * Created by 毛麒添 on 2017/3/1 0001.
 * 漢字轉換成英文字母工具類
 */

public class PinYinUtil {
    /**
     * 漢字轉換成英文字母工具類
     * @param chinese 需要轉換的漢字
     * @return 漢字的大寫拼音字母
     */
    public static String getPinYin(String chinese){

        String pinYin="";

        //設置轉換的格式
        HanyuPinyinOutputFormat format=new HanyuPinyinOutputFormat();
        format.setCaseType(HanyuPinyinCaseType.UPPERCASE);//大寫字母
        format.setToneType(HanyuPinyinToneType.WITHOUT_TONE);//沒有聲調

        //如果傳入的漢字為空，返回null
        if(TextUtils.isEmpty(chinese))return null;
        //轉化拼音的類庫只能轉化單個漢字，所以需要將傳入的漢字轉換成字節數組
        char[] charArray = chinese.toCharArray();
        for (int i = 0; i <charArray.length ; i++) {
            //過濾空格
            if(Character.isWhitespace(charArray[i]))continue;
            //一個漢字占兩個字節，一字節8位，范圍-128~~127
            if(charArray[i]>127){//可能是漢字
                try {
                    String[] pinYinArray = PinyinHelper.toHanyuPinyinStringArray(charArray[i], format);
                    if(pinYinArray!=null){//轉換成功
                        //返回數組是因為有可能該漢字是多音字，但是不管是否多音字都只取第一個
                        pinYin+=pinYinArray[0];
                    }else {
                        //轉化失敗，不做操作，忽略
                    }
                } catch (BadHanyuPinyinOutputFormatCombination badHanyuPinyinOutputFormatCombination) {
                    badHanyuPinyinOutputFormatCombination.printStackTrace();
                    //轉化失敗則將其忽略
                }

            }else {//不是漢字，不需要轉換將其和返回值拼接在一起
               pinYin+=charArray[i];
            }
        }
        return pinYin;
    }
}

• 最后，給存放聯系人的集合排序，漢字轉換成拼音處理好則直接獲取他的首字母與手指點擊的字母相比較后將ListView所對應的Item設置到頂部就可以了，并將手指鎖點擊的字母用TextView顯示在正中央，背景加入圓角，并給TextView的顯示加入一些縮放動畫效果，顯得更加高端；布局跟結點為RelativeLayout，比較簡單，就不貼了（詳情可以查看源碼）,下面上MainActivity代碼：

public class MainActivity extends AppCompatActivity {

    private MyQuickIndexBar my_quick_index_bar;

    private ListView listView;
    private TextView tv_text;
    private ArrayList<Contacts> contactsArrayList=new ArrayList<Contacts>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();

        //初始化ListView數據
        fillList();
        //對通訊錄數據進行排序
        Collections.sort(contactsArrayList);
        //設置數據
        listView.setAdapter(new MyAdapter(this,contactsArrayList));

        my_quick_index_bar.setOnTouchIndexListener(new MyQuickIndexBar.onTouchIndexListener() {
            @Override
            public void onTouchIndex(String text) {
                //根據點擊的字母與遍歷集合獲取的首字母相比較
                for (int i = 0; i < contactsArrayList.size(); i++) {
                    String firstWord = contactsArrayList.get(i).getPinYin().charAt(0) + "";
                    if(text.equals(firstWord)){//首字母相同
                       listView.setSelection(i);
                        break;//只要找到就直接顯示就可以
                    }
                }
                //顯示當前觸摸的字母
                showCurrentWord(text);
            }
        });
        //一開始隱藏TextView控件
        ViewHelper.setScaleX(tv_text,0);
        ViewHelper.setScaleY(tv_text,0);
    }
    private Handler handler=new Handler();
    private boolean isScale=false;//動畫是否縮放
    //顯示當前觸摸的字母
    private void showCurrentWord(String text) {
         tv_text.setText(text);
        if(!isScale){
            isScale=true;
            ViewPropertyAnimator.animate(tv_text).scaleX(1f).setInterpolator(new OvershootInterpolator()).setDuration(350).start();
            ViewPropertyAnimator.animate(tv_text).scaleY(1f).setInterpolator(new OvershootInterpolator()).setDuration(350).start();
        }

        //執行延遲前清除所有消息
        handler.removeCallbacksAndMessages(null);
        //執行延遲縮放動畫，讓TextView縮小至消失
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                ViewPropertyAnimator.animate(tv_text).scaleX(0f).setInterpolator(new OvershootInterpolator()).setDuration(350).start();
                ViewPropertyAnimator.animate(tv_text).scaleY(0f).setInterpolator(new OvershootInterpolator()).setDuration(350).start();
                isScale=false;
            }
        },1000);
    }

    private void initView(){
        my_quick_index_bar= (MyQuickIndexBar) findViewById(R.id.my_quick_index_bar);
        listView= (ListView) findViewById(R.id.listview);
        tv_text= (TextView) findViewById(R.id.tv_text);
    }

    private void fillList() {
        // 虛擬數據
        contactsArrayList.add(new Contacts("路飛"));
        contactsArrayList.add(new Contacts("路飛1"));
        contactsArrayList.add(new Contacts("索隆"));
        .....
    }
}

好了，到此快速導航控件已經完成。溫故而知新，這應該就是學習筆記存在的意義吧。如果有錯的地方，請大家指出，讓我們一起共同進步！