android通訊錄右邊字母過濾欄UI設計

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