安卓 简单的 联系人快速检索控件QuickIndexBar实现
2016-08-10 14:35
429 查看
一切看效果,效果满足不了需求,可以不必看了
实现这样布局,需要自定义右侧QuickIndexBar,具体实现很简单,看代码
demo地址:点击打开链接
实现这样布局,需要自定义右侧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地址:点击打开链接
相关文章推荐
- 自定义控件之A-Z快速检索QuickIndexBar
- Android快速索引条控件QuickIndexBar
- 安卓用QuickContactBadge和AsyncQueryHandler实现联系人列表的完美实现
- 自定义控件之快速索引QuickIndexBar
- dataGridView 控件快速绑定数据源后,简单的代码实现
- EasySegmentedBarView简单易用的自定义分段控件,方便快速实现分段效果
- IndexExpandableListView快速索引定位控件的实现及源码
- [置顶] 联系人快速检索实现
- 安卓中针对单个控件的简单动画实现
- 安卓开发-最简单快速的仿微信聊天实现-附赠微信原生表情,QQ原生表情
- Android 联系人快速索引组件 QuickIndexView
- Android自定义控件之实现快速检索
- QuickIndex通讯录快速检索
- 关于android实现fastindexbar(快速索引)详解
- 自定义view实现联系人快速检索
- [DevExpress控件应用]XtraBar: 实现回车移动到下个控件的功能
- 超简单的邮件快速登录脚本制作实现方法[转]
- ASP.NET2.0中Tabs的简单实现 不用Asp.net Ajax ControlToolKit中的Tabs控件实现Tabs效果的简单实现方法:
- 常见内部排序算法 简单数组实现与分析(快速(偶原创partition函数,望众高手指正)、归并、希尔、插入、选择、冒泡)
- VC 中实现 XP 风格的控件,简单实用的方法包你满意!