[android]（仿联系人）带分类、分类顶部保留替换ListView

效果图

思路分析布局分析

a）右侧的索引，称为LetterList

b）中间城市ListView（占了整块屏幕）

右侧字母索引

右侧字母索引。是继承View视图，画出来的，宽度和在父布局位置在xml文件中写死了。

a）先获取字母的数组，获取这个数组的长度lenght。

b）获取整块屏幕的高度height。通过singleHeight=height/lenght计算到每个字母在屏幕上所占高度。

c）然后开始画字母，加判断，如果没有点击，就默认画成比如灰色，如果有点击，则画成白色。颜色的分别，是Paint.setColor(“颜色”)，下面会有具体代码。先看继续思路。

d）确定Paint的颜色之后，就开始画字母。获取画的坐标，是相对于这个布局的坐标，不是整个屏幕的，因为onDraw()方法传入了一个canvas。

x轴方向坐标，应该保证画出的字母在canvas中间。

xPos = width / 2 – paint.measureText(b[i]) / 2 其中measureText方法是获取字母的宽度。那笔稍微比划一下就明白这个式子的意思了。

singleHeight

y轴方向，应该保证均匀递增。singleHeight是每个字母的高度。

yPos = singleHeight * i + singleHeight;

调用方法：

canvas.drawText(b[i], xPos, yPos, paint);就绘制成了。

e）事件分发。当点击时，拦截下来，不让下面的城市ListView响应。点击更改透明度，使效果好一点。

获取手点击的y坐标，通过下面这个式子确定点击的是哪个位置，由于字母的位置排序是确定的，所以就可以得到点击的是哪个字母：

int c = (int) (y / getHeight() *letters.length);

然后把位置传到MainActivity中，通过字母get到字母在城市listview中的位置，然后使ListView.setSelection(position)，就实现了快速索引。

继续看思路。

中间城市列表

这个是一个重写ListView的东西，并且回调了一个接口，用于增加顶部黏贴视图。

如果传入的mHeaderView不为空，那么给他设置在顶部的位置。

下面展示一张图，是我注释掉这个ListView的adapter里面一句判断是否隐藏的，我让他永久显示，就是这种效果，便于理解。可以看到，每个item都是有字母和城市组成的，只不过通过一定计算，让字母显示或者隐藏了。

通过判断下一个显示的字母（可以这么理解，但是是通过item的数量和位置计算出来的）与顶部的距离来决定，顶部视图是隐藏，滑动，还是显示。好了，上代码。

城市数据和字母数据，是存到本地数据库里，这个数据可以由你更改，添加，但是列表数据要排序。

