一切看效果，效果满足不了需求，可以不必看了
实现这样布局，需要自定义右侧QuickIndexBar，具体实现很简单，看代码
public class QuickIndexBar extends View{
private String[] indexArr = {"#","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;
private int width;
private float cellHeight;
private Context context;
private int fontsize;
private int blue=0xff0894ec;
private int black=0xff999999;
private int mid_transparent=0x11000000;
private int transparent=0x00000000;
public QuickIndexBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.context=context;
init();
}
public QuickIndexBar(Context context, AttributeSet attrs) {
super(context, attrs);
this.context=context;
init();
}
public QuickIndexBar(Context context) {
super(context);
this.context=context;
init();
}
private void init(){
fontsize=DensityUtils.sp2px(context, 15);
paint = new Paint(Paint.ANTI_ALIAS_FLAG);//设置抗锯齿
paint.setColor(black);
paint.setTextSize(fontsize);
paint.setTextAlign(Align.CENTER);//设置文本的起点是文字边框底边的中心
paint.setStyle(Paint.Style.FILL);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
width = getMeasuredWidth();
//得到一个格子的高度
cellHeight = getMeasuredHeight()*1f/indexArr.length;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int i = 0; i < indexArr.length; i++) {
float x = width/2;
float y = cellHeight/2 + getTextHeight(indexArr[i])/2 + i*cellHeight;
if (lastIndex==i) {
paint.setColor(blue);
canvas.drawCircle(x, y-getTextHeight(indexArr[i])/2, fontsize/2+4, paint);
paint.setColor(Color.WHITE);
}else {
paint.setColor(black);
}
canvas.drawText(indexArr[i], x, y, paint);
}
}
private int lastIndex = -1;//记录上次的触摸字母的索引
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
setBackgroundColor(mid_transparent);
float y1 = event.getY();
int index1 = (int) (y1/cellHeight);//得到字母对应的索引
if(lastIndex!=index1){
//说明当前触摸字母和上一个不是同一个字母
// Log.e("tag", indexArr[index]);
//对index做安全性的检查
if(index1>=0 && index1<indexArr.length){
if(listener!=null){
listener.onTouchLetter(indexArr[index1]);
}
}
}
lastIndex = index1;
break;
case MotionEvent.ACTION_MOVE:
float y = event.getY();
int index = (int) (y/cellHeight);//得到字母对应的索引
if(lastIndex!=index){
//说明当前触摸字母和上一个不是同一个字母
// Log.e("tag", indexArr[index]);
//对index做安全性的检查
if(index>=0 && index<indexArr.length){
if(listener!=null){
listener.onTouchLetter(indexArr[index]);
}
}
}
lastIndex = index;
break;
case MotionEvent.ACTION_UP:
setBackgroundColor(transparent);
//重置lastIndex
lastIndex = -1;
break;
}
//引起重绘
invalidate();
return true;
}
/**
* 获取文本的高度
* @param text
* @return
*/
private int getTextHeight(String text) {
//获取文本的高度
Rect bounds = new Rect();
paint.getTextBounds(text,0,text.length(), bounds);
return bounds.height();
}
private OnTouchLetterListener listener;
public void setOnTouchLetterListener(OnTouchLetterListener listener){
this.listener = listener;
}
/**
* 触摸字母的监听器
* @author Administrator
*
*/
public interface OnTouchLetterListener{
void onTouchLetter(String letter);
}
}
public class MainActivity extends Activity {
private QuickIndexBar quickIndexBar;
private ListView listview;
private TextView currentWord;
private GameInfo games;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
quickIndexBar = (QuickIndexBar) findViewById(R.id.quickIndexBar);
listview = (ListView) findViewById(R.id.listview);
currentWord = (TextView) findViewById(R.id.currentWord);
// 1.准备数据
fillList();
// 2.对数据进行排序
Collections.sort(games.rows);
// 3.设置Adapter
listview.setAdapter(new MyAdapter(this, games));
quickIndexBar.setOnTouchLetterListener(new OnTouchLetterListener() {
@Override
public void onTouchLetter(String letter) {
// 根据当前触摸的字母，去集合中找那个item的首字母和letter一样，然后将对应的item放到屏幕顶端
for (int i = 0; i < games.rows.size(); i++) {
String firstWord = games.rows.get(i).initChar;
if (letter.equals(firstWord)) {
// 说明找到了，那么应该讲当前的item放到屏幕顶端
listview.setSelection(i);
break;// 只需要找到第一个就行
}
}
if (letter.equals("#")) {
listview.setSelection(0);
}
// 显示当前触摸的字母
showCurrentWord(letter);
}
});
// 通过缩小currentWord来隐藏
ViewHelper.setScaleX(currentWord, 0);
ViewHelper.setScaleY(currentWord, 0);
}
private boolean isScale = false;
private Handler handler = new Handler();
protected void showCurrentWord(String letter) {
currentWord.setText(letter);
if (!isScale) {
isScale = true;
ViewPropertyAnimator.animate(currentWord).scaleX(1f).setInterpolator(new OvershootInterpolator())
.setDuration(450).start();
ViewPropertyAnimator.animate(currentWord).scaleY(1f).setInterpolator(new OvershootInterpolator())
.setDuration(450).start();
}
// 先移除之前的任务
handler.removeCallbacksAndMessages(null);
// 延时隐藏currentWord
handler.postDelayed(new Runnable() {
@Override
public void run() {
// currentWord.setVisibility(View.INVISIBLE);
ViewPropertyAnimator.animate(currentWord).scaleX(0f).setDuration(450).start();
ViewPropertyAnimator.animate(currentWord).scaleY(0f).setDuration(450).start();
isScale = false;
}
}, 1500);
}
private void fillList() {
String json = "{\"rows\":[{\"allChar\":\"5173chongzhika\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"5173充值卡\",\"prodNo\":\"150240\",\"initChar\":\"#\",\"fuzzyChar\":\"\",\"prodPrice\":\"\"},{\"allChar\":\"baoyuyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"暴雨一卡通\",\"prodNo\":\"150140\",\"initChar\":\"b\",\"fuzzyChar\":\"\",\"prodPrice\":\"\"},{\"allChar\":\"bingchuantianxiatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"冰川天下通\",\"prodNo\":\"150100\",\"initChar\":\"b\",\"fuzzyChar\":\"BINGC\",\"prodPrice\":\"\"},{\"allChar\":\"jinshanyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"金山一卡通\",\"prodNo\":\"150080\",\"initChar\":\"j\",\"fuzzyChar\":\"JINS\",\"prodPrice\":\"\"},{\"allChar\":\"jiuchengyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"九城一卡通\",\"prodNo\":\"150090\",\"initChar\":\"j\",\"fuzzyChar\":\"JIUC\",\"prodPrice\":\"\"},{\"allChar\":\"jurenyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"巨人一卡通\",\"prodNo\":\"150040\",\"initChar\":\"j\",\"fuzzyChar\":\"JUREN\",\"prodPrice\":\"\"},{\"allChar\":\"junwangyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"骏网一卡通\",\"prodNo\":\"150120\",\"initChar\":\"j\",\"fuzzyChar\":\"JUNW\",\"prodPrice\":\"\"},{\"allChar\":\"kongzhongwangyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"空中网一卡通\",\"prodNo\":\"150060\",\"initChar\":\"k\",\"fuzzyChar\":\"KONGZ\",\"prodPrice\":\"\"},{\"allChar\":\"lianzhongbi\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"联众币\",\"prodNo\":\"150130\",\"initChar\":\"l\",\"fuzzyChar\":\"\",\"prodPrice\":\"\"},{\"allChar\":\"Mycardka\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"Mycard卡\",\"prodNo\":\"150200\",\"initChar\":\"M\",\"fuzzyChar\":\"\",\"prodPrice\":\"\"},{\"allChar\":\"mubiaoyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"目标一卡通\",\"prodNo\":\"150250\",\"initChar\":\"m\",\"fuzzyChar\":\"\",\"prodPrice\":\"\"},{\"allChar\":\"qifanyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"起凡一卡通\",\"prodNo\":\"150160\",\"initChar\":\"q\",\"fuzzyChar\":\"\",\"prodPrice\":\"\"},{\"allChar\":\"renrenyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"人人一卡通\",\"prodNo\":\"150230\",\"initChar\":\"r\",\"fuzzyChar\":\"\",\"prodPrice\":\"\"},{\"allChar\":\"shengdayikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"盛大一卡通\",\"prodNo\":\"150030\",\"initChar\":\"s\",\"fuzzyChar\":\"SHEN\",\"prodPrice\":\"\"},{\"allChar\":\"shijitianchengyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"世纪天成一卡通\",\"prodNo\":\"150210\",\"initChar\":\"s\",\"fuzzyChar\":\"\",\"prodPrice\":\"\"},{\"allChar\":\"souhuyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"搜狐一卡通\",\"prodNo\":\"150070\",\"initChar\":\"s\",\"fuzzyChar\":\"SOUHU\",\"prodPrice\":\"\"},{\"allChar\":\"tianyouyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"天游一卡通\",\"prodNo\":\"150220\",\"initChar\":\"t\",\"fuzzyChar\":\"\",\"prodPrice\":\"\"},{\"allChar\":\"tianqingyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"天晴一卡通\",\"prodNo\":\"150150\",\"initChar\":\"t\",\"fuzzyChar\":\"\",\"prodPrice\":\"\"},{\"allChar\":\"wanmeiyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"完美一卡通\",\"prodNo\":\"150050\",\"initChar\":\"w\",\"fuzzyChar\":\"WANM\",\"prodPrice\":\"\"},{\"allChar\":\"wangyiyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"网易一卡通\",\"prodNo\":\"150020\",\"initChar\":\"w\",\"fuzzyChar\":\"WANGY\",\"prodPrice\":\"\"},{\"allChar\":\"xunleileidian\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"迅雷雷点\",\"prodNo\":\"150180\",\"initChar\":\"x\",\"fuzzyChar\":\"\",\"prodPrice\":\"\"},{\"allChar\":\"zhanwangyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"战网一卡通\",\"prodNo\":\"150010\",\"initChar\":\"z\",\"fuzzyChar\":\"ZHA\",\"prodPrice\":\"\"},{\"allChar\":\"zhonghuawangyouxiyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"中华网游戏一卡通\",\"prodNo\":\"150170\",\"initChar\":\"z\",\"fuzzyChar\":\"\",\"prodPrice\":\"\"},{\"allChar\":\"zhongguangwangyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"中广网一卡通\",\"prodNo\":\"150110\",\"initChar\":\"z\",\"fuzzyChar\":\"ZHONGG\",\"prodPrice\":\"\"},{\"allChar\":\"zhongqingbaowangyikatong\",\"icon\":\"\",\"price\":\"\",\"prodName\":\"中青宝网一卡通\",\"prodNo\":\"150190\",\"initChar\":\"z\",\"fuzzyChar\":\"\",\"prodPrice\":\"\"}]}";
games = JSON.parseObject(json, GameInfo.class);
games.reset();
}
}demo地址：点击打开链接
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
