Android自定义A_Z字母排序ListView，悬停Listview

近期项目有个功能，要开发一个通讯录，什么样的通讯录呢：

1.带字母分组的悬停

2.右边带字母索引的侧边栏

3.与顶部搜索框进行动态变化

4.点击Item可以直接拨电话、复制、发邮件

想想一个通讯录要求咋这么多呢，不过码农还是得干啊，先来一张成品图





先来分析一波UI设计的剧本：

1.顶部一个搜索框，点击后，当listview滑动且输入框无内容时，它的提示图片和文字要显示出来

2.侧边字母表要与listview相呼应，点击某个字母，这个字母要放大加圈显示，且listivew要定位到对应的分组

3.listview在输入框下方，需要做分组悬停，且与侧边字母表对应

1.那就先做吧。先从顶部EditText做起，定义一个类EditTextWithImg

public class EditTextWithImg extends AppCompatEditText {

private Bitmap searchBitmap;

private float txtSize;
private int  txtColor;
private String txt;

private int height;//控件本身的高度
private int width;//控件本身的宽度
private float searchLeft;//搜索图片 距离控件左边的距离
private float searchTop ;//搜索图片距离控件顶部的距离

private Paint txtPaint;

private boolean isInput;//是否是手动开始输入
private boolean isNeedDraw ;//避免重复绘制

private InputListener inputListener;

public void setInputListener(InputListener inputListener) {
this.inputListener = inputListener;
}

/**
* 当listview进行滑动时，要判断下输入框有无内容，没有就恢复初始状态
*/
public void setInput() {
if (TextUtils.isEmpty(getText().toString().trim()) && isNeedDraw) {
setInputMode(false);
if (inputListener != null) {
inputListener.inputOver();
}
}
}

/**
* 设置edittext是否获取焦点
* @param isInput
*/
public void setInputMode(Boolean isInput){
this.isInput = isInput;
isNeedDraw = isInput;
setFocusable(isInput);
setFocusableInTouchMode(isInput);
invalidate();
}

public EditTextWithImg(Context context, AttributeSet attrs) {
super(context, attrs);
initResource(attrs);
initPaint();
}

public EditTextWithImg(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initResource(attrs);
initPaint();
}

private void initResource(AttributeSet attrs) {
//自定义的一些属性 提示文字大小，颜色，内容
TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.etimg);
float density = getResources().getDisplayMetrics().density;//像素密度
txtSize = typedArray.getDimension(R.styleable.etimg_edit_txtsize,11*density+0.5f);
txtColor = typedArray.getColor(R.styleable.etimg_edit_txtcolor,0x000000);
txt = typedArray.getString(R.styleable.etimg_edit_txt);
typedArray.recycle();
}

private void initPaint() {
txtPaint = new Paint();
txtPaint.setTextSize(txtSize);
txtPaint.setColor(txtColor);
txtPaint.setAntiAlias(true);
}

@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
if (searchBitmap == null)
searchBitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.img_search);
}

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
height = getHeight();
width = getWidth();

searchLeft = width / 2 - searchBitmap.getWidth() - dpToPx(1);
searchTop = height / 2 - searchBitmap.getHeight() / 2 + dpToPx(1);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//当没有点击输入框且输入框无内容时，绘制初始状态
if (!isInput && TextUtils.isEmpty(getText().toString().trim())) {
canvas.drawText(txt, width / 2, height / 2 + txtSize / 2, txtPaint);
if (searchBitmap != null) {
canvas.drawBitmap(searchBitmap, searchLeft, searchTop, null);
}
}
}

@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
if (searchBitmap != null && !searchBitmap.isRecycled())
searchBitmap.recycle();
}

@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
//当手开始点击时，获取焦点，清空初始状态
setInputMode(true);
if (inputListener != null) {
inputListener.inputBegin();
}
break;
}
return super.onTouchEvent(event);
}

private int dpToPx(int dp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
}

public interface InputListener{
void inputBegin();
void inputOver();
}
}

具体都写了注释，大概流程是

1.先绘制初始时的状态，即显示提示语（搜索）和搜索图标；

2.当手开始点击进行输入时，让控件获取焦点，去除提示语和搜索图标

3.当Listview进行滑动时，判断下控件里有没有内容，没有的话就恢复初始状态

2.再来定义一个类绘制侧边字母表SideLetterBar

