通讯录中使用到的A-Z字符选择器

先看效果：

 

 

 

实现起来也很简单，就一个类，注释都有。

直接看代码：

/**
 * The component of A to Z letter Bar.
 * 这个就是A-Z字符选择器
 * 
 * @author MichaelYe
 * @since 2012-8-22
 * */
public class AtoZLetterBar extends View 
{

	OnTouchingLetterChangedListener onTouchingLetterChangedListener;

	String[] b = {"#","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"};

	int choose = -1;

	Paint paint = new Paint();

	boolean showBkg = false;

	private Drawable thumbDrawable;

	public AtoZLetterBar(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init(context);
	}

	public AtoZLetterBar(Context context, AttributeSet attrs) {
		super(context, attrs);
		init(context);
	}

	public AtoZLetterBar(Context context) {
		super(context);
		init(context);
	}

	private void init(Context context)
	{
		thumbDrawable = context.getResources().getDrawable(R.drawable.ic_launcher);
	}

	@Override
	protected void onDraw(Canvas canvas)
	{
	    super.onDraw(canvas);
	    if(showBkg)
	    {
	        canvas.drawColor(Color.parseColor("#000000"));//#40000000 3399ff
	    }
	    
				//在手指接触屏幕的地方绘制图片
		thumbDrawable.setBounds(0, location - 60, this.getWidth(), location + 60);
		thumbDrawable.draw(canvas);
	
	    int height = getHeight();
	    int width = getWidth();
	    int singleHeight = height / b.length;
	    for(int i=0;i<b.length;i++)
	    {
	       paint.setColor(Color.GRAY);
	       paint.setTypeface(Typeface.DEFAULT_BOLD);
	       paint.setAntiAlias(true);
	       if(i == choose)
	       {
	         paint.setColor(Color.parseColor("#ff3355"));//手指选中时的颜色ff3355
	         paint.setTextSize(24);
	         paint.setFakeBoldText(true);
	         
	       }
	       float xPos = width/2  - paint.measureText(b[i])/2;
	       float yPos = singleHeight * i + singleHeight;
	       canvas.drawText(b[i], xPos, yPos, paint);
	       paint.reset();
	      
	    }
    
	}

	private int location = 0;//为了得到当前用户手指点击的位置
	
	@Override
	public boolean dispatchTouchEvent(MotionEvent event) 
	{
	    final int action = event.getAction();
	    final float y = event.getY();
	    final int oldChoose = choose;
	    final OnTouchingLetterChangedListener listener = onTouchingLetterChangedListener;
	    final int c = (int) (y/getHeight()*b.length);
	
	    location = (int)y;
	    
	    switch (action) 
	    {
	        case MotionEvent.ACTION_DOWN:
	            showBkg = true;
	            if(oldChoose != c && listener != null)
	            {
	                if(c >= 0 && c< b.length)//这里的c要>=0，不然第一个字母不能正常显示
	                {
	                    listener.onTouchingLetterChanged(b[c]);
	                    choose = c;
	                    invalidate();
	                }
	            }
	
	            break;
	        case MotionEvent.ACTION_MOVE:
	            if(oldChoose != c && listener != null)
	            {
	                if(c >= 0 && c< b.length){//这里的c要>=0，不然第一个字母不能正常显示
	                    listener.onTouchingLetterChanged(b[c]);
	                    choose = c;
	                    invalidate();
	                }
	            }
	            break;
	        case MotionEvent.ACTION_UP:
	            showBkg = false;
	            choose = -1;
	            invalidate();
	            break;
	    }
	    return true;
	}

	@Override
	public boolean onTouchEvent(MotionEvent event)
	{
	    return super.onTouchEvent(event);
	}
	
	public void setOnTouchingLetterChangedListener(OnTouchingLetterChangedListener onTouchingLetterChangedListener)
	{
	    this.onTouchingLetterChangedListener = onTouchingLetterChangedListener;
	}
	
	/**
	 * 定义一个接口，用来传递所触摸的字符
	 * 
	 * */
	public interface OnTouchingLetterChangedListener
	{
	    public void onTouchingLetterChanged(String s);
	}

}

 

 

在布局文件中定义：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textview"
        android:layout_width="60dip"
        android:layout_height="60dip"
        android:layout_centerInParent="true"
        android:background="#22568971"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textSize="35dip" />

    <com.michael.component.atoz.AtoZLetterBar
        android:id="@+id/selectbar"
        android:layout_width="30dip"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:background="#7fc2e9" />

</RelativeLayout>

 

在Activity中使用

/**
 * This Activity shows how to use the component of AtoZLetterListview
 * 
 * 这个类演示了如何使用字符选择器
 * 
 * @author MichaelYe
 * @since 2012-8-22
 * */
public class MainActivity extends Activity 
{
	
	private TextView tv;
	private Handler handler;
    private OverlayThread overlayThread;
    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        tv = (TextView)findViewById(R.id.textview);
        AtoZLetterBar azBar = (AtoZLetterBar)findViewById(R.id.selectbar);
        
        handler = new Handler();
        overlayThread = new OverlayThread();
        
        OnTouchingLetterChangedListener listener = new OnTouchingLetterChangedListener() 
        {
        	/**
        	 * Use Handler to remove call backs.
        	 * Make TextView Gone 1.5 second later
        	 * 
        	 * 使用Handler来移除让TextView不可见的Runnable
        	 * 并设置1.5秒后TextView不可见
        	 * 
        	 * */
			@Override
			public void onTouchingLetterChanged(String s) 
			{
				tv.setText(s);
				tv.setVisibility(View.VISIBLE);
				handler.removeCallbacks(overlayThread);
				handler.postDelayed(overlayThread, 1500);
			}
		};
		azBar.setOnTouchingLetterChangedListener(listener);
    }
    
    /**
     * Use Runnable to make TextView Gone
     * 
     * 通过使用Runnable来控制TextView的不可见
     * */									
    private class OverlayThread implements Runnable 
    {
        @Override
        public void run() 
        {
            tv.setVisibility(View.GONE);
        }
    }

}

 

发现问题欢迎指正。

项目下载地址：https://github.com/michaelye/DemoAtoZBar