1、前言
现在很多app里都有一个用a-z字母放在屏幕的右边,然后点击字母栏快速定位到Listview的字母匹配的内容,使用通讯录里的联系人选择。
如最近很火的易信里的添加好友的字母过滤。
2、效果图
3、设计过程
先用一个相对布局做为父View,然后把自定义的View固定到布局的右边,然后用一个TextView显示当前的手指滑动的位置,同样固定到布局的中央,半透明。
自定义View的制作,我简单说下,先画一个背景上去,Touch住时换一个背景,增加动感,然后把字母一个个画上去,重写onTouchEvent监听滑动事件,
用点击的位置来计算出当前的字母是那个,触发接口事件更新TextView。
4、来看一下代码设计
xml代码
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<com.spring.rightbutton.MyListView
android:id="@+id/mylistview"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
/>
<TextView
android:id="@+id/current_text"
android:layout_width="100dp"
android:layout_height="100dp"
android:gravity="center_vertical|center_horizontal"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#969696"
android:textSize="30sp"
android:alpha="0.5"
android:visibility="gone"
/>
</RelativeLayout>
重写的View控件是必须的,代码如下:
package com.spring.rightbutton;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
public class MyListView extends View{
char str ='A';
final int COUNT =26;//一共26个字母没错吧
int rawHeight =0;//每个字母的行高
boolean isTouch =false;//是否在触摸状态,如果是改变背景颜色
MyListViewChangeListener changeListener =null;//回调接口
public MyListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public MyListView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyListView(Context context) {
super(context);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(isTouch){
canvas.drawARGB(0x88, 0x80, 0x80, 0x80);//画背景
}else{
canvas.drawARGB(122, 0x96, 0x96, 0x96);
}
rawHeight =this.getHeight()/COUNT;//算出行高
Paint paint =new Paint();
paint.setColor(Color.BLACK); //设置字体颜色
String dstr;
for(int i=1;i<=COUNT;i++){
dstr = intToString(i);
canvas.drawText(dstr, this.getWidth()/2-paint.measureText(dstr)/2, rawHeight*i, paint); //paint.measureText(dstr)拿取字母的宽度
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
int current =(int)event.getY()/rawHeight;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
isTouch =true;
if(current>0 && changeListener!=null){
changeListener.onChangeListener(intToString(current));
}
invalidate(); //更新界面
break;
case MotionEvent.ACTION_MOVE:
if(current>0 && changeListener!=null){
changeListener.onChangeListener(intToString(current));
}
break;
case MotionEvent.ACTION_UP:
isTouch =false;
if(current>0 && changeListener!=null){
changeListener.onChangeListener("");
}
invalidate();
break;
}
return true;
}
/**
* int转字符串
* @param len
* @return
*/
private String intToString(int len){
return ((char)(str+len-1))+"";
}
//设置接口监听
public void setOnChangeListener(MyListViewChangeListener changeListener){
this.changeListener =changeListener;
}
}
还有一个接口类,用来监听滑动的变化
package com.spring.rightbutton;
public interface MyListViewChangeListener {
public void onChangeListener(String str);
}
然后在Activity里面就可以注册使用了
代码如下:
public class MainActivity extends Activity {
private Button start;
private ImageView imageView;
private int count;
private MyListView listView;
private TextView textView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
listView = (MyListView) findViewById(R.id.mylistview);
textView = (TextView) findViewById(R.id.current_text);
listView.setOnChangeListener(new MyListViewChangeListener() {
@Override
public void onChangeListener(String str) {
if(str.equals("")){
textView.setVisibility(View.GONE);
}else{
textView.setVisibility(View.VISIBLE);
textView.setText(str);
}
}
});
}
}