相信大家在许多App中都见到过带字母索引的界面,比如我最近看到的这个开源控件:

WaveSideBar

很酷是不是?!!!如果加在例如联系人列表界面上,大大提升了用户体验。

那么这个索引控件要怎么做呢,说到底就是自定义一个view,因为自身能力原因我并不能做出这样的效果,当然各位大神们可以自行去研究这类开源索引控件的源码。


以我的能力,现在只能做这样的:

虽然简单,但是对于新手来说学习一番还是不错的。

下面我们开始一步步写一个字母索引控件 SimpleSideBar


准备一些知识

这里推荐博主guolin的一系列文章

http://blog.csdn.net/guolin_blog/article/details/12921889

http://blog.csdn.net/guolin_blog/article/details/16330267

http://blog.csdn.net/jdsjlzx/article/details/41113969

第一步,创建类SimpleSideBar继承View

public class SimpleSideBar extends View {

    public SimpleSideBar(Context context) {
super(context);
} public SimpleSideBar(Context context, AttributeSet attrs) {
super(context, attrs);
} public SimpleSideBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
} }

第二步,声明所需要的变量

    // 索引字母数组
private String[] alphabet = {
"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 int currentChoosenAlphabetIndex=-1; // 画笔
private Paint mPaint=new Paint(); // 索引字母绘制大小
private int alphabetTextSize=20;

第三步,重写onDraw函数

该函数是绘制函数,通过它将控件内容显现出来

    @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas); // 获得控件高度
int viewHeight=getHeight();
// 获得控件宽度
int viewWidth=getWidth();
// 控件高度除以索引字母个数得到每个索引字母的高度
int heightPerAlphabet=viewHeight/alphabet.length; //通过循环每个索引字母,并绘制出来
for (int i=0;i<alphabet.length;i++){ // 设置画笔颜色、画笔绘制文字粗细和大小,设置抗锯齿
mPaint.setColor(Color.BLACK);
mPaint.setTypeface(Typeface.DEFAULT_BOLD);
mPaint.setTextSize(alphabetTextSize);
mPaint.setAntiAlias(true); // 如果当前选择的索引字母下标和循环到的索引字母下标相同
if(currentChoosenAlphabetIndex==i){ // 设置画笔颜色,绘制文字大小和加粗
mPaint.setColor(Color.YELLOW);
mPaint.setTextSize(alphabetTextSize);
mPaint.setFakeBoldText(true); } // 索引字母的相对于控件的x坐标,此处算法结果为居中
float xPos=viewWidth/2-mPaint.measureText(alphabet[i])/2;
// 索引字母的相对于控件的y坐标,索引字母的高度乘以索引字母下标+1即为y坐标
float yPos=heightPerAlphabet*i+heightPerAlphabet;
// 绘制索引字母
canvas.drawText(alphabet[i],xPos,yPos,mPaint);
// 重置画笔,为绘制下一个索引字母做准备
mPaint.reset(); }
}

到这里,我们直接把该控件加入layout中已经可以显示出来,只是没有触摸到索引字母使ListView/RecyclerView滚动到相应位置的功能。

如果要实现这个功能,我们需要重写dispatchTouchEvent函数来处理控件触摸事件,并且要对外提供一个接口来实现列表滚动到相应位置。

下面我们继续实现它。

第四步,提供一个接口

首先定义一个接口

    public interface OnLetterTouchedChangeListener{

        void onTouchedLetterChange(String letterTouched);

    }

接着声明一个接口变量,提供set方法

    OnLetterTouchedChangeListener onLetterTouchedChangeListener;

    public void setOnLetterTouchedChangeListener(OnLetterTouchedChangeListener onLetterTouchedChangeListener) {
this.onLetterTouchedChangeListener = onLetterTouchedChangeListener;
}

第五步,重写dispatchTouchEvent函数

该函数是控件触摸事件分发函数,当返回值为true时表示处理完毕不分发到下一级处理。

    @Override
public boolean dispatchTouchEvent(MotionEvent event) { // 获得触摸后的动作
int action = event.getAction();
// 获得触摸点的Y轴坐标
float touchYPos=event.getY(); // 控件高度除以索引字母的个数得到每个索引字母的高度(这里进行int强转),触摸点的Y轴坐标除以每个索引字母的高度就得到触摸到的索引字母的下标
int currentTouchIndex= (int) (touchYPos/getHeight()*alphabet.length); switch (action){
// 当触摸的动作为按下或者按下移动时
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
// 设置背景颜色
setBackgroundResource(R.color.grey_600); // 设置当前选的索引字母的下标值为当前选择的值
currentChoosenAlphabetIndex=currentTouchIndex; // 如果接口存在和索引下标值合法,执行接口方法,传入当前触摸的索引字母,供外部调用接收
if(onLetterTouchedChangeListener!=null&&currentTouchIndex<alphabet.length&&currentTouchIndex>-1){
onLetterTouchedChangeListener.onTouchedLetterChange(alphabet[currentTouchIndex]);
} // 重新绘制控件,即重新执行onDraw函数
invalidate(); break;
case MotionEvent.ACTION_UP: setBackgroundResource(R.color.grey_50);
// 当停止触摸控件的时候,将当前选择的索引字母下标值设为-1
currentChoosenAlphabetIndex=-1;
invalidate();
break;
default:break; } // 返回true表明该触摸事件处理完毕不分发出去
return true;
}

