自定义View实现通讯录和索引联动，如丝般顺滑

1，右边索引导航我自定义一个View：WordsNavigator.java

package com.txhl.testapp.cus;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import com.txhl.testapp.R;
import com.txhl.testapp.act.MailListActivity;
import com.txhl.testapp.listener.OnWordsChangeListener;
import com.txhl.testapp.utils.ScreenUtils;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

/**
 * Created by chen.yingjie on 2019/4/29
 * description
 */
public class WordsNavigator extends View {
    private int mRealWidth;
    private int mRealHeight;
    private int mWidth;// 画布宽
    private int mHeight;// 画布高
    private int mEachHeight;// 每个字母平均分配到的占位高，宽和画布一样。
    private int mTouchIndex = 0;

    private Paint wordsPaint;// 字母画笔
    private Paint selectedPaint;// 背景圈画笔
    private Rect mRect;
    private OnWordsChangeListener onShowLetterListener;

    private int colorTrans;
    private int colorNormal;
    private int colorChecked;
    private int colorCheckedBg;

    public void setOnShowLetterListener(OnWordsChangeListener onShowLetterListener) {
        this.onShowLetterListener = onShowLetterListener;
    }

    private List<String> letterLists;

    public WordsNavigator(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        letterLists = new ArrayList<>();

        if (getContext() instanceof MailListActivity) {
            MailListActivity activity = (MailListActivity) getContext();
            activity.setOnRecyclerViewScrollListener(new MailListActivity.OnRecyclerViewScrollListener() {
                @Override
                public void onScroll(String firstWords) {
                    int wordsIndex = letterLists.indexOf(firstWords);
                    mTouchIndex = wordsIndex;
                    invalidate();
                }
            });
        }

        colorTrans = getContext().getResources().getColor(R.color.transparent);
        colorNormal = getContext().getResources().getColor(R.color.black);
        colorChecked = getContext().getResources().getColor(R.color.white);
        colorCheckedBg = getContext().getResources().getColor(R.color.red);

        mRect = new Rect();
        wordsPaint = new Paint();
        wordsPaint.setStrokeWidth(0);
        wordsPaint.setAntiAlias(true);
        wordsPaint.setTextSize(ScreenUtils.dip2px(getContext(), 10));

        selectedPaint = new Paint();
        selectedPaint.setStrokeWidth(0);
        wordsPaint.setAntiAlias(true);
        selectedPaint.setStyle(Paint.Style.FILL);
    }

    public void setLetters(List<String> letterLists) {
        this.letterLists = letterLists;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        final int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        final int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        final int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        switch (widthMode) {
            case MeasureSpec.UNSPECIFIED:
            case MeasureSpec.AT_MOST:
                break;
            case MeasureSpec.EXACTLY:
                mRealWidth = widthSize;
                break;
        }
        switch (heightMode) {
            case MeasureSpec.UNSPECIFIED:
            case MeasureSpec.AT_MOST:
                break;
            case MeasureSpec.EXACTLY:
                mRealHeight = heightSize;
                break;
        }
        setMeasuredDimension(mRealWidth, mRealHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(colorTrans);
        mWidth = canvas.getWidth();
        mHeight = canvas.getHeight();
        mEachHeight = mHeight / letterLists.size();

        for (int i = 0; i < letterLists.size(); i++) {
            final String _latter = letterLists.get(i);
            wordsPaint.getTextBounds(_latter, 0, 1, mRect);
            final int letterWidth = mRect.width();
            final int letterHeight = mRect.height();

            if (mTouchIndex == i) {
                wordsPaint.setColor(colorChecked);
                selectedPaint.setColor(colorCheckedBg);
            } else {
                wordsPaint.setColor(colorNormal);
                selectedPaint.setColor(colorTrans);
            }
            // 画选中背景圈，x：画笔宽的一半，即画布水平终点；y：每个字母高乘个数减去字母高的一半；radius：半径为画布宽的三分之一。
            canvas.drawCircle(mWidth / 2, mEachHeight * (i + 1) - letterHeight / 2, mWidth / 3, selectedPaint);
            // 画字母，x，y分别为字母的左上角起点，背景圈的圆心取决于字母的起点。
            canvas.drawText(_latter, mWidth / 2 - letterWidth / 2, (i + 1) * mEachHeight, wordsPaint);
        }
    }

    @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        final int y = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                refreshLetterIndex(y);
                break;
            case MotionEvent.ACTION_MOVE:
                refreshLetterIndex(y);
                break;
        }
        return true;
    }

    private void refreshLetterIndex(int y) {
        //y坐标 / 每个字母高度 = 当前字母下标
        int index = y / mEachHeight;
        if (index > letterLists.size() || index < 0) return;
        if (index != mTouchIndex) {
            mTouchIndex = index;
            //回调选中的字母
            if (onShowLetterListener != null) {
                onShowLetterListener.wordsChange(letterLists.get(mTouchIndex));
            }
            invalidate();
        }
    }
}

