其实这个功能是仿苹果的，但是现在大多数Android设备都已经有了这个功能，尤其是在通讯录中最为常见。先来看看今天这个DEMO的效果图（如下图）：从图中我们可以看到，屏幕中的主体是一个ListView，右边有一个导航栏，里面放着字母/数字的索引（如图1），用手指点击/移动手指可以改变选中的索引，同时ListView将滚动到选中的索引对应的第一条数据（如图2）；如果ListView的数据中没有选中的索引对应的数据，则将ListView滚动到选中索引上面离选中索引最近的有数据的索引对应的第一条数据（如图3）。
通过这个DEMO，我想写两件事：第一，这种样式的ListView怎么做；第二，索引工具怎样实现。下面会一一记录。
一、DEMO中ListView的实现
这种内容复杂、各Item样式不一样的ListView，就是通过在Adapter上做手脚来实现的，这个DEMO也不例外。在这个DEMO中我用的是BaseAdapter，通过ContentView结合ViewHolder实现的。当然，我们还需要自定义一个Item的布局文件，ListView中的每个Item其实都是一个这个布局中的Item。下面上Item的效果图（帖子最后会上代码哒~）：
那么问题来了，运行效果中ListView中的Item不是每个都带有上面那一条灰色的啊，这是怎么做到的呢？其实，这是我在Adapter中做了手脚，在Adapter的getView()中判断这一条数据是不是这一索引对应的一系列数据中的第一条，如果不是，则隐藏掉上面的TextView。就是这么简单~
二、索引工具的实现
前面说过，这是一个自定义控件。开始我认为需要为索引栏中的每个索引都建立一个TextView，后来发现原来不需要建立那么多TextView，我们只需要通过自定义控件的onDraw()方法“画”出所有的索引字符。
然后就是和手指的交互了，我们通过重写View的onTouchEvent()方法来获取手指当前的动作，并利用接口回调机制，对手指的动作进行监听。这里也体现出了上一段的一个优点：如果我们用一堆TextView来表示索引字符，那么我们就需要自定义一个ViewGroup，但是这样一来我们就不能——至少很难——达到像现在一样的效果，因为我们肯定要为每个TextView都设置一个onTouchEvent()事件，但多个TextView之间无法达到无缝的衔接，即只有按下手指或抬起手指时可能会有交互，而滑动期间无法达到交互，因为那是两个TextView！因此，我们使用一个单一的View，通过判断当前手指所在的高度来判断当前用户选中的是那个索引，从而就可以写回调事件了。
在这里还有一个问题，我们在最开始介绍到，“如果ListView的数据中没有选中的索引对应的数据，则将ListView滚动到选中索引上面离选中索引最近的有数据的索引对应的第一条数据”。这句话听上去挺复杂，但是我们只需要把上面的效果图图2、图3进行一下比较就显而易见了：比如说，在ListView的数据源中没有以E开头的数据，那么当我们选择字母E为索引是，程序会自动跳到离E最近的、有数据的一个索引——D。当然，如果D中也没有数据，那么可能会跳到C、B、A或者#。看上去很复杂的功能，其实只是一个遍历的问题而已。
三、代码实现
国际惯例，先上程序结构图：
主界面布局文件activity_main.xml中的代码：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"> <ListView
android:id="@+id/find_main_lv_names"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:cacheColorHint="@android:color/transparent"
android:divider="@null" /> <com.view.SideBar
android:id="@+id/find_main_ly_indexes"
android:layout_width="25.0dip"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:orientation="vertical" /> <TextView
android:id="@+id/find_main_tv_indexviewer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="100.0sp"
android:textStyle="bold" />
</RelativeLayout>
主界面MainActivity.java中的代码：
package com.activity; import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.TextView; import com.entity.DataModel;
import com.tools.MyAdapter;
import com.view.SideBar; import net.sourceforge.pinyin4j.PinyinHelper; import java.util.ArrayList;
import java.util.Collections;
import java.util.Comparator;
import java.util.List; public class MainActivity extends Activity {
private ListView nameList; // 显示所有数据的ListView
private SideBar sideBar; // 右边的索引条
private TextView indexViewer; // 位于屏幕中间的当前选中的索引的放大 private List<DataModel> dataList; // 用来存放所有数据的列表 @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
initEvent();
} /**
* 初始化控件
*/
private void initView() {
nameList = (ListView) findViewById(R.id.find_main_lv_names);
sideBar = (SideBar) findViewById(R.id.find_main_ly_indexes);
indexViewer = (TextView) findViewById(R.id.find_main_tv_indexviewer);
sideBar.setIndexViewer(indexViewer);
} /**
* 初始化数据
*/
private void initData() {
// 初始化存放所有信息的List并添加所有数据
dataList = new ArrayList<DataModel>();
String[] names = getResources().getStringArray(R.array.names);
for (String name : names) {
dataList.add(new DataModel(name, getPinYinHeadChar(name)));
}
// 对dataList进行排序：根据每条数据的indexName（字符串）属性进行排序
Collections.sort(dataList, new Comparator<DataModel>() {
@Override
public int compare(DataModel model1, DataModel model2) {
return String.valueOf(model1.getIndexName()).compareTo(String.valueOf(model2.getIndexName()));
}
});
MyAdapter adapter = new MyAdapter(MainActivity.this, dataList);
nameList.setAdapter(adapter);
} /**
* 初始化事件
*/
private void initEvent() {
// 回调接口将ListView滑动到选中的索引指向的第一条数据
// 如果选中的索引没有对应任何数据，则指向这个索引上面的最近的有数据的索引
sideBar.setOnIndexChoiceChangedListener(new SideBar.OnIndexChoiceChangedListener() {
@Override
public void onIndexChoiceChanged(String s) {
char indexName = s.charAt(0);
int lastIndex = 0;
for (int i = 1; i < dataList.size(); i++) {
char currentIndexName = dataList.get(i).getIndexName();
if (currentIndexName >= indexName) {
if (currentIndexName == indexName) {
nameList.setSelection(i);
if (currentIndexName == '#') {
nameList.setSelection(0);
}
} else {
nameList.setSelection(lastIndex);
}
break;
}
if (dataList.get(i - 1).getIndexName() != currentIndexName) {
lastIndex = i;
}
}
}
});
} /**
* 返回中文的首字母（大写字母），如果str不是汉字，则返回 “#”
*/
public static char getPinYinHeadChar(String str) {
char result = str.charAt(0);
String[] pinyinArray = PinyinHelper.toHanyuPinyinStringArray(result);
if (pinyinArray != null) {
result = pinyinArray[0].charAt(0);
}
if (!(result >= 'A' && result <= 'Z' || result >= 'a' && result <= 'z')) {
result = '#';
}
return String.valueOf(result).toUpperCase().charAt(0);
}
}
主界面的ListView中Item的布局文件sideworks_main_namelist_item.xml中的代码：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"> <TextView
android:id="@+id/find_nameitem_index"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
android:paddingBottom="5.0dip"
android:paddingLeft="10.0dip"
android:paddingTop="5.0dip"
android:text="@string/app_name"
android:textColor="@android:color/black"
android:textSize="18.0sp"
android:textStyle="bold" /> <TextView
android:id="@+id/find_nameitem_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:paddingBottom="15.0dip"
android:paddingLeft="10.0dip"
android:paddingTop="15.0dip"
android:text="@string/app_name"
android:textColor="@color/colorPrimaryDark"
android:textSize="20.0sp" /> </LinearLayout>
主界面ListView中Item映射到的实体类DataModel.java中的代码：
package com.entity;
public class DataModel {
private String name; // 在ListView中显示的数据
private char indexName; // 拼音首字母
public DataModel() {
}
public DataModel(String name, char indexName) {
this.name = name;
this.indexName = indexName;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public char getIndexName() {
return indexName;
}
public void setIndexName(char indexName) {
this.indexName = indexName;
}
}
主界面中ListView的适配器类MyAdapter.java中的代码：
package com.tools; import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView; import com.activity.R;
import com.entity.DataModel; import java.util.List; public class MyAdapter extends BaseAdapter {
private List<DataModel> list;
private LayoutInflater inflater; public MyAdapter(Context context, List<DataModel> list) {
this.list = list;
inflater = LayoutInflater.from(context);
} @Override
public int getCount() {
return list.size();
} @Override
public Object getItem(int position) {
return list.get(position);
} @Override
public long getItemId(int position) {
return position;
} @Override
public View getView(int position, View convertView, ViewGroup parent) {
convertView = inflater.inflate(R.layout.sideworks_main_namelist_item, parent, false);
TextView indexView = (TextView) convertView.findViewById(R.id.find_nameitem_index);
TextView nameView = (TextView) convertView.findViewById(R.id.find_nameitem_name);
indexView.setText(String.valueOf(list.get(position).getIndexName()));
nameView.setText(list.get(position).getName());
if (position != 0 && list.get(position - 1).getIndexName() == (list.get(position).getIndexName())) {
indexView.setVisibility(View.GONE);
}
return convertView;
}
}
主界面中的自定义索引栏控件类SideBar.java中的代码：
package com.view; import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.graphics.drawable.ColorDrawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextView; import com.activity.R; public class SideBar extends View {
private String[] indexNames = {"#", "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 paint = new Paint(); // onDraw()中用到的绘制工具类对象
private TextView indexViewer; // 显示当前选中的索引的放大版
private int currentChoice = -1; // 当前选择的字母
private OnIndexChoiceChangedListener listener; // 回调接口，用来监听选中索引该表时出发的事件 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);
} @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 获取焦点改变背景颜色
int totalWidth = getWidth(); // SideLayout控件的高度
int totalHeight = getHeight(); // SideLayout控件的宽度
int singleHeight = (totalHeight - 5) / indexNames.length; // 每一个字母的高度
for (int i = 0; i < indexNames.length; i++) {
paint.setColor(Color.rgb(33, 65, 98));
paint.setTypeface(Typeface.DEFAULT_BOLD);
paint.setAntiAlias(true);
paint.setTextSize(30);
// 选中的状态
if (i == currentChoice) {
paint.setColor(Color.parseColor("#3399ff"));
paint.setFakeBoldText(true);
}
float xPos = totalWidth / 2 - paint.measureText(indexNames[i]) / 2; // x坐标等于中间-字符串宽度的一半
float yPos = singleHeight * i + singleHeight;
canvas.drawText(indexNames[i], xPos, yPos, paint);
paint.reset(); // 重置画笔
invalidate();
}
} @Override // 为自定义控件设置触摸事件
public boolean onTouchEvent(MotionEvent event) {
final int action = event.getAction();
final float y = event.getY(); // 点钱手指所在的Y坐标
final int lastChoice = currentChoice;
final OnIndexChoiceChangedListener listener = this.listener;
final int c = (int) (y / getHeight() * indexNames.length); // 点击y坐标所占总高度的比例*b数组的长度就等于点击b中的个数
switch (action) {
case MotionEvent.ACTION_UP: // 抬起手指
setBackgroundColor(Color.parseColor("#00000000")); // 背景设置为透明
currentChoice = -1;
invalidate(); // 实时更新视图绘制
if (indexViewer != null) {
indexViewer.setVisibility(View.INVISIBLE); // 隐藏放大的索引
}
break;
default: // 按下手指或手指滑动
setBackgroundResource(R.drawable.sidebar_background);
if (lastChoice != c) { // 选中的索引改变时
if (c >= 0 && c < indexNames.length) {
if (listener != null) {
listener.onIndexChoiceChanged(indexNames[c]);
}
if (indexViewer != null) {
indexViewer.setText(indexNames[c]);
indexViewer.setVisibility(View.VISIBLE);
}
currentChoice = c;
invalidate();
}
}
break;
}
return true;
} public void setIndexViewer(TextView indexViewer) {
this.indexViewer = indexViewer;
} public void setOnIndexChoiceChangedListener(OnIndexChoiceChangedListener listener) {
this.listener = listener;
} /**
* 回调接口，用来监听选中索引该表时出发的事件
*/
public interface OnIndexChoiceChangedListener {
void onIndexChoiceChanged(String s);
}
}
点击索引栏时索引栏变化的背景文件sidebar_background.xml的代码：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90.0"
android:endColor="#99C60000"
android:startColor="#99C60000" /> <corners
android:bottomLeftRadius="8dip"
android:topLeftRadius="8dip" /> </shape>
最后是数据（以string-array的形式写在strings.xml文件中）：
<resources>
<string name="app_name">索引列表</string> <string-array name="names">
<item>阿妹</item>
<item>阿郎</item>
<item>陈奕迅</item>
<item>周杰伦</item>
<item>曾一鸣</item>
<item>成龙</item>
<item>王力宏</item>
<item>汪峰</item>
<item>王菲</item>
<item>那英</item>
<item>张伟</item>
<item>张学友</item>
<item>李德华</item>
<item>郑源</item>
<item>白水水</item>
<item>白天不亮</item>
<item>陈龙</item>
<item>陈丽丽</item>
<item>哈林</item>
<item>高进</item>
<item>高雷</item>
<item>阮今天</item>
<item>龚琳娜</item>
<item>苏醒</item>
<item>苏永康</item>
<item>陶喆</item>
<item>沙宝亮</item>
<item>宋冬野</item>
<item>宋伟</item>
<item>袁成杰</item>
<item>戚薇</item>
<item>齐大友</item>
<item>齐天大圣</item>
<item>品冠</item>
<item>吴克群</item>
<item>BOBO</item>
<item>Jobs</item>
<item>动力火车</item>
<item>伍佰</item>
<item>#蔡依林</item>
<item>$797835344$</item>
<item>Jack</item>
<item>~夏先生</item>
</string-array> </resources>