先看效果:
实现起来也很简单,就一个类,注释都有。
直接看代码:
/**
* 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