SideBar就是在ListView右边出现的一个竖条，有A到Z字母索引，通过字母索引可以快速定位到ListView的位置。

先上图 动图就不放了，只放个静态图

SideBar展示图

唔....大致说下思路，我这边sidebar和字母提示框是分开的，SideBar只是右边那一列，中间的字母提示只是一个单独的TextView，两个控件通过接口实现绑定。
另外该篇只讲控件的实现和方法使用，具体的ListView定位position逻辑不讲 有时间会写-。-

attrs属性

严格来讲，SideBar的属性应该包含字母字体前景色、背景色、触摸时背景色、字体大小这些。这里我只暴露了字体的颜色大小两个属性，背景色固定为透明色，触摸时加了蒙版遮罩层。

<declare-styleable name="SideBar">
    <attr name="letterColor" format="color" />
    <attr name="letterSize" format="dimension" />
</declare-styleable>

View实现

1. 上面说过，索引和提示框是分开的，所以需要提供一个方法做绑定
2. 其次是触摸事件响应，由于控件本身并不知道具体要做什么处理，所以需要把接口暴露出去

public class SideBar extends View {

    public final String[] index = { "#",
            "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 = new Paint();

    /**
     * 索引字体颜色
     */
    private int mLetterColor;
    /**
     * 索引字体大小
     */
    private int mLetterSize;

    /**
     * 中间显示文字
     */
    private TextView mTextDialog;

    /**
     * 触摸事件接口
     */
    private OnTouchListener onTouchListener;

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

    /**
     * 初始化属性
     * @param context  上下文
     * @param attrs 属性
     */
    private void initAttrs(Context context, AttributeSet attrs){
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.SideBar);
        mLetterColor = array.getColor(R.styleable.SideBar_letterColor, Color.alpha(R.color.blue_light));
        mLetterSize = array.getDimensionPixelSize(R.styleable.SideBar_letterSize, 30);
        array.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int singleHeight = getMeasuredHeight() / index.length;
        for (int i = 0; i < index.length; i++) {
            paint.setTypeface(Typeface.DEFAULT_BOLD);
            paint.setAntiAlias(true);   //  抗锯齿
            paint.setColor(mLetterColor);
            paint.setTextSize(mLetterSize);
            float xPos = getWidth() / 2 - paint.measureText(index[i]) / 2;
            float yPos = singleHeight * i + singleHeight * 0.6f;
            canvas.drawText(index[i], xPos, yPos, paint);
            paint.reset();// 重置画笔
        }
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        final int action = event.getAction();
        final float y = event.getY();// 点击y坐标
        // 点击y坐标所占总高度的比例*b数组的长度就等于点击b中的个数.
        final int c = (int) (y / getHeight() * index.length);
        switch (action) {
            case MotionEvent.ACTION_DOWN:  //  摁下
            case MotionEvent.ACTION_MOVE:  //  移动
                setBackgroundColor(Color.parseColor("#40000000"));  //  遮罩层
                if (c >= 0 && c < index.length) {
                    if (onTouchListener != null) {
                        onTouchListener.onTouching(index[c].charAt(0));  //  触摸事件接口
                    }
                    if (mTextDialog != null) {  //  显示字母文本提示框
                        mTextDialog.setText(index[c]);
                        mTextDialog.setVisibility(View.VISIBLE);
                    }
                    invalidate();   //请求重新draw()
                }
                break;
            case MotionEvent.ACTION_UP:  //  抬起
                setBackgroundColor(Color.TRANSPARENT);
                invalidate();
                if (mTextDialog != null) {
                    mTextDialog.setVisibility(View.GONE);
                }
                break;
            default:
                break;
        }
        return true;
    }

    /**
     * 绑定LetterDialog
     * @param mTextDialog   文本控件
     */
    public void setTextView(TextView mTextDialog) {
        this.mTextDialog = mTextDialog;
    }

    /**
     * 绑定触摸事件接口
     * @param onTouchListener   触摸事件接口
     */
    public void setOnTouchListener(OnTouchListener onTouchListener) {
        this.onTouchListener = onTouchListener;
    }

    /**
     * 触摸事件
     */
    public interface OnTouchListener {
        void onTouching(char c);
    }

}

使用

布局

    <com.xtao.tlib.view.SideBar
        android:id="@+id/sidebar"
        app:letterColor="@color/blue_light"
        android:layout_width="22dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignParentEnd="true"/>  

Activity

public class SideBarActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView textView = (TextView) findViewById(R.id.textView);
        SideBar sidebar = (SideBar) findViewById(R.id.sidebar);
        sidebar.setTextView(textView);
        sidebar.setOnTouchListener(new SideBar.OnTouchListener() {
            @Override
            public void onTouching(char c) {
                // TODO: 2017/8/4 根据letter定位ListView 
                Log.i("SideBar Touching", String.valueOf(c));
            }
        });

    }
}