第六步,使用自定义的SimpleSideBar控件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/root"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"> <LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/> </LinearLayout> <me.pwcong.simplesidebar.view.SimpleSideBar
android:id="@+id/sideBar"
android:layout_width="30dp"
android:layout_height="wrap_content" /> </LinearLayout>

MainActivity.java

        ...

        sideBar= (SimpleSideBar) findViewById(R.id.sideBar);

        // 这里使用前面定义的接口
sideBar.setOnLetterTouchedChangeListener(new SimpleSideBar.OnLetterTouchedChangeListener() {
@Override
public void onTouchedLetterChange(String letterTouched) { // 获得触摸到的索引字母,再通过索引字母获取相应item的下标,执行列表滚动方法
int pos=simpleAdapter.getLetterPosition(letterTouched);
if(pos!=-1){
recyclerView.scrollToPosition(pos);
}
}
});

到这里我们的简单索引字母控件完成了,SimpleSideBar 的 Demo 可以在这里下载

https://github.com/pwcong/SimpleSideBar

做个简单的Android列表字母索引控件的更多相关文章

  1. Android常用酷炫控件(开源项目)github地址汇总

    转载一个很牛逼的控件收集帖... 第一部分 个性化控件(View) 主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Gallery.Gri ...

  2. Android 常用炫酷控件(开源项目)git地址汇总

    第一部分 个性化控件(View) 主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.P ...

  3. Android自定义控件之日历控件

      标签: android 控件 日历 应用 需求 2015年09月26日 22:21:54 25062人阅读 评论(109) 收藏 举报 分类: Android自定义控件系列(7) 版权声明:转载注 ...

  4. MaterialEditText——Android Material Design EditText控件

    MaterialEditText是Android Material Design EditText控件.可以定制浮动标签.主要颜色.默认的错误颜色等. 随着 Material Design 的到来, ...

  5. 一起写一个Android图片轮播控件

    注:本文提到的Android轮播控件Demo地址: Android图片轮播控件 1. 轮播控件的组成部分 我们以知乎日报Android客户端的轮播控件为例,分析一下轮播控件的主要组成: 首先我们要有用 ...

  6. Android零基础入门第17节:Android开发第一个控件,TextView属性和方法大全

    原文:Android零基础入门第17节:Android开发第一个控件,TextView属性和方法大全 前面简单学习了一些Android UI的一些基础知识,那么接下来我们一起来详细学习Android的 ...

  7. Android RecyclerView滚动类控件修改、去掉滑动边界的阴影效果

    前言 滚动类控件,大家都用的很多,如 RecyclerView.NestedSrollView.... 下面以recyclerView为例讲解,其他滚动控件也同理. RecyclerView 滚动列表 ...

  8. Android调用相册拍照控件实现系统控件缩放切割图片

    android 下如果做处理图片的软件 可以调用系统的控件 实现缩放切割图片 非常好的效果 今天写了一个demo分享给大家 package cn.m15.test; import java.io.By ...

  9. android中的EditView控件

    android中的EditView控件 EditText继承关系:View-->TextView-->EditText ,EditText是可编辑文本框 1.EditText默认情况下,光 ...

随机推荐

  1. 修改ip脚本

    1.打开运行 2.输入CMD 3.在命令提示符下输入: netsh -c interface ip dump > C:\我的网络配置.txt 4.打开您在C:\ 下的"我的网络配置 . ...

  2. JSP动作学习一

    创建一个简单的模拟登陆功能的网页,没有用数据库技术,只是简单的学习jsp语法 首先创建一个登陆页面 <%@ page language = "java" import=&qu ...

  3. 局域网内Tomcat服务器没法访问

    多半是防火墙的问题,在server2008上打开防火墙设置,关闭即可访问,不关闭的访问方式暂时好没研究出来

  4. 在Mac中如何显示和隐藏文件

    1.显示Mac隐藏文件的命令: 在终端中输入"defaults write com.apple.finder AppleShowAllFiles YES":  鼠标单击窗口左上角 ...

  5. Drools规则加载变量冲突问题分析

    问题现象说明 在个别环境下加载规则时出现:rule/trade/hg/Rule_FY_*.java (53:3948) : Duplicate local variable paraMap,出现此问题 ...

  6. WordPress按钮秒支付插件发布,支持微信支付,支付宝,银联,京东,苏宁,易宝支付

    痛点: 我们用WordPress建设网站和开发移动应用,有时候我们其实不需要太多的流程,只是需要一个收款通道,但是可能对支持的渠道更加关注,特别是手机应用.所以WordPress按钮秒支付插件诞生了, ...

  7. 《IT小小鸟》阅读心得

    我是一个不爱看书的人,认为看那些又臭又长废话连篇的书是在浪费时间,但我不认为在那么多的书中没有好书,在一次的职业生涯规划中老师推荐了这本书,一开始认为不值得一看,但还是拿了起来,读了有不少的感触. 书 ...

  8. 【POJ】【1160】Post Office

    DP/四边形不等式 邮局,经典的四边形不等式例题! 关于四边形不等式的学习请看 赵爽论文<动态规划加速原理之四边形不等式> 题目总结&题解:http://blog.csdn.net ...

  9. 【BZOJ】【1061】【NOI2008】志愿者招募

    网络流/费用流 OrzOrzOrz,这题太神了不会捉. 题解:https://www.byvoid.com/blog/noi-2008-employee/ 这道题正确的解法是构造网络,求网络最小费用最 ...

  10. C#UDP编程总结

    // 如果只使用一个EndPoint,维持一个引用. private static UdpClient udpClient; static void Main(string[] args) { if ...