这里定义了一个接口为了在手指滑动索引的时候通知activity滚动item。

public interface OnWordsChangeListener {
    void wordsChange(String words);
}

2，用RecyclerView来显示列表数据，给它设置滚动监听，当滚动列表的时候要让索引跟着重绘，这里通过LinearLayoutManager找到第一个可见item的position，查出对于的首字母，通过OnRecyclerViewScrollListener接口给到WordsNavigator，让其重绘。
3，让RecyclerView滚动到指定item，用的是它的LayoutManager的startSmoothScroll方法，需要一个Scroller：

public class TopSmoothScroller extends LinearSmoothScroller {

    public TopSmoothScroller(Context context) {
        super(context);
    }
    @Override
    protected int getHorizontalSnapPreference() {
        return SNAP_TO_START;//具体见源码注释
    }
    @Override
    protected int getVerticalSnapPreference() {
        return SNAP_TO_START;//具体见源码注释
    }
}

4，activity

package com.txhl.testapp.act;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.txhl.testapp.R;
import com.txhl.testapp.cus.TopSmoothScroller;
import com.txhl.testapp.cus.WordsNavigator;
import com.txhl.testapp.cus.widget.SectionListView;
import com.txhl.testapp.listener.OnWordsChangeListener;
import com.txhl.testapp.utils.PinYinUtils;
import com.txhl.testapp.utils.SortUtils;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MailListActivity extends AppCompatActivity {

    private final int CHANGE_WORDS = 1;

    @BindView(R.id.recyclerView)
    RecyclerView recyclerView;
    @BindView(R.id.tvHintWord)
    TextView tvHintWord;
    @BindView(R.id.wordsNavigator)
    WordsNavigator wordsNavigator;

    private String[] names = new String[]{
            "露娜", "李白", "韩信", "太乙真人", "李元芳", "阿珂", "夏侯惇", "关羽", "张飞", "刘备", "貂蝉", "吕布", "王昭君", "武则天",
            "百里守约", "百里玄策", "司马懿", "孙策", "干将莫邪", "裴擒虎", "张良", "诸葛亮", "达摩", "蒙奇", "曹操", "钟馗", "钟无艳",
            "程咬金", "米莱狄", "狄仁杰", "后羿", "大乔", "小乔", "刘邦", "杨玉环", "马可波罗", "狂铁", "苏烈", "赵云", "公孙离", "鬼谷子",
            "成吉思汗", "哪吒", "杨戬", "嬴政", "女娲", "周瑜", "弈星", "扁鹊", "甄姬墨子", "高渐离", "亚瑟", "姜子牙", "宫本武藏",
            "牛魔", "庄周", "蔡文姬", "黄忠", "鲁班七号", "铠", "妲己", "白起", "安其拉", "不知火舞", "芈月", "项羽", "刘禅", "橘右京",
            "兰陵王", "典韦", "元歌", "明世隐", "雅典娜", "娜可露露", "东皇太一", "花木兰", "孙尚香", "孙膑", "虞姬", "孙悟空", "老夫子"
    };

    private List<String> letterLists = new ArrayList<>(Arrays.asList("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 String[] newNames;
    private LinearLayoutManager linearLayoutManager;
    private TopSmoothScroller smoothScroller;
    private MailAdapter mailAdapter;
    private OnRecyclerViewScrollListener onRecyclerViewScrollListener;

    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case CHANGE_WORDS:
                    tvHintWord.setVisibility(View.GONE);
                    break;
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mail_list);
        ButterKnife.bind(this);

        wordsNavigator.setLetters(letterLists);

        wordsNavigator.setOnShowLetterListener(new OnWordsChangeListener() {
            @Override
            public void wordsChange(String words) {
                mHandler.removeMessages(CHANGE_WORDS);
                tvHintWord.setVisibility(View.VISIBLE);
                tvHintWord.setText(words);
                mHandler.sendEmptyMessageDelayed(CHANGE_WORDS, 500);
                scrollToWords(words);
            }
        });

        newNames = SortUtils.sortChar(names);
        linearLayoutManager = new LinearLayoutManager(this);
        smoothScroller = new TopSmoothScroller(this);
        mailAdapter = new MailAdapter();
        recyclerView.setAdapter(mailAdapter);
        recyclerView.setLayoutManager(linearLayoutManager);
        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
                if (layoutManager instanceof LinearLayoutManager) {
                    LinearLayoutManager linearLayoutManager = (LinearLayoutManager) layoutManager;
                    int firstVisibleItemPosition = linearLayoutManager.findFirstVisibleItemPosition();
                    String firstWords = PinYinUtils.getFirstWords(names[firstVisibleItemPosition]);
                    onRecyclerViewScrollListener.onScroll(firstWords);
                }
            }
        });
    }

    private void scrollToWords(String words) {
        for (int i = 0; i < newNames.length; i++) {
            String firstWrods = PinYinUtils.getFirstWords(newNames[i]);
            if (words.equals(firstWrods)) {
                // 找到列表中汉字首字母和按下的字母相同的汉字
                smoothScroller.setTargetPosition(i);
                linearLayoutManager.startSmoothScroll(smoothScroller);
                return;
            }
        }
    }

    class MailAdapter extends RecyclerView.Adapter<MailAdapter.MailHolder> {

        @NonNull
        @Override
        public MailHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
            View view = View.inflate(MailListActivity.this, R.layout.item_mail_list, null);
            return new MailHolder(view);
        }

        @Override
        public void onBindViewHolder(MailHolder viewHolder, int position) {
            String lastFirstChar = "";// 上一个首汉字
            String lastFirstWords = "";// 上一个首汉字的首字母
            String firstChar = "";// 当前首汉字
            String firstWords = "";// 当前首汉字的首字母
            firstChar = newNames[position].substring(0, 1);
            firstWords = PinYinUtils.getFirstWords(firstChar);// 多音字，只取第一个字母。
            if (position > 0) {
                lastFirstChar = newNames[position - 1].substring(0, 1);
                lastFirstWords = PinYinUtils.getFirstWords(lastFirstChar);
            }
            if (firstWords.equals(lastFirstWords)) {
                viewHolder.tvWords.setVisibility(View.GONE);
            } else {
                viewHolder.tvWords.setVisibility(View.VISIBLE);
                viewHolder.tvWords.setText(firstWords);
            }
            viewHolder.tvName.setText(newNames[position]);
        }

        @Override
        public int getItemCount() {
            return newNames == null ? 0 : newNames.length;
        }

        class MailHolder extends RecyclerView.ViewHolder {
            @BindView(R.id.tvWords)
            TextView tvWords;
            @BindView(R.id.tvName)
            TextView tvName;
            @BindView(R.id.tvMsg)
            TextView tvMsg;
            @BindView(R.id.ivPhoto)
            ImageView ivPhoto;

            public MailHolder(@NonNull View itemView) {
                super(itemView);
                ButterKnife.bind(this, itemView);
            }
        }

    }

    public interface OnRecyclerViewScrollListener {
        void onScroll(String firstWords);
    }

    public void setOnRecyclerViewScrollListener(OnRecyclerViewScrollListener onRecyclerViewScrollListener) {
        this.onRecyclerViewScrollListener = onRecyclerViewScrollListener;
    }
}