代码绘制右侧快速索引public class BladeView extends View {private OnItemClickListener mOnItemClickListener;String[] b = { "#", "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" };int choose = -1;Paint paint = new Paint();boolean showBkg = false;private PopupWindow mPopupWindow;private TextView mPopupText;private Handler handler = new Handler();public BladeView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}public BladeView(Context context, AttributeSet attrs) {super(context, attrs);}public BladeView(Context context) {super(context);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);if (showBkg) {canvas.drawColor(Color.parseColor("#AAAAAA"));}int height = getHeight();int width = getWidth();int singleHeight = height / b.length;for (int i = 0; i < b.length; i++) {paint.setColor(Color.parseColor("#ff2f2f2f"));//paint.setTypeface(Typeface.DEFAULT_BOLD);//加粗paint.setTextSize(getResources().getDimensionPixelSize(R.dimen.bladeview_fontsize));//设置字体的大小paint.setFakeBoldText(true);paint.setAntiAlias(true);if (i == choose) {paint.setColor(Color.parseColor("#3399ff"));}//确定绘制的位置float xPos = width / 2 – paint.measureText(b[i]) / 2;float yPos = singleHeight * i + singleHeight;canvas.drawText(b[i], xPos, yPos, paint);paint.reset();}}@Overridepublic boolean dispatchTouchEvent(MotionEvent event) {final int action = event.getAction();final float y = event.getY();final int oldChoose = choose;final int c = (int) (y / getHeight() * b.length);switch (action) {case MotionEvent.ACTION_DOWN:showBkg = true;if (oldChoose != c) {if (c >= 0 && c < b.length) {//让第一个字母响应点击事件performItemClicked(c);choose = c;invalidate();}}break;case MotionEvent.ACTION_MOVE:if (oldChoose != c) {if (c >= 0 && c < b.length) {//让第一个字母响应点击事件performItemClicked(c);choose = c;invalidate();}}break;case MotionEvent.ACTION_UP:showBkg = false;choose = -1;dismissPopup();invalidate();break;}return true;}//滑动或点击的时候，在屏幕中间弹出一个提示private void showPopup(int item) {if (mPopupWindow == null) {handler.removeCallbacks(dismissRunnable);mPopupText = new TextView(getContext());mPopupText.setBackgroundColor(Color.GRAY);mPopupText.setTextColor(Color.WHITE);mPopupText.setTextSize(getResources().getDimensionPixelSize(R.dimen.bladeview_popup_fontsize));mPopupText.setGravity(Gravity.CENTER_HORIZONTAL| Gravity.CENTER_VERTICAL);int height = getResources().getDimensionPixelSize(R.dimen.bladeview_popup_height);mPopupWindow = new PopupWindow(mPopupText, height, height);}String text = "";if (item == 0) {text = "#";} else {text = Character.toString((char) ('A' + item – 1));}mPopupText.setText(text);if (mPopupWindow.isShowing()) {mPopupWindow.update();} else {mPopupWindow.showAtLocation(getRootView(),Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL, 0, 0);}}private void dismissPopup() {handler.postDelayed(dismissRunnable, 800);}Runnable dismissRunnable = new Runnable() {@Overridepublic void run() {if (mPopupWindow != null) {mPopupWindow.dismiss();}}};public boolean onTouchEvent(MotionEvent event) {return super.onTouchEvent(event);}public void setOnItemClickListener(OnItemClickListener listener) {mOnItemClickListener = listener;}private void performItemClicked(int item) {if (mOnItemClickListener != null) {mOnItemClickListener.onItemClick(b[item]);showPopup(item);}}public interface OnItemClickListener {void onItemClick(String s);}}绘制中间的ListView，GitHub上的，这部分基本是写死的，理解。<span style="font-size:18px;">public class PinnedHeaderListView extends ListView {public interface PinnedHeaderAdapter {public static final int PINNED_HEADER_GONE = 0;public static final int PINNED_HEADER_VISIBLE = 1;public static final int PINNED_HEADER_PUSHED_UP = 2;int getPinnedHeaderState(int position);//回调，绘制顶部视图void configurePinnedHeader(View header, int position, int alpha);}private static final int MAX_ALPHA = 255;private PinnedHeaderAdapter mAdapter;private View mHeaderView;private boolean mHeaderViewVisible;private int mHeaderViewWidth;private int mHeaderViewHeight;public PinnedHeaderListView(Context context) {super(context);}public PinnedHeaderListView(Context context, AttributeSet attrs) {super(context, attrs);}public PinnedHeaderListView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}public void setPinnedHeaderView(View view) {mHeaderView = view;if (mHeaderView != null) {setFadingEdgeLength(0);}requestLayout();}@Overridepublic void setAdapter(ListAdapter adapter) {super.setAdapter(adapter);mAdapter = (PinnedHeaderAdapter)adapter;}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);if (mHeaderView != null) {measureChild(mHeaderView, widthMeasureSpec, heightMeasureSpec);mHeaderViewWidth = mHeaderView.getMeasuredWidth();mHeaderViewHeight = mHeaderView.getMeasuredHeight();}}@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) {super.onLayout(changed, left, top, right, bottom);if (mHeaderView != null) {mHeaderView.layout(0, 0, mHeaderViewWidth, mHeaderViewHeight);configureHeaderView(getFirstVisiblePosition());}}public void configureHeaderView(int position) {if (mHeaderView == null) {return;}int state = mAdapter.getPinnedHeaderState(position);switch (state) {case PinnedHeaderAdapter.PINNED_HEADER_GONE: {mHeaderViewVisible = false;break;}case PinnedHeaderAdapter.PINNED_HEADER_VISIBLE: {mAdapter.configurePinnedHeader(mHeaderView, position, MAX_ALPHA);if (mHeaderView.getTop() != 0) {mHeaderView.layout(0, 0, mHeaderViewWidth, mHeaderViewHeight);}mHeaderViewVisible = true;break;}case PinnedHeaderAdapter.PINNED_HEADER_PUSHED_UP: {View firstView = getChildAt(0);int bottom = firstView.getBottom();int itemHeight = firstView.getHeight();int headerHeight = mHeaderView.getHeight();int y;int alpha;if (bottom < headerHeight) {y = (bottom – headerHeight);alpha = MAX_ALPHA * (headerHeight + y) / headerHeight;} else {y = 0;alpha = MAX_ALPHA;}mAdapter.configurePinnedHeader(mHeaderView, position, alpha);if (mHeaderView.getTop() != y) {mHeaderView.layout(0, y, mHeaderViewWidth, mHeaderViewHeight + y);}//如果第一个item距离顶部为0，那么设置其显示，然后在滚动过程中逐渐滚上去，滚上去，第二个隐藏的就显示出来mHeaderViewVisible = true;break;}}}@Overrideprotected void dispatchDraw(Canvas canvas) {super.dispatchDraw(canvas);if (mHeaderViewVisible) {drawChild(canvas, mHeaderView, getDrawingTime());}}}</span>MainActivity

初始化数据，当数据初始化成功时，，加载视图，并对城市名字按字母排序，主要理解handleMessage里的事情。

游手好闲会使人心智生锈