首页 > 代码库 > 仿联系人列表或其他上的字母索引

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

    这个小功能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 = http://www.mamicode.com/data;>
     测试过程中发现,有些item明明是汉字开头的(这个时候你可能还需要个汉字转拼音的工具包),却出现在“#”里,仔细检查,你会发现,那个并不是空格,细节请看代码注释。 由于很简单,不做详细介绍,仅仅做个记录,有问题可以留言一起讨论。最后附个测试demo:下载

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