public class SideLetterBar extends View {

private static 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 static LinkedHashMap<String,Integer> indexMap = new LinkedHashMap<>();
static {
indexMap.put("A",0);indexMap.put("B",1);
indexMap.put("C",2);indexMap.put("D",3);
indexMap.put("E",4);indexMap.put("F",5);
indexMap.put("G",6);indexMap.put("H",7);
indexMap.put("I",8);indexMap.put("J",9);
indexMap.put("K",10);indexMap.put("L",11);
indexMap.put("M",12);indexMap.put("N",13);
indexMap.put("O",14);indexMap.put("P",15);
indexMap.put("Q",16);indexMap.put("R",17);
indexMap.put("S",18);indexMap.put("T",19);
indexMap.put("U",20);indexMap.put("V",21);
indexMap.put("W",22);indexMap.put("X",23);
indexMap.put("Y",24);indexMap.put("Z",25);
indexMap.put("#",26);
}

private int choose = -1;//当前选中的字母的位置

private Paint paint = new Paint();
private Paint paintCircle = new Paint();

private OnLetterChangedListener onLetterChangedListener;

private TextView overlay;

private float circleradius ;
private int circleColor ;
private float textSize;
private float textSize_Big;
private int textColor;
private int textChooseColor;

private int height;//控件高度
private int width;//控件宽度
private int singleHeight;//每个字母所占的高度

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

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

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

/**
* 设置悬浮的textview
* @param overlay
*/
public void setOverlay(TextView overlay){
this.overlay = overlay;
}

/**
* listview拖动时候 顶部第一个item定位到对应的字母
* @param letter
*/
public void drawA_ZCircle(String letter){
if (TextUtils.isEmpty(letter)) return;
choose = indexMap.get(letter);
invalidate();
}

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);

height = getHeight();
width = getWidth();
singleHeight = height / index.length;

circleradius = getResources().getDimension(R.dimen.side_letter_bar_clrcle_size);
circleColor = getResources().getColor(R.color.letter_clrclr);

textSize = getResources().getDimension(R.dimen.side_letter_bar_letter_size);
textSize_Big = getResources().getDimension(R.dimen.side_letter_bar_letter_bigsize);
textColor = getResources().getColor(R.color.letter_text);
textChooseColor = getResources().getColor(R.color.white);
}

@SuppressWarnings("deprecation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

for (int i = 0; i < index.length; i++) {
paint.setAntiAlias(true);
if (i == choose) {
//对选中字母进行单独绘制
paint.setColor(textChooseColor);
paint.setTextSize(textSize_Big);
paintCircle.setColor(circleColor);
paintCircle.setAntiAlias(true);
paintCircle.setStyle(Paint.Style.FILL);
canvas.drawCircle(width / 2, singleHeight * (choose + 1) - singleHeight / 3,
circleradius, paintCircle);
} else {
paint.setTextSize(textSize);
paint.setColor(textColor);
}
float xPos = width / 2 - paint.measureText(index[i]) / 2;
float yPos = singleHeight * i + singleHeight;
canvas.drawText(index[i], xPos, yPos, paint);
paint.reset();
}

}

/**
* 因为在Listview上方，所以当点击事件来的时候，直接return ，不进行向下分发
* @param event
* @return
*/
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
final int action = event.getAction();
final float y = event.getY();
final int c = (int) (y / singleHeight);
final int oldChoose = choose;

switch (action) {
case MotionEvent.ACTION_DOWN:
if (oldChoose != c && onLetterChangedListener != null) {
if (c >= 0 && c < index.length) {
changeLetterBar(c);
}
}

break;
case MotionEvent.ACTION_MOVE:
if (oldChoose != c && onLetterChangedListener != null) {
if (c >= 0 && c < index.length) {
changeLetterBar(c);
}
}
break;
case MotionEvent.ACTION_UP:
choose = c;
invalidate();
if (overlay != null){
overlay.setVisibility(GONE);
}
break;
}
return true;
}

private void changeLetterBar(int letterPosition) {
onLetterChangedListener.onLetterChanged(index[letterPosition]);
choose = letterPosition;
invalidate();
//设置悬浮view
if (overlay != null){
overlay.setVisibility(VISIBLE);
overlay.setText(index[letterPosition]);
}
}

public void setOnLetterChangedListener(OnLetterChangedListener onLetterChangedListener) {
this.onLetterChangedListener = onLetterChangedListener;
}

public interface OnLetterChangedListener {
void onLetterChanged(String letter);
}

}

主要流程就是

1.初始没有字母被选中，就在onDraw里把每个字母绘制在侧边栏

