先看效果:
实现起来也很简单,就一个类,注释都有。
直接看代码:
/** * 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); } } }
发现问题欢迎指正。