Android仿微信通讯录列表侧边栏效果-创新互联

先看Android仿微信通讯录列表侧边栏效果图

这是比较常见的效果了吧

列表根据首字符的拼音字母来排序，且可以通过侧边栏的字母索引来进行定位。

实现这样一个效果并不难，只要自定义一个索引View，然后引入一个可以对汉字进行拼音解析的jar包——pinyin4j-2.5.0即可

首先，先来定义侧边栏控件View，只要直接画出来即可。

字母选中项会变为红色，且滑动时背景会变色，此时SideBar并不包含居中的提示文本

public class SideBar extends View {

  private Paint paint = new Paint();

  private int choose = -1;

  private boolean showBackground;

  public static String[] letters = {"#", "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 OnChooseLetterChangedListener onChooseLetterChangedListener;

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

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

  public SideBar(Context context) {
    super(context);
  }

  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (showBackground) {
      canvas.drawColor(Color.parseColor("#D9D9D9"));
    }
    int height = getHeight();
    int width = getWidth();
    //平均每个字母占的高度
    int singleHeight = height / letters.length;
    for (int i = 0; i < letters.length; i++) {
      paint.setColor(Color.BLACK);
      paint.setAntiAlias(true);
      paint.setTextSize(25);
      if (i == choose) {
        paint.setColor(Color.parseColor("#FF2828"));
        paint.setFakeBoldText(true);
      }
      float x = width / 2 - paint.measureText(letters[i]) / 2;
      float y = singleHeight * i + singleHeight;
      canvas.drawText(letters[i], x, y, paint);
      paint.reset();
    }
  }

  @Override
  public boolean dispatchTouchEvent(MotionEvent event) {
    int action = event.getAction();
    float y = event.getY();
    int oldChoose = choose;
    int c = (int) (y / getHeight() * letters.length);
    switch (action) {
      case MotionEvent.ACTION_DOWN:
        showBackground = true;
        if (oldChoose != c && onChooseLetterChangedListener != null) {
          if (c > -1 && c < letters.length) {
            onChooseLetterChangedListener.onChooseLetter(letters[c]);
            choose = c;
            invalidate();
          }
        }
        break;
      case MotionEvent.ACTION_MOVE:
        if (oldChoose != c && onChooseLetterChangedListener != null) {
          if (c > -1 && c < letters.length) {
            onChooseLetterChangedListener.onChooseLetter(letters[c]);
            choose = c;
            invalidate();
          }
        }
        break;
      case MotionEvent.ACTION_UP:
        showBackground = false;
        choose = -1;
        if (onChooseLetterChangedListener != null) {
          onChooseLetterChangedListener.onNoChooseLetter();
        }
        invalidate();
        break;
    }
    return true;
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    return super.onTouchEvent(event);
  }

  public void setOnTouchingLetterChangedListener(OnChooseLetterChangedListener onChooseLetterChangedListener) {
    this.onChooseLetterChangedListener = onChooseLetterChangedListener;
  }

  public interface OnChooseLetterChangedListener {

    void onChooseLetter(String s);

    void onNoChooseLetter();

  }

}