Android ListView A-Z侧边栏字母排序，点击处扭曲成半圆

标签：android   通讯录   a-z 扭曲 半圆   

         最近在做通讯录看到360通讯录和索尼系统内置通讯录有这个效果，就是点击联系人列表的A-Z侧边栏时，A-Z栏的被触摸处会扭曲成半圆，半圆可以随着手指在A-Z移动。索尼手机的比较高级，扭曲和恢复的过程有阻尼效果，360的没有任何效果就一伸一缩。所本人实现了个360效果一摸一样的，A-Z侧边栏。

    一.实现原理讲解：

           我们知道正常的A-Z栏每个字母的坐标的Y值应该是一样的(起码差不多一样)，所以绘制出来的时候三竖直的。因此我只要按照如下步骤，就可以实现图中的效果：

           1.当A-Z栏被触摸时，通过setLayoutParams()方法改变他的宽度(本列为100dp)使得它有足够的空间显示绘制的半圆效果(本例正常状态的宽度为30dp)。这里需要注意的是，当setLayoutParams()调用后，我们要保持A-Z栏在屏幕的位置不变，就要根据情况重新计算每个字母的坐标。

           2.在宽度调好之后，要获取当前被触摸的字母的在A-Z在竖直线上的坐标(既途中M水平线和A-Z竖直线的交点)作为扭曲半圆的圆心，如图当前被触摸的为M，那么圆心在A-Z栏没被扭曲时M的位置。

           3.在确定好圆心之后，我们要求半径。如图，我们把7个字母绘制在了半圆上，那么A-Z栏竖直线的空白处长度就为，半圆的直径。可以轻易的看出直径是7个字母的长度，我们可以很容易的计算出每个字母的高度。再次我们获得了半径的值

           4.求这七个字母的坐标。首先， 来理一理Android的角度问题，图中Q所在角度为90，M为180，I为270；得出每个字母的偏移角度分别为：J -- 247.5, K -- 225, L --202.5,

