现在的位置: 首页 > 综合 > 正文

android通讯录右边字母过滤栏UI设计

2016年05月21日 ⁄ 综合 ⁄ 共 3703字 ⁄ 字号 评论关闭

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

抱歉!评论已关闭.