用pinyin4j.jar来取首字母，可能有多音字，pinyinName是一个类似（比如重 pinyinName=c,z），这里只取第一个：

public static String getFirstWords(String chines) {
        StringBuffer pinyinName = new StringBuffer();
        char[] nameChar = chines.toCharArray();
        HanyuPinyinOutputFormat defaultFormat = new HanyuPinyinOutputFormat();
        defaultFormat.setCaseType(HanyuPinyinCaseType.UPPERCASE);
        defaultFormat.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
        for (int i = 0; i < nameChar.length; i++) {
            if (nameChar[i] > 128) {
                try {
                    String[] strs = PinyinHelper.toHanyuPinyinStringArray(nameChar[i], defaultFormat);
                    if (strs != null) {
                        for (int j=0; j<strs.length; j++) {
                            pinyinName.append(strs[j].substring(0,1));
                            if (j != strs.length - 1) {
                                pinyinName.append(",");
                            }
                        }
                    }
                } catch (BadHanyuPinyinOutputFormatCombination e) {
                    e.printStackTrace();
                }
            } else {
                pinyinName.append(nameChar[i]);
            }
        }
        return pinyinName.toString().substring(0, 1);
    }

排序方式有很多：

 * 按首字母排序
     * @param strs
     * @return
     */
    public static String[] sortChar(String[] strs) {
        Comparator<Object> com = Collator.getInstance(Locale.CHINA);
        List<String> list = Arrays.asList(strs);
        Collections.sort(list, com);
        return list.toArray(new String[0]);
    }