M -- 180, N -- 157.5, O -- 135, P -- 112.5。

          在获得半径radius， 角度arc ，和圆心坐标O(centerX, centerY)后通过如下公式就可以球道这七个字母的坐标

          x = (float) (centerX + radius * Math.cos(arc * Math.PI / 180));
          y = (float) (centerY + radius * Math.sin(arc * Math.PI / 180));

      二.整个代码(尊重别人劳动成果，转载请注明 处(http://blog.csdn.net/u010949962/article/details/42198235))：

package xu.ye.view.ui;

import java.util.HashMap;

import xu.ye.R;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.TextView;




/**  
 * @author  huangxin
 */
public class QuickAlphabeticBar extends ImageButton {
	
	public static final String TAG = "QuickAlphabeticBar";
	
	public static final int DEFAULT_SCREEN_HEIGHT = 800;
	
	public static final int DEFAULT_TEXT_SIZE = 20;
	
	private TextView mDialogText;
	private Handler mHandler;
	private ListView mList;
	private float mHight;
	
	private String[] letters = new String[] { 
			"#", "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" };
	
	private HashMap<String, Integer> alphaIndexer;
	
	private float centerXY[] = null;
	
	private int singleHeight;
	
	private int height;
	
	private int width;
	
	private float arc = 0;
	
	private float radius;
	
	private float normalWidth;
	private float selectedWidth;
	private boolean isselectedState = false;
	
	private int textSize;
	
	private int startPos = -1;
	private int endPos = -1; 
	
	private Context context;
	
	private float measureTextSize = -1;
	
	private int screenWidth;
	
	private int screenHeight;
	
	
	public QuickAlphabeticBar(Context context) {
		super(context);
		 init(context);
	}

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

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

	public void setScreenWidth(int screenWidth) {
		this.screenWidth = screenWidth;
	}

	public void setScreenHeight(int screenHeight) {
		this.screenHeight = screenHeight;
	}

	private void init(Context context){
		this.context = context;
		//textSize = getTextSizeFormRatio();
		textSize = 10;
		normalWidth = getResources().getDimensionPixelSize(R.dimen.azbar_normal_width);
		selectedWidth = getResources().getDimensionPixelSize(R.dimen.azbar_selected_width);
	}
	
	public void init(Activity ctx) {
		mDialogText = (TextView) ctx.findViewById(R.id.fast_position);
		mDialogText.setVisibility(View.INVISIBLE);
		mHandler = new Handler();
	}
	
	public void setListView(ListView mList) {
		this.mList = mList;
	}

	public void setAlphaIndexer(HashMap<String, Integer> alphaIndexer) {
		this.alphaIndexer = alphaIndexer;
	}

	public void setHight(float mHight) {
		this.mHight = mHight;
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) 	{
		int act = event.getAction();
		float y = event.getY();
		float x = event.getX();
		final int oldChoose = choose;
		
		singleHeight = height / letters.length;
		radius = 8 * singleHeight / 2;

		int selectIndex = (int) (y / (mHight / letters.length));		
		if (selectIndex > -1 && selectIndex < letters.length) {
			String key = letters[selectIndex];
			if (alphaIndexer.containsKey(key)) {
				int pos = alphaIndexer.get(key);
				if (mList.getHeaderViewsCount() > 0) {
					this.mList.setSelectionFromTop(
							pos + mList.getHeaderViewsCount(), 0);
				} else {
					this.mList.setSelectionFromTop(pos, 0);
				}
			}

			mDialogText.setText(letters[selectIndex]);
			arc = 0;

			if(!isselectedState){
				isselectedState = true;
				//int selected = (int) (centerXY[0] - (radius + paint.measureText(letters[selectIndex])));
				setLayoutParams((int) selectedWidth);
				
			}
		}
		
		switch (act) {
		case MotionEvent.ACTION_DOWN:
			
			showBkg = true;

			if (oldChoose != selectIndex) {
				if (selectIndex >= 0 && selectIndex < letters.length) {
					choose = selectIndex;
					invalidate();
				}
			}

			if (mHandler != null) {
				mHandler.post(new Runnable() {
					@Override
					public void run() {
						if (mDialogText != null
								&& mDialogText.getVisibility() == View.INVISIBLE) {
							mDialogText.setVisibility(VISIBLE);
						}
					}
				});
			}
			break;
		case MotionEvent.ACTION_MOVE:
			if(x < selectedWidth * 0.5 && isselectedState){
				reseAlphabeticBar();
				return super.onTouchEvent(event);
			}
			if (oldChoose != selectIndex) {
				if (selectIndex >= 0 && selectIndex < letters.length) {
					choose = selectIndex;
					invalidate();
				}
			}
			break;
		case MotionEvent.ACTION_UP:
			reseAlphabeticBar();
			break;
		case MotionEvent.ACTION_CANCEL:
			reseAlphabeticBar();
			break;
		default:
			break;
		}

		return super.onTouchEvent(event);
	}
	
	
	private void reseAlphabeticBar(){
		centerXY = null;
		showBkg = false;
		choose = -1;
		isselectedState = false;
		arc = 0;
		setLayoutParams((int) normalWidth);
		if (mHandler != null) {
			mHandler.post(new Runnable() {
				@Override
				public void run() {
					if (mDialogText != null
							&& mDialogText.getVisibility() == View.VISIBLE) {
						mDialogText.setVisibility(INVISIBLE);
						invalidate();
					}
				}
			});
		}
	}

	
	private void setLayoutParams(int width){
		RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(width, 
				RelativeLayout.LayoutParams.MATCH_PARENT);
		lp.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
		lp.addRule(RelativeLayout.BELOW, R.id.acbuwa_topbar);
		setLayoutParams(lp);
	}
	
	//TODO:
	Paint paint = new Paint();
	boolean showBkg = false;
	int choose = -1;

	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		/*if (showBkg) {//???ñ????????
			canvas.drawColor(Color.parseColor("#b20264"));
		}*/

		height = getHeight();
		width = (int) getWidth();
		
		getStartAndEndPosFromArg();
		
		boolean flag = false;
		for (int i = 0; i < letters.length; i++) {
			paint.setColor(getResources().getColor(android.R.color.black));
			paint.setTextSize(textSize);
			Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.NORMAL);
			paint.setTypeface(font);
			paint.setAntiAlias(true); 
			
			measureTextSize = paint.measureText(letters[i]);
			
			float xPos, yPos;
			if(isselectedState){
				xPos = selectedWidth - normalWidth / 2 -  measureTextSize / 2;
			}else{
				xPos = normalWidth / 2 - measureTextSize / 2;
			}
			
			yPos = singleHeight * i + singleHeight;
			
			if (i == choose) {
				paint.setColor(Color.parseColor("#00BFFF"));
				paint.setFakeBoldText(true);
			}
			
			if((i >= startPos && i <= endPos) && choose != -1 && isselectedState){
				
				if(centerXY == null){
					centerXY = new float[2];
					centerXY[0] = selectedWidth - normalWidth / 2 - measureTextSize / 2;
					centerXY[1] = singleHeight * choose + singleHeight;
				}

				if (!flag) {
					getStartPosFromArg(startPos);
					flag = true;
				}
				
				float[] arcXY = getXYFormArg();
				xPos  =  arcXY[0];
				yPos  =  arcXY[1];

				arc = (float) (arc - 22.5);
				int size = getArgLetterTextSize(i);
				paint.setTextSize(size);
			}
			canvas.drawText(letters[i], xPos, yPos, paint);
			paint.reset();
		}
		centerXY = null;
	}
	
	private void getStartAndEndPosFromArg(){
		if(choose != -1){
			if(choose <= 3){
				startPos = 0;
			}else{
				startPos = choose - 3;
			}

			if(choose - letters.length + 4 <= 0){
				endPos = choose + 3;
			}else{
				endPos = letters.length -1;
			}
		}
	}
	
	private void getStartPosFromArg(int startPos) {

		if (startPos == choose) {
			arc = 180;
		} else if (startPos + 1 == choose) {
			arc = (float) 202.5;
		} else if (startPos + 2 == choose) {
			arc = 225;
		} else if (startPos + 3 == choose) {
			arc = (float) 247.5;
		}
	}

	private int getArgLetterTextSize(int i){
		if(i == choose){
			return textSize + 8;
		}else if(i + 1 == choose || choose + 1 == i){
			return textSize + 6;
		}else if(i + 2== choose || choose + 2 == i){
			return textSize + 4;
		}else if(i + 3== choose || choose + 3 == i){
			return textSize + 4;
		}
		return textSize;
	}
	
	private float[] getXYFormArg(){
		float[] xy = new float[2];	
		xy[0] = (float) (centerXY[0] + radius * Math.cos(arc * Math.PI / 180));
		xy[1] = (float) (centerXY[1] + radius * Math.sin(arc * Math.PI / 180));
		return xy;
	}
	
}

Android ListView A-Z侧边栏字母排序，点击处扭曲成半圆

标签：android   通讯录   a-z 扭曲 半圆   

原文地址：http://blog.csdn.net/u010949962/article/details/42198235