前言:众所周知,目前大多数的社交软件好友列表都是按照一定的规则排序的,我个人比较喜欢根据全拼的首字母进行排序,这样可以方便我们查找。
今天,分享一个利用侧边字符索引栏进行检索的方法:
Step1,好友列表排序
我们假定已经获得了好友列表,只不过从后台获取的数据是乱序的,需要我们手动对其进行排序
在定义User的时候需要定义一个首字母,可以利用pinyin4j实现,具体代码如下:
if (name != null&&!name.equals("")) { pinyin = Cn2Spell.getPinYin(name); // 根据姓名获取拼音 } else { pinyin = Cn2Spell.getPinYin(hxId); } firstLetter = pinyin.substring(0, 1).toUpperCase(); // 获取拼音首字母并转成大写 if (!firstLetter.matches("[A-Z]")) { // 如果不在A-Z中则默认为“#” firstLetter = "#"; }
定义比较规则如下:
@Override public int compareTo(User another) { if (firstLetter.equals("#") && !another.getFirstLetter().equals("#")) { return 1; } else if (!firstLetter.equals("#") && another.getFirstLetter().equals("#")) { return -1; } else { return pinyin.compareToIgnoreCase(another.getPinyin()); } }
Step2,数据渲染
好友列表排序之后,需要利用适配器将其渲染至ListView,具体代码比较简单,这里就不贴出来了
Step3,定义索引栏
定义一个SideBar类继承TextView,并重新处理事件逻辑和重写绘制方法,整个类的代码如下:
public class SideBar extends TextView { private String[] letters = new String[]{"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 textPaint; private Paint bigTextPaint; private Paint scaleTextPaint; private Canvas canvas; private int itemH; private int w; private int h; /** * 普通情况下字体大小 */ float singleTextH; /** * 缩放离原始的宽度 */ private float scaleWidth; /** * 滑动的Y */ private float eventY = 0; /** * 缩放的倍数 */ private int scaleSize = 1; /** * 缩放个数item,即开口大小 */ private int scaleItemCount = 6; private ISideBarSelectCallBack callBack; public SideBar(Context context) { this(context, null); } public SideBar(Context context, AttributeSet attrs) { this(context, attrs, 0); } public SideBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(attrs); } private void init(AttributeSet attrs) { if (attrs != null) { TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.SideBar); scaleSize = ta.getInteger(R.styleable.SideBar_scaleSize, 1); scaleItemCount = ta.getInteger(R.styleable.SideBar_scaleItemCount, 6); scaleWidth = ta.getDimensionPixelSize(R.styleable.SideBar_scaleWidth, dp(100)); ta.recycle(); } textPaint = new Paint(Paint.ANTI_ALIAS_FLAG); textPaint.setColor(getCurrentTextColor()); textPaint.setTextSize(getTextSize()); textPaint.setTextAlign(Paint.Align.CENTER); bigTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG); bigTextPaint.setColor(getCurrentTextColor()); bigTextPaint.setTextSize(getTextSize() * (scaleSize + 3)); bigTextPaint.setTextAlign(Paint.Align.CENTER); scaleTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG); scaleTextPaint.setColor(getCurrentTextColor()); scaleTextPaint.setTextSize(getTextSize() * (scaleSize + 1)); scaleTextPaint.setTextAlign(Paint.Align.CENTER); } public void setDataResource(String[] data) { letters = data; invalidate(); } public void setOnStrSelectCallBack(ISideBarSelectCallBack callBack) { this.callBack = callBack; } /** * 设置字体缩放比例 * * @param scale */ public void setScaleSize(int scale) { scaleSize = scale; invalidate(); } /** * 设置缩放字体的个数,即开口大小 * * @param scaleItemCount */ public void setScaleItemCount(int scaleItemCount) { this.scaleItemCount = scaleItemCount; invalidate(); } private int dp(int px) { final float scale = getContext().getResources().getDisplayMetrics().density; return (int) (px * scale + 0.5f); } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: case MotionEvent.ACTION_MOVE: if (event.getX() > (w - getPaddingRight() - singleTextH - 10)) { eventY = event.getY(); invalidate(); return true; } else { eventY = 0; invalidate(); break; } case MotionEvent.ACTION_CANCEL: eventY = 0; invalidate(); return true; case MotionEvent.ACTION_UP: if (event.getX() > (w - getPaddingRight() - singleTextH - 10)) { eventY = 0; invalidate(); return true; } else break; } return super.onTouchEvent(event); } @Override protected void onDraw(Canvas canvas) { this.canvas = canvas; DrawView(eventY); } private void DrawView(float y) { int currentSelectIndex = -1; if (y != 0) { for (int i = 0; i < letters.length; i++) { float currentItemY = itemH * i; float nextItemY = itemH * (i + 1); if (y >= currentItemY && y < nextItemY) { currentSelectIndex = i; if (callBack != null) { callBack.onSelectStr(currentSelectIndex, letters[i]); } //画大的字母 Paint.FontMetrics fontMetrics = bigTextPaint.getFontMetrics(); float bigTextSize = fontMetrics.descent - fontMetrics.ascent; canvas.drawText(letters[i], w - getPaddingRight() - scaleWidth - bigTextSize, singleTextH + itemH * i, bigTextPaint); } } } drawLetters(y, currentSelectIndex); } private void drawLetters(float y, int index) { //第一次进来没有缩放情况,默认画原图 if (index == -1) { w = getMeasuredWidth(); h = getMeasuredHeight(); itemH = h / letters.length; Paint.FontMetrics fontMetrics = textPaint.getFontMetrics(); singleTextH = fontMetrics.descent - fontMetrics.ascent; for (int i = 0; i < letters.length; i++) { canvas.drawText(letters[i], w - getPaddingRight(), singleTextH + itemH * i, textPaint); } //触摸的时候画缩放图 } else { //遍历所有字母 for (int i = 0; i < letters.length; i++) { //要画的字母的起始Y坐标 float currentItemToDrawY = singleTextH + itemH * i; float centerItemToDrawY; if (index < i) centerItemToDrawY = singleTextH + itemH * (index + scaleItemCount); else centerItemToDrawY = singleTextH + itemH * (index - scaleItemCount); float delta = 1 - Math.abs((y - currentItemToDrawY) / (centerItemToDrawY - currentItemToDrawY)); float maxRightX = w - getPaddingRight(); //如果大于0,表明在y坐标上方 scaleTextPaint.setTextSize(getTextSize() + getTextSize() * delta); float drawX = maxRightX - scaleWidth * delta; //超出边界直接花在边界上 if (drawX > maxRightX) canvas.drawText(letters[i], maxRightX, singleTextH + itemH * i, textPaint); else canvas.drawText(letters[i], drawX, singleTextH + itemH * i, scaleTextPaint); } } } public interface ISideBarSelectCallBack { void onSelectStr(int index, String selectStr); } }
Step4,事件处理
代码如下:
sideBar.setOnStrSelectCallBack(new SideBar.ISideBarSelectCallBack() { @Override public void onSelectStr(int index, String selectStr) { for (int i = 0; i < userList.size(); i++) { if (selectStr.equalsIgnoreCase(userList.get(i).getFirstLetter())) { ltLv.setSelection(i); // 选择到首字母出现的位置 return; } } } });