Android 實現(xiàn)帶字母索引的側(cè)邊欄功能
之前已經(jīng)用自定義View做出如下這樣一個效果了
這兩天需要重新拿來使用,發(fā)現(xiàn)效果雖然做出來了,不過思路不太對,就重新參考寫了一個,用法也更為簡單了
首要的自然是需要繼承View繪制出側(cè)邊欄,并向外提供一個監(jiān)聽字母索引變化的方法
/** * 作者:葉應是葉 * 時間: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è)邊欄時,中間會顯示當前滑動指向的字母,這其實是一個TextView,在主布局文件中添加,通過IndexControl來控制TextView的可見性,并指示ListView滑動到指定項
/** * 作者:葉應是葉 * 時間: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
總結
以上所述是小編給大家介紹的Android 實現(xiàn)帶字母索引的側(cè)邊欄功能,希望對大家有所幫助,如果大家有任何疑問,歡迎給我留言,小編會及時回復大家的!
相關文章
使用Jetpack Compose實現(xiàn)翻轉(zhuǎn)卡片效果流程詳解
Jetpack Compose 是一款基于 Kotlin 的聲明式 UI 工具包,可以方便地創(chuàng)建漂亮的用戶界面。使用 Compose 的動畫 API 和可繪制 API,可以輕松實現(xiàn)翻轉(zhuǎn)卡片效果。通過設置旋轉(zhuǎn)角度和透明度等屬性,可以使卡片沿著 Y 軸翻轉(zhuǎn),并實現(xiàn)翻頁效果2023-05-05Android Studio中CodeStyle模板的配置方式
這篇文章主要介紹了Android Studio中CodeStyle模板的配置方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03android listview 水平滾動和垂直滾動的小例子
android listview 水平滾動和垂直滾動的小例子,需要的朋友可以參考一下2013-05-05利用Kotlin的協(xié)程實現(xiàn)簡單的異步加載詳解
這篇文章主要給大家介紹了關于利用Kotlin的協(xié)程實現(xiàn)簡單的異步加載的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。2018-03-03Android 通過TCP協(xié)議上傳指定目錄文件的方法
這篇文章主要介紹了Android 通過TCP協(xié)議上傳指定目錄文件的方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03