Android ListView A-Z sidebar Letter Sorting, click twist to semi-circle, androidlistview

Android ListView A-Z sidebar Letter Sorting, click twist to semi-circle, androidlistview

Respect others' labor results, reprinted please note (http://blog.csdn.net/u010949962/article/details/42198235

Recently in do address book see 360 address book and Sony built-in Address Book has this effect, is to click the contact list of A-Z sidebar, The A-Z bar will be distorted into a half circle, half circle can move along with fingers in A-Z. Sony mobile phones are relatively advanced, and the distortion and recovery process has a damping effect. If 360 has no effect, it is scaled down. I achieved a 360 effect touch the same, A-Z sidebar.

I. Implementation Principles:

We know that the Y value of the coordinates of each letter in the normal A-Z bar should be the same (at least the same), so the three vertical straight when drawn out. Therefore, you only need to follow the steps below to achieve the effect shown in the figure:

1. when the A-Z bar is touched, use the setLayoutParams () method to change its width (this column is 100dp) make it have enough space to display the drawn semi-circle effect (in this example, the normal width is 30dp ). Note that when setLayoutParams () is called, we need to recalculate the coordinates of each letter as needed to keep the A-Z bar unchanged on the screen.

2. after the width is adjusted, it is necessary to obtain the coordinates of the letters currently touched in the A-Z in the vertical line (both the M horizontal line and the intersection of the A-Z vertical line) as the center of the distorted semi-circle, M is currently touched, then the center of the A-Z bar is not distorted when M position.

3. After the center is determined, we need the radius ., We draw 7 letters on the semi-circle, then the length of the blank space in the vertical line of the A-Z column is, the diameter of the semi-circle. We can easily see that the diameter is the length of 7 letters, and we can easily calculate the height of each letter. Again, we get the radius value.

4. Find the coordinates of the seven letters. First, let's take a look at the Android angle. In the figure, the Q angle is 90, M is 180, and I is 270. The offset angles of each letter are J -- 247.5, respectively, K -- 225, L -- 202.5,

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

After obtaining the radius, angle, and Center Coordinate O (centerX, centerY), you can use the following formula to obtain the coordinates of the seven letters

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

Ii. Entire code(Respect others' labor results, reprinted please note (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;}@Overridepublic 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() {@Overridepublic 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() {@Overridepublic 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;}}