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); } } }); } }