Android从零开始之一步一步教你实现联系人功能（一）

在最近的项目中有这样的一个需求，就是要实现类似联系人的列表,包含模糊查询、按照A到Z拼音首字母分组排序、和收藏功能。参考了一下网上的例子，我觉得还是自己亲自操刀来实现所有的功能。今天带领大家先实现联系人右边的侧边栏【A~Z】。先上一张图：



可以看到，右边是一个A到Z的侧边菜单导航栏，当我们点击右边侧边菜单导航栏时，中间显示当前点击item。相信这个UI对大家都很熟悉。很多APP都有这样的界面。最典型的就是通讯录。

新建一个类，名字叫做SiderBarMenu并且继承View，按照自定义view的步骤。先实现它的三个构造方法。如下：

public SideBarMenu(Context context)
{
this(context, null);
}

public SideBarMenu(Context context, AttributeSet attrs)
{
this(context, attrs, 0);
}

public SideBarMenu(Context context, AttributeSet attrs, int style)
{
super(context, attrs, style);
init();
}

private void init()
{
mSideBarMenuPaint = new Paint();
//设置画笔颜色
mSideBarMenuPaint.setColor(Color.RED);
//设置字体大小
mSideBarMenuPaint.setTextSize(30);
//设置字体
mSideBarMenuPaint.setTypeface(Typeface.DEFAULT_BOLD);
}

在含有三个构造方法定义一个初始化方法，用于初始化一些我们后面需要用到的变量等。这儿我们初始化Paint(画笔)的实例，以及设置画笔的颜色、字体大小、字体。在这之前我们先定义下我们需要用到的变量：

//画笔
private Paint mSideBarMenuPaint;
//定义一个用户点击item标识
private int click = -1;
//侧边导航栏的文字
private String[] SIDEBAR = {"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"};
//显示tips的控件
private TextView mTvTips;

完成这些之后，我们就要开始画我们的侧边栏菜单了，首先重写View的onDraw()方法，如下：

@Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
//获取控件的宽、高度，即你在布局文件当中设置的：layout_width、layout_height两个的值;
int width = getWidth();
int height = getHeight();
//每个Item高度
int SideBarItemHeight = height / SIDEBAR.length;

for (int i = 0; i < SIDEBAR.length; i++)
{
//计算我们要画文字的X坐标，计算公式：控件宽度/2-文字宽度/2  目的：文字水平方向居中
float xPos = width / 2 - mSideBarMenuPaint.measureText(SIDEBAR[i]) / 2;
//计算我们要画文字的Y坐标，计算公式：控件高度*当前项数+控件高度/2  目的：文字垂直方向居中
float yPos = SideBarItemHeight * i + SideBarItemHeight / 2;
//画出侧边导航栏
canvas.drawText(SIDEBAR[i], xPos, yPos, mSideBarMenuPaint);
//重置画笔,如果重置画笔，则必须重新设置画笔属性
//mSideBarMenuPaint.reset();
}
}

首先，我们要获取到我们在布局文件当中的宽、高。然后算出每一个item的高度。之后在算出每一个item的X、Y坐标。之后调用canvas.drawText()方法绘制我们的侧边栏，这儿我注释了一个reset()方法，如果调用它我们就需要每次在循环里面重新设置paint的属性，因为前面我在init()方法中设置过，所以我把这个方法注释掉了。而且考虑到后面也没有拿这个画笔做其他操作。这时候我们运行程序应该可以到侧边栏已经绘制成功了。

接下来就是处理触摸事件了。我们需要重写dispatchTouchEvent()方法。来手动处理触摸事件。

/**
* 手动处理触摸事件
*
* @param event
* @return
*/
@Override
public boolean dispatchTouchEvent(MotionEvent event)
{
//获取触摸事件：ACTION_DOWN、ACTION_MOVE、ACTION_UP
int action = event.getAction();
//获取触摸的Y坐标
float yPos = event.getY();
//判断点击的是那一个item。计算公式：触摸的Y坐标/控件高度*侧边导航栏item总数。
int pos = (int) (yPos / getHeight() * SIDEBAR.length);
//记录之前用户点击的item
int oldClick = click;

//处理触摸事件，up事件单独处理，其他（ACTION_DOWN、ACTION_MOVE）在default中去处理。
switch (action)
{
case MotionEvent.ACTION_UP:
//复位
click = -1;
if (mTvTips != null)
{
mTvTips.setVisibility(View.GONE);
}
invalidate();
break;
default:
if (oldClick != pos)
{
if (pos > 0 && pos < SIDEBAR.length)
{
if (mTvTips != null)
{
mTvTips.setText(SIDEBAR[pos]);
mTvTips.setVisibility(View.VISIBLE);
}
click = pos;
//通知View树重绘，主线程用：invalidate()，非主线程用：postInvalidate()；
invalidate();
}
}
break;
}

return true;
}

这儿代码稍稍长一点，我从上到下给解释下，首先我们要通过event.getAction()方法拿到用户的触摸事件，之后在通过event.getY()方法获取用户触摸的Y坐标。拿到Y坐标之后，我们就可以判断用户当前触摸的哪一个item。计算公式：触摸的Y坐标/控件高度*侧边导航栏item总数。不知道大家能理解到这个公式不，理解不到自己用本子算吧。或者找个六年纪一下的同学帮你算。哈哈！然后定义一个变量oldClick来保存用户之前点击的位置。

完成上面的操作之后，我们就开始判断用户的触摸事件了，这儿我们将ACTION_UP事件单独处理，因为ACTION_DOWN、ACTION_MOVE的处理逻辑一样，所以我放到了default里面，

ACTION_UP：

我们需要处理当用户抬手之后隐藏TextView并且将click恢复默认值，不然当你重复点击同一个item是没有效果的。

ACTION_DOWN&ACTION_MOVE：

首先判断之前点击的item位置和现在的位置是否一样，如果不一样，再判断当前位置是否越界，之后设置要显示的内容并且将TextView设置为可见，之后将当前位置重新赋值，并且通知View树重绘。

最后我们再向外抛一个设置TextView的方法。

public void setTextView(TextView tips)
{
this.mTvTips = tips;
}

现在在我们布局文件中使用：

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right">

<com.poisonh.contacts.widgets.SideBarMenu
android:id="@+id/sbm_siderbarmenu"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>

<TextView
android:id="@+id/tv_tips"
android:layout_width="50dp"
android:layout_height="50dp"
android:visibility="gone"
android:layout_centerInParent="true"
android:background="@drawable/shape_tips_bg"
android:gravity="center"
android:text="H"
android:textColor="#fff"/>

</RelativeLayout>

最后在MainActivity中使用：

public class MainActivity extends AppCompatActivity
{
private SideBarMenu mSiderBarMenu;
private TextView mTvTips;

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
//setClickListener();
}

private void initView()
{
mSiderBarMenu = (SideBarMenu) findViewById(R.id.sbm_siderbarmenu);
mTvTips = (TextView) findViewById(R.id.tv_tips);
mSiderBarMenu.setTextView(mTvTips);
}
}

运行程序，你就可以看到文章开头的效果了。源码地址：https://github.com/PoisonH/Contacts