5，布局
activity_mail_list

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".act.MailListActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <com.txhl.testapp.cus.WordsNavigator
        android:id="@+id/wordsNavigator"
        android:layout_marginRight="12dp"
        android:layout_marginTop="100dp"
        android:layout_marginBottom="40dp"
        android:background="@color/transparent"
        android:layout_gravity="right"
        android:layout_width="30dp"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/tvHintWord"
        android:text="a"
        android:background="@color/gray"
        android:visibility="gone"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:layout_gravity="center"
        android:textSize="30dp"
        android:textColor="@color/red"
        android:layout_width="60dp"
        android:layout_height="80dp" />

</FrameLayout>

item_mail_list

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvWords"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:textSize="16sp"
        android:background="@color/bg_focus"
        android:text="A"
        android:textColor="@color/blue" />

    <LinearLayout
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/ivPhoto"
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher_round" />

        <LinearLayout
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tvName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:text=""
                android:textColor="@color/black"
                android:textSize="18sp"/>

            <TextView
                android:id="@+id/tvMsg"
                android:layout_width="wrap_content"
                
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:maxLines="2"
                android:text="我是一个小学生，你不要欺负我，否则我会哭的！"
                android:textColor="@color/gray"
                android:textSize="13sp" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

补充：测试发现字母导航器在滑动的时候不跟手，没有那种如丝般顺滑的手感，经过分析原因是，在手指滑动导航器的时候，会触发recyclerView的onScroll监听，这个监听里又不断的告诉导航器你该重绘了，但是如果我们滑动导航器，这时候是不应该再让RecyclerView告诉导航器重绘的，所以导致导航器不断的重绘导致滑动像大鼻涕一样粘稠。故我们在activity里定义一个boolean值来控制是否需要重绘导航器，而且这个值默认为true，否则第一次进页面不会绘制导航器，导致其看不见。

MailListActivity.java

private boolean needInvalidate = true;// 是否需要重绘字母导航

是手指滑动recyclerView的时候需要重绘导航器
recyclerView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                needInvalidate = true;
                return false;
            }
        });

在导航器滑动导致recyclerView滑动的时候不需要重绘导航器
wordsNavigator.setOnShowLetterListener(new OnWordsChangeListener() {
            @Override
            public void wordsChange(String words) {
                needInvalidate = false;

                mHandler.removeMessages(CHANGE_WORDS);
                tvHintWord.setVisibility(View.VISIBLE);
                tvHintWord.setText(words);
                mHandler.sendEmptyMessageDelayed(CHANGE_WORDS, 500);
                scrollToWords(words);
            }
        });

控制导航器是否重绘
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                if (!needInvalidate) return;
                RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
                if (layoutManager instanceof LinearLayoutManager) {
                    LinearLayoutManager linearLayoutManager = (LinearLayoutManager) layoutManager;
                    int firstVisibleItemPosition = linearLayoutManager.findFirstVisibleItemPosition();
                    String firstWords = PinYinUtils.getFirstWords(names[firstVisibleItemPosition]);
                    onRecyclerViewScrollListener.onScroll(firstWords);
                }
            }
        });