Android 實現(xiàn)帶字母索引的側(cè)邊欄功能

更新時間：2017年08月20日 15:09:12 作者：new_one_object

這篇文章主要介紹了Android 實現(xiàn)帶字母索引的側(cè)邊欄功能,需要的朋友可以參考下

之前已經(jīng)用自定義View做出如下這樣一個效果了

這里寫圖片描述

這兩天需要重新拿來使用，發(fā)現(xiàn)效果雖然做出來了，不過思路不太對，就重新參考寫了一個，用法也更為簡單了

首要的自然是需要繼承View繪制出側(cè)邊欄，并向外提供一個監(jiān)聽字母索引變化的方法

/**
 * 作者：葉應(yīng)是葉
 * 時間：2017/8/20 11:38
 * 描述：
 */
public class LetterIndexView extends View {
 public interface OnTouchingLetterChangedListener {
  void onHit(String letter);
  void onCancel();
 }
 private OnTouchingLetterChangedListener touchingLetterChangedListener;
 private Paint paint;
 private boolean hit;
 private final 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 final int DEFAULT_WIDTH;
 public LetterIndexView(Context context) {
  this(context, null);
 }
 public LetterIndexView(Context context, @Nullable AttributeSet attrs) {
  this(context, attrs, 0);
 }
 public LetterIndexView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  paint = new Paint();
  paint.setAntiAlias(true);
  paint.setTextAlign(Paint.Align.CENTER);
  paint.setColor(Color.parseColor("#565656"));
  DEFAULT_WIDTH = dpToPx(context, 24);
 }
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  setMeasuredDimension(getWidthSize(widthMeasureSpec), getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
 }
 private int getWidthSize(int widthMeasureSpec) {
  int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  int widthSize = MeasureSpec.getSize(widthMeasureSpec);
  switch (widthMode) {
   case MeasureSpec.AT_MOST: {
    if (widthSize >= DEFAULT_WIDTH) {
     return DEFAULT_WIDTH;
    } else {
     return widthSize;
    }
   }
   case MeasureSpec.EXACTLY: {
    return widthSize;
   }
   case MeasureSpec.UNSPECIFIED:
   default:
    return DEFAULT_WIDTH;
  }
 }
 @Override
 public boolean dispatchTouchEvent(MotionEvent event) {
  switch (event.getAction()) {
   case MotionEvent.ACTION_DOWN:
    hit = true;
    onHit(event.getY());
    break;
   case MotionEvent.ACTION_MOVE:
    onHit(event.getY());
    break;
   case MotionEvent.ACTION_UP:
   case MotionEvent.ACTION_CANCEL:
    hit = false;
    if (touchingLetterChangedListener != null) {
     touchingLetterChangedListener.onCancel();
    }
    break;
  }
  invalidate();
  return true;
 }
 @Override
 protected void onDraw(Canvas canvas) {
  if (hit) {
   //字母索引條背景色
   canvas.drawColor(Color.parseColor("#bababa"));
  }
  float letterHeight = ((float) getHeight()) / letters.length;
  float width = getWidth();
  float textSize = letterHeight * 5 / 7;
  paint.setTextSize(textSize);
  for (int i = 0; i < letters.length; i++) {
   canvas.drawText(letters[i], width / 2, letterHeight * i + textSize, paint);
  }
 }
 private void onHit(float offset) {
  if (hit && touchingLetterChangedListener != null) {
   int index = (int) (offset / getHeight() * letters.length);
   index = Math.max(index, 0);
   index = Math.min(index, letters.length - 1);
   touchingLetterChangedListener.onHit(letters[index]);
  }
 }
 public void setOnTouchingLetterChangedListener(OnTouchingLetterChangedListener onTouchingLetterChangedListener) {
  this.touchingLetterChangedListener = onTouchingLetterChangedListener;
 }
 private int dpToPx(Context context, float dpValue) {
  float scale = context.getResources().getDisplayMetrics().density;
  return (int) (dpValue * scale + 0.5f);
 }
}

在側(cè)邊欄時，中間會顯示當(dāng)前滑動指向的字母，這其實是一個TextView，在主布局文件中添加，通過IndexControl來控制TextView的可見性，并指示ListView滑動到指定項

/**
 * 作者：葉應(yīng)是葉
 * 時間：2017/8/20 11:39
 * 描述：
 */
public class IndexControl {
 private final ListView listView;
 private final TextView tv_hint;
 private final Map<String, Integer> letterMap;
 public IndexControl(ListView contactsListView, LetterIndexView letterIndexView,
      TextView tv_hint, Map<String, Integer> letterMap) {
  this.listView = contactsListView;
  this.tv_hint = tv_hint;
  this.letterMap = letterMap;
  letterIndexView.setOnTouchingLetterChangedListener(new LetterChangedListener());
 }
 private class LetterChangedListener implements LetterIndexView.OnTouchingLetterChangedListener {
  @Override
  public void onHit(String letter) {
   tv_hint.setVisibility(View.VISIBLE);
   tv_hint.setText(letter);
   int index = -1;
   if ("↑".equals(letter)) {
    index = 0;
   } else if (letterMap.containsKey(letter)) {
    index = letterMap.get(letter);
   }
   if (index < 0) {
    return;
   }
   index += listView.getHeaderViewsCount();
   if (index >= 0 && index < listView.getCount()) {
    listView.setSelectionFromTop(index, 0);
   }
  }
  @Override
  public void onCancel() {
   tv_hint.setVisibility(View.INVISIBLE);
  }
 }
}

這里也提供代碼下載：LetterIndexView

總結(jié)

以上所述是小編給大家介紹的Android 實現(xiàn)帶字母索引的側(cè)邊欄功能，希望對大家有所幫助，如果大家有任何疑問，歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章: