仿联系人列表或其他上的字母索引

这个小功能github有很多。不同的应用可能需求稍微有些差别，比如listview滑动时字母是不是跟随滑动；手动点击字母是不是在屏幕中间实现一个提示。实现思路上也有多种，比如自己去draw每个字母，然后处理滑动；有些可能就是借助TextView来展示字母列表。有些是点击索引的时候，整个索引的背景出来，离开后背景消失。当然这些都是细节问题。看了几个demo，感觉还目前自己的需求有些差别，而且为了实现“大而全”有些多余的东西，因此决定自己写个。

需求是这样的：中文参与索引，字母或者其他开头的item不参与索引，直接放到第一个“#”里；点击字母索引其被点击字母列表颜色跟随变化；手动滑动listview字母索引的字母颜色也跟随变化；自己顺手加了个点击某个字母弹出提示的接口。最后效果如下图：



决定直接使用垂直方向的LinearLayout嵌套TextView来展示字母列表。思路如下：根据索引高度，大概计算每个字母的高度，然后添加到Linearlayout中；然后处理Linearlayout的touch事件，拿到坐标计算当前应该索引哪个。其中遇到的主要问题就是TextView的把握，比如它的高度改如何计算，真正实现的时候你会发现它有个paddingTop和paddingBottom。其他的比如滑动逻辑这些调试下即可，直接上代码：

package com.ttdevs.indicator.widget;

import java.util.List;

import android.annotation.SuppressLint;
import android.content.Context;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.widget.AbsListView;
import android.widget.AbsListView.OnScrollListener;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;

import com.ttdevs.indicator.R;

/**
 * 
 * 右侧字母索引。可作为一个独立的view插入自己的布局中<br>
 * <br>
 * 描述：<br>
 * 线型布局中嵌套一个线型布局（目的为了增大可滑动区域的面积，若不考虑此可不使用嵌套）。<br>
 * 每个字母插入内嵌的线性布局中，根据控件的高度计算每个字母的尺寸。<br>
 * <br>
 * 使用：<br>
 * 将此view插入你的布局文件中，初始化完成之后设置你的ListView和索引用的数据源(需要自己组织排序数据源)即可。<br>
 * <br>
 * 数据源的组织：若某项不参与排序则数据源中设置为'0'或其他小于'A'的ASCII字符，内部会将所有字符转换成大写，所以务必在外部做好排序。<br>
 * <br>
 * 建议：若你的数据中包括ASCII码为a0、20的字符，建议剔除，如：<br>
 * str.replace(' ', ' '); // a0->20 str.replaceAll(" ", "");<br>
 * <br>
 * 如果你处理的是中文，可使用libs中的pinyin4j处理
 * 
 * @author ttdevs 2014-07-31
 * 
 */
public class ListViewLetterIndicator extends LinearLayout implements OnScrollListener {

	private static final String INDICATOR = "#ABCDEFGHIJKLMNOPQRSTUVWXYZ";

	private LinearLayout llMain;

	private ListView mListView; // ListView
	private List<String> mData; // 数据源
	private TextView tvAlert; // 显示当前的字母

	private int mIndex; // 当前所处的indicator位置
	private boolean scrollable = true; //

	public ListViewLetterIndicator(Context context) {
		this(context, null);
	}

	public ListViewLetterIndicator(Context context, AttributeSet attrs) {
		super(context, attrs);

		setOrientation(LinearLayout.VERTICAL);
		setBackgroundColor(getResources().getColor(R.color.letter_indicator_background));
		// setPadding(8, 8, 8, 8);

		llMain = new LinearLayout(getContext());
		llMain.setOrientation(LinearLayout.VERTICAL);
		llMain.setGravity(Gravity.CENTER);
		// llMain.setPadding(2, 2, 2, 2);

		int width = (int) getResources().getDimension(R.dimen.letter_indicator_width);
		addView(llMain, width, LinearLayout.LayoutParams.MATCH_PARENT);
	}

	/**
	 * 设置数据源
	 * 
	 * @param lv
	 *            绑定的ListView
	 * @param data
	 *            排序用的数据源
	 */
	public void setData(ListView lv, List<String> data) {
		setData(lv, data, null);
	}

	/**
	 * 设置数据源
	 * 
	 * @param lv
	 *            绑定的ListView
	 * @param data
	 *            排序用的数据源
	 * @param tv
	 *            显示当前所处字母的TextView
	 */
	@SuppressLint("DefaultLocale")
	public void setData(ListView lv, List<String> data, TextView tv) {
		mListView = lv;
		mData = data;
		tvAlert = tv;

		for (int i = 0; i < mData.size(); i++) {
			String str = mData.get(i);
			mData.set(i, str.toUpperCase());
		}

		mListView.setOnScrollListener(this);
		mIndex = 0;
	}

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