2.当手点击某一个字母时，因为字母表在相对布局中是处于listview立体空间中的上方，所以点击事件在dispatchTouchEvent里进行处理，主要是return true不让事件进行分发，然后确定好选中字母的位置，重新在onDraw里进行绘制

3.当listview进行拖动时候，会通过drawA_ZCircle方法通知该view，在indexMap里找到listview的顶部第一个item的首字母的位置，然后再重新绘制

3.接下里就是重写Listview了

public class SortListView extends ListView implements AbsListView.OnScrollListener {

private final String TAG = "SortListView";

private TextView tv_hoverTitle;//顶部悬停view
private EditTextWithImg editText;//顶部搜索view
private SideLetterBar side_letterbar;//侧边字母表

private String lastPy;

private boolean isScroll;//是否滑动listview
private boolean isChackLetterBar;//是否手动选中侧边字母表

public SortListView(Context context) {
super(context);
initListener();
}

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

public SortListView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initListener();
}

private void initListener(){
setOnScrollListener(this);
}

public void setTv_hoverTitle(TextView tv_hoverTitle) {
this.tv_hoverTitle = tv_hoverTitle;
}

public void setEditText(EditTextWithImg editText) {
this.editText = editText;
}

public void setSide_letterbar(final SideLetterBar side_letterbar) {
this.side_letterbar = side_letterbar;
side_letterbar.setOnLetterChangedListener(new SideLetterBar.OnLetterChangedListener() {
@Override
public void onLetterChanged(String letter) {
isChackLetterBar = true;
lastPy = letter;
//设置顶部悬停view
tv_hoverTitle.setVisibility(View.VISIBLE);
tv_hoverTitle.setText(letter);
//设置listview位置
PeopleAdapter peopleAdapter = (PeopleAdapter) getAdapter();
int position = peopleAdapter.getLetterPosition(letter);
setSelection(position);
//然后绘制侧边字母表选中状态
side_letterbar.drawA_ZCircle(letter);
}
});
}

@Override
public boolean onTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN :
//当手开始触摸屏幕时候才进行联动 避免刚初始化就绘制报错
isScroll = true;
break;
case MotionEvent.ACTION_MOVE :
//当手开始滑动屏幕时解除手动选中字母表行为
isChackLetterBar = false;
break;
}
return super.onTouchEvent(ev);
}

@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
//当滑动时，如果edittext没有输入内容 就清空焦点，恢复初始状态
if (scrollState == AbsListView.OnScrollListener.SCROLL_STATE_TOUCH_SCROLL
&& editText != null && TextUtils.isEmpty(editText.getText().toString().trim())) {
editText.setInput();
}
}

@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

if (!isScroll) return;
if (isChackLetterBar) return;
if (side_letterbar == null) return;
if (tv_hoverTitle == null) return;
if (getChildAt(0) == null) return;

People p = (People) getAdapter().getItem(firstVisibleItem);
if (p == null) return;
String py = p.getPinyin();

int top = Math.abs(getChildAt(0).getTop());//选取当前屏幕可见的第一个item距离顶部距离
if (top == 0) {//一开始就设置显示，防止闪烁情况
tv_hoverTitle.setText(py.toUpperCase());
tv_hoverTitle.setVisibility(View.VISIBLE);
} else {
//页面第一次进来后再次滑动，后面的itemview gettop值总不为0
if (!py.equals(lastPy)) {
tv_hoverTitle.setText(py.toUpperCase());
tv_hoverTitle.setVisibility(View.VISIBLE);
}
}

//滑动时判断当前屏幕第一个item是什么字母开头的，然后绘制侧边字母表选中状态
if (!py.equals(lastPy) ) {//避免重复绘制
if (TextUtils.equals("#", py)) {
side_letterbar.drawA_ZCircle(py);
} else {
side_letterbar.drawA_ZCircle(py.toUpperCase());
}
}

lastPy = py;

}
}

listview是需要跟其它两个view进行互动的，主要流程就是

1.在onScrollStateChanged里进行判断，如果开始滑动了，就通知下Edittext状态是否需要变化

2.在onScroll里获取第一个可见的item的对象和view，判断侧边字母表需要标注哪个字母，listview顶部悬停分组该是哪个字母

3.在侧边字母表的的拖动监听里，设置相应的悬停字母，listview的position

这三个写完就结束了，如何进行使用可以到我的Github下载Demo

没有梯子的可以在这个地址下载