类通讯录右侧滑动的字母条

package com.lk.test;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import com.lk.test.R;

public class SlideLetterBar extends View {
	public interface OnSlideListener {
		void onSlide(int index);
	}
	
	
	private int itemCount = 26;
	private int mCurrentIndex;
	
	private int mItemHeight;
	private int mItemPadding;
	private int settingTextSzie;

	private boolean isTouching;

	private Paint mPaint;
	private RectF mBackgroundRect;
	private OnSlideListener mListener;

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

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

	public SlideLetterBar(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}
	public void setOnSlideListener(OnSlideListener listener) {
		mListener = listener;
	}
	private void init() {
		mPaint = new Paint();
		mPaint.setAntiAlias(true);
		mPaint.setStyle(Style.FILL);
		mPaint.setColor(Color.BLACK);
		settingTextSzie = getResources().getDimensionPixelSize(R.dimen.size);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		//MotionEvent.ACTION_MOVE的时候isTouching为true,这时候会画出圆角的背景
		if(isTouching){
			//取出画笔用来画字母的颜色缓存
			int textColor = mPaint.getColor();
			mPaint.setColor(Color.BLUE);
			//第二第三个参数 rx,ry代表你所画的圆角矩形的四个圆角的宽度和高度,getMeasuredWidth()/2代表上下各两个圆角恰好画成半圆形
			canvas.drawRoundRect(mBackgroundRect, getMeasuredWidth()/2, getMeasuredWidth()/2, mPaint);
			//画完背景,赋回原来的颜色
			mPaint.setColor(textColor);
		}
		int top = 0;
		int itemTextSize = settingTextSzie;
		if(itemTextSize > mItemHeight){
			itemTextSize = mItemHeight;
		}else{
			itemTextSize = settingTextSzie;
		}
		mPaint.setTextSize(itemTextSize);
		int textWidth;
		int leftPadding;
		String itemText;
			for (int i = 0; i < itemCount; i++) {
					top = (mItemHeight*i) + getPaddingTop() + itemTextSize + mItemPadding;
					itemText = String.valueOf((char)('A' + i));
					textWidth = (int)mPaint.measureText(itemText);
					leftPadding = (getMeasuredWidth() - textWidth)/2;
					//根据算到的每个字母的x,y值画字母
					canvas.drawText(itemText, leftPadding, top, mPaint);
			}
		
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		int height=MeasureSpec.getSize(heightMeasureSpec);
		//去掉上下的padding,剩下的才是有效的高度
		mItemHeight=(height-getPaddingTop()-getPaddingBottom())/itemCount;
		mItemPadding=(int)((mItemHeight-mPaint.getTextSize())/2);
		int width=mItemHeight+getPaddingLeft()+getPaddingRight();
		setMeasuredDimension(width, heightMeasureSpec);
		//new出背景矩形
		mBackgroundRect=new RectF(0,getPaddingTop(),getMeasuredWidth(),height-getPaddingTop()-getPaddingBottom());
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		int action = event.getAction();
		switch (action) {
		case MotionEvent.ACTION_MOVE:
			isTouching = true;
			int y = (int) event.getY();
			//算出手指滑到位置的字母在所有字母中是第几位,获取手指触摸位置的y值,y减去整个字母条与父View顶部的padding,然后除以item的高度,注意padding跟margin的区别
			int touchingItemIndex = (y - getPaddingTop()) / mItemHeight;
			if (touchingItemIndex != mCurrentIndex	&& touchingItemIndex < itemCount && touchingItemIndex >= 0) {
				mCurrentIndex = touchingItemIndex;
				//如果监听器不为空,调用其重写的方法执行重写设定的动作
				if (mListener != null) {
					mListener.onSlide(mCurrentIndex);
				}
			}
			break;
		case MotionEvent.ACTION_UP:
			//手指离开字母条(屏幕),背景取消
			isTouching = false;
			break;
		default:
			break;
		}
		//主动调用onDraw
		invalidate();
		return true;
	}
}

Activity

package com.lk.test;

import android.app.Activity;
import android.os.Bundle;

public class TestActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
 	android:background="#ffffff"
    >
 <com.lk.test.SlideLetterBar
    android:layout_width="wrap_content" 
    android:layout_height="fill_parent"  
	android:padding = "4dp"
	android:textSize = "12sp" 
	android:layout_alignParentRight="true"
 /> 
</RelativeLayout>

如果想显示当前滑到的字母在屏幕中间上方,可以用TextView实现,先设为GONE,在滑到时setText并显示,并在1秒后消失(时间自己决定吧)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值