	private void initView() {
		int childCount = llMain.getChildCount();
		if (childCount == INDICATOR.length()) {
			// llMain.invalidate();
			return;
		}

		int height = llMain.getHeight();
		int textHeight = (int) Math.floor(height / (INDICATOR.length() + 6));

		LinearLayout.LayoutParams llpText = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
				LinearLayout.LayoutParams.WRAP_CONTENT);
		for (int i = 0; i < INDICATOR.length(); i++) {
			String str = String.valueOf(INDICATOR.charAt(i));
			TextView tvIndicator = new TextView(getContext());
			tvIndicator.setText(str);
			tvIndicator.setIncludeFontPadding(false);
			tvIndicator.setTextSize(TypedValue.COMPLEX_UNIT_PX, textHeight);
			tvIndicator.setTextColor(getResources().getColor(R.color.letter_indicator_text_normal));
			// tvIndicator.setPadding(0, -4, 0, -4);
			llMain.addView(tvIndicator, llpText);
		}
	}

	@SuppressLint("DefaultLocale")
	@Override
	public boolean dispatchTouchEvent(MotionEvent ev) {
		int action = ev.getAction();
		switch (action) {
		case MotionEvent.ACTION_DOWN:
		case MotionEvent.ACTION_MOVE:
			scrollable = false;
			float y = ev.getY();
			float childY = 0;
			int index = 0;
			for (int i = 0; i < INDICATOR.length(); i++) {
				TextView view = (TextView) llMain.getChildAt(i);
				childY = view.getTop();
				int height = view.getHeight();
				if (childY < y && childY + height > y) {
					index = i;
					break;
				}
				view = null; // not neccessary
			}

			TextView view = (TextView) llMain.getChildAt(INDICATOR.length() - 1);
			if (y > view.getTop()) {
				index = INDICATOR.length() - 1;
			}
			view = null;

			changeIndicatorColor(index);

			char indexIndicator = INDICATOR.charAt(index);// A:65, #:23
			if (indexIndicator < 'A') {
				mListView.setSelection(0);
			} else {
				for (int i = 0; i < mData.size(); i++) {
					if (mData.get(i).charAt(0) >= indexIndicator) {
						mListView.setSelection(i);
						return true;
					}
				}
			}

			break;
		case MotionEvent.ACTION_UP:
			postDelayed(new Runnable() {

				@Override
				public void run() {
					scrollable = true;
				}
			}, 100);
			showText("", false);
			break;

		default:
			break;
		}
		return true;
	}

	@Override
	public void onScrollStateChanged(AbsListView view, int scrollState) {
		// invalidate();
	}

	@SuppressLint("DefaultLocale")
	@Override
	public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
		try {
			if (!scrollable || null == mData || mData.size() == 0) {
				return;
			}
			if (null != mData) {
				String str = mData.get(firstVisibleItem);
				char indicator = str.charAt(0);
				if (indicator < 'A') {
					changeIndicatorColor(0);
					return;
				}
				for (int i = 1; i < INDICATOR.length(); i++) {
					if (INDICATOR.charAt(i) == indicator) {
						changeIndicatorColor(i);
						return;
					}
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	private void changeIndicatorColor(int index) {
		if (mIndex != 0 && mIndex == index) {
			return;
		}

		TextView tv = (TextView) llMain.getChildAt(mIndex);
		tv.setTextColor(getResources().getColor(R.color.letter_indicator_text_normal));

		tv = (TextView) llMain.getChildAt(index);
		tv.setTextColor(getResources().getColor(R.color.letter_indicator_text_select));

		mIndex = index;

		showText(String.valueOf(INDICATOR.charAt(mIndex)), true);
	}

	private void showText(String text, boolean isShow) {
		if (null != tvAlert) {
			tvAlert.setText(text);
			tvAlert.setVisibility(isShow ? View.VISIBLE : View.INVISIBLE);
		}
	}

	// private Drawable initBackground() {
	// float[] roundRect = new float[] { 12, 12, 12, 12, 12, 12, 12, 12 };
	// RoundRectShape reoundRechShape = new RoundRectShape(roundRect, null,
	// null);
	// ShapeDrawable drawable = new ShapeDrawable(reoundRechShape);
	// drawable.getPaint().setColor(Color.parseColor(GRAY_AA));
	// // drawable.getPaint().setStyle(Paint.Style.FILL);
	// return drawable;
	// }
}

测试过程中发现，有些item明明是汉字开头的（这个时候你可能还需要个汉字转拼音的工具包），却出现在“#”里，仔细检查，你会发现，那个并不是空格，细节请看代码注释。 由于很简单，不做详细介绍，仅仅做个记录，有问题可以留言一起讨论。最后附个测试demo：下载