11.粘性控件

粘性控件 （对View的自定义）
* 应用场景: 未读提醒的清除
* 功能实现:
> 1. 画静态图 OK
> 2. 把静态的数值变成变量(计算得到真实的变量) OK 
> 3. 不断地修改变量, 重绘界面, 动起来了.
> 4. 功能分析:
    a. 拖拽超出范围,断开, 松手, 消失
    b. 拖拽超出范围,断开,放回去了,恢复
    c. 拖拽没超出范围, 松手,弹回去
240px-Bezier_2_big.gif240px-Bezier_3_big.gif

没有布局：
MainActivity
  1. public class MainActivity extends Activity {
  3. 	@Override
  4. 	protected void onCreate(Bundle savedInstanceState) {
  5. 		super.onCreate(savedInstanceState);
  6. 		requestWindowFeature(Window.FEATURE_NO_TITLE);
  7. 		setContentView(new GooView(MainActivity.this));
  8. 	}
  10. }
Utils
  2. public class Utils {
  4. 	public static Toast mToast;
  6. 	public static void showToast(Context mContext, String msg) {
  7. 		if (mToast == null) {
  8. 			mToast = Toast.makeText(mContext, "", Toast.LENGTH_SHORT);
  9. 		}
  10. 		mToast.setText(msg);
  11. 		mToast.show();
  12. 	}
  13. 	
  14. 	/**
  15. 	 * dip 转换成 px
  16. 	 * @param dip
  17. 	 * @param context
  18. 	 * @return
  19. 	 */
  20. 	public static float dip2Dimension(float dip, Context context) {
  21. 		DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
  22. 		return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dip, displayMetrics);
  23. 	}
  24. 	/**
  25. 	 * @param dip
  26. 	 * @param context
  27. 	 * @param complexUnit {@link TypedValue#COMPLEX_UNIT_DIP} {@link TypedValue#COMPLEX_UNIT_SP}}
  28. 	 * @return
  29. 	 */
  30. 	public static float toDimension(float dip, Context context, int complexUnit) {
  31. 		DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
  32. 		return TypedValue.applyDimension(complexUnit, dip, displayMetrics);
  33. 	}
  35. 	/** 获取状态栏高度
  36. 	 * @param v
  37. 	 * @return
  38. 	 */
  39. 	public static int getStatusBarHeight(View v) {
  40. 		if (v == null) {
  41. 			return 0;
  42. 		}
  43. 		Rect frame = new Rect();
  44. 		v.getWindowVisibleDisplayFrame(frame);
  45. 		return frame.top;
  46. 	}
  48. 	public static String getActionName(MotionEvent event) {
  49. 		String action = "unknow";
  50. 		switch (MotionEventCompat.getActionMasked(event)) {
  51. 		case MotionEvent.ACTION_DOWN:
  52. 			action = "ACTION_DOWN";
  53. 			break;
  54. 		case MotionEvent.ACTION_MOVE:
  55. 			action = "ACTION_MOVE";
  56. 			break;
  57. 		case MotionEvent.ACTION_UP:
  58. 			action = "ACTION_UP";
  59. 			break;
  60. 		case MotionEvent.ACTION_CANCEL:
  61. 			action = "ACTION_CANCEL";
  62. 			break;
  63. 		case MotionEvent.ACTION_SCROLL:
  64. 			action = "ACTION_SCROLL";
  65. 			break;
  66. 		case MotionEvent.ACTION_OUTSIDE:
  67. 			action = "ACTION_SCROLL";
  68. 			break;
  69. 		default:
  70. 			break;
  71. 		}
  72. 		return action;
  73. 	}
  74. }
GooView
  1. /**
  2.  * 粘性控件
  3.  * @author poplar
  4.  *
  5.  */
  6. public class GooView extends View {
  8. 	private static final String TAG = "TAG";
  9. 	private Paint mPaint;
  11. 	public GooView(Context context) {
  12. 		this(context, null);
  13. 	}
  15. 	public GooView(Context context, AttributeSet attrs) {
  16. 		this(context, attrs , 0);
  17. 	}
  19. 	public GooView(Context context, AttributeSet attrs, int defStyle) {
  20. 		super(context, attrs, defStyle);
  21. 		
  22. 		// 做初始化操作
  23. 		
  24. 		mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  25. 		mPaint.setColor(Color.RED);
  26. 	}
  28. 	PointF[] mStickPoints = new PointF[]{
  29. 			new PointF(250f, 250f),
  30. 			new PointF(250f, 350f)
  31. 	};
  32. 	PointF[] mDragPoints = new PointF[]{
  33. 			new PointF(50f, 250f),
  34. 			new PointF(50f, 350f)
  35. 	};
  36. 	PointF mControlPoint = new PointF(150f, 300f);
  37. 	PointF mDragCenter = new PointF(80f, 80f);
  38. 	float mDragRadius = 14f;
  39. 	PointF mStickCenter = new PointF(150f, 150f);
  40. 	float mStickRadius = 12f;
  41. 	private int statusBarHeight;
  42. 	float farestDistance = 80f;
  43. 	private boolean isOutofRange;
  44. 	private boolean isDisappear;
  45. 	
  46. 	@Override
  47. 	protected void onDraw(Canvas canvas) {
  48. 		
  49. 		// 计算连接点值, 控制点, 固定圆半径
  51. 			// 1. 获取固定圆半径(根据两圆圆心距离)
  52. 			float tempStickRadius = getTempStickRadius();
  53. 			
  54. 			// 2. 获取直线与圆的交点
  55. 			float yOffset = mStickCenter.y - mDragCenter.y;
  56. 			float xOffset = mStickCenter.x - mDragCenter.x;
  57. 			Double lineK = null;
  58. 			if(xOffset != 0){
  59. 				lineK = (double) (yOffset / xOffset);
  60. 			}
  61. 			// 通过几何图形工具获取交点坐标
  62. 			mDragPoints = GeometryUtil.getIntersectionPoints(mDragCenter, mDragRadius, lineK);
  63. 			mStickPoints = GeometryUtil.getIntersectionPoints(mStickCenter, tempStickRadius, lineK);
  64. 		
  65. 			// 3. 获取控制点坐标
  66. 			mControlPoint = GeometryUtil.getMiddlePoint(mDragCenter, mStickCenter);
  67. 			
  68. 			
  69. 		// 保存画布状态
  70. 		canvas.save();
  71. 		canvas.translate(0, -statusBarHeight);
  72. 		
  73. 			// 画出最大范围(参考用)
  74. 			mPaint.setStyle(Style.STROKE);
  75. 			canvas.drawCircle(mStickCenter.x, mStickCenter.y, farestDistance, mPaint);
  76. 			mPaint.setStyle(Style.FILL);
  77. 			
  78. 		if(!isDisappear){
  79. 			if(!isOutofRange){
  80. 				// 3. 画连接部分
  81. 				Path path = new Path();
  82. 					// 跳到点1
  83. 				path.moveTo(mStickPoints[0].x, mStickPoints[0].y);
  84. 					// 画曲线1 -> 2
  85. 				path.quadTo(mControlPoint.x, mControlPoint.y, mDragPoints[0].x, mDragPoints[0].y);
  86. 					// 画直线2 -> 3
  87. 				path.lineTo(mDragPoints[1].x, mDragPoints[1].y);
  88. 					// 画曲线3 -> 4
  89. 				path.quadTo(mControlPoint.x, mControlPoint.y, mStickPoints[1].x, mStickPoints[1].y);
  90. 				path.close();
  91. 				canvas.drawPath(path, mPaint);
  92. 				
  93. 					// 画附着点(参考用)
  94. 					mPaint.setColor(Color.BLUE);
  95. 					canvas.drawCircle(mDragPoints[0].x, mDragPoints[0].y, 3f, mPaint);
  96. 					canvas.drawCircle(mDragPoints[1].x, mDragPoints[1].y, 3f, mPaint);
  97. 					canvas.drawCircle(mStickPoints[0].x, mStickPoints[0].y, 3f, mPaint);
  98. 					canvas.drawCircle(mStickPoints[1].x, mStickPoints[1].y, 3f, mPaint);
  99. 					mPaint.setColor(Color.RED);
  100. 				
  101. 				// 2. 画固定圆
  102. 				canvas.drawCircle(mStickCenter.x, mStickCenter.y, tempStickRadius, mPaint);
  103. 			}
  104. 			
  105. 			// 1. 画拖拽圆
  106. 			canvas.drawCircle(mDragCenter.x, mDragCenter.y, mDragRadius, mPaint);
  107. 		}
  109. 		
  110. 		// 恢复上次的保存状态
  111. 		canvas.restore();
  112. 	}
  114. 	// 获取固定圆半径(根据两圆圆心距离)
  115. 	private float getTempStickRadius() {
  116. 		float distance = GeometryUtil.getDistanceBetween2Points(mDragCenter, mStickCenter);
  117. 		
  118. //		if(distance> farestDistance){
  119. //			distance = farestDistance;
  120. //		}
  121. 		distance = Math.min(distance, farestDistance);
  122. 		
  123. 		// 0.0f -> 1.0f
  124. 		float percent = distance / farestDistance;
  125. 		Log.d(TAG, "percent: " + percent);
  126. 		
  127. 		// percent , 100% -> 20% 
  128. 		return evaluate(percent, mStickRadius, mStickRadius * 0.2f);
  129. 	}
  130. 	
  131.     public Float evaluate(float fraction, Number startValue, Number endValue) {
  132.         float startFloat = startValue.floatValue();
  133.         return startFloat + fraction * (endValue.floatValue() - startFloat);
  134.     }
  136. 	@Override
  137. 	public boolean onTouchEvent(MotionEvent event) {
  138. 		float x;
  139. 		float y;
  140. 		
  141. 		switch (event.getAction()) {
  142. 			case MotionEvent.ACTION_DOWN:
  143. 				isOutofRange = false;
  144. 				isDisappear = false;
  145. 				x = event.getRawX();
  146. 				y = event.getRawY();
  147. 				updateDragCenter(x, y);
  148. 				
  149. 				break;
  150. 			case MotionEvent.ACTION_MOVE:
  151. 				x = event.getRawX();
  152. 				y = event.getRawY();
  153. 				updateDragCenter(x, y);
  155. 				// 处理断开事件
  156. 				float distance = GeometryUtil.getDistanceBetween2Points(mDragCenter, mStickCenter);
  157. 				if(distance > farestDistance){
  158. 					isOutofRange = true;
  159. 					invalidate();
  160. 				}
  161. 				
  162. 				break;
  163. 			case MotionEvent.ACTION_UP:
  164. 				if(isOutofRange){
  165. 					float d = GeometryUtil.getDistanceBetween2Points(mDragCenter, mStickCenter);
  166. 					if(d > farestDistance){
  167. 						// a. 拖拽超出范围,断开, 松手, 消失
  168. 						isDisappear = true;
  169. 						invalidate();
  170. 					}else {
  171. 						//b. 拖拽超出范围,断开,放回去了,恢复
  172. 						updateDragCenter(mStickCenter.x, mStickCenter.y);
  173. 					}
  174. 					
  175. 				}else {
  176. 	//				c. 拖拽没超出范围, 松手,弹回去		
  177. 					final PointF tempDragCenter = new PointF(mDragCenter.x, mDragCenter.y);
  178. 					
  179. 					ValueAnimator mAnim = ValueAnimator.ofFloat(1.0f);
  180. 					mAnim.addUpdateListener(new AnimatorUpdateListener() {
  181. 						
  182. 						@Override
  183. 						public void onAnimationUpdate(ValueAnimator mAnim) {
  184. 							// 0.0 -> 1.0f
  185. 							float percent = mAnim.getAnimatedFraction();
  186. 							PointF p = GeometryUtil.getPointByPercent(tempDragCenter, mStickCenter, percent);
  187. 							updateDragCenter(p.x, p.y);
  188. 						}
  189. 					});
  190. 					mAnim.setInterpolator(new OvershootInterpolator(4));
  191. 					mAnim.setDuration(500);
  192. 					mAnim.start();
  193. 				}
  194. 				
  195. 				break;
  197. 		default:
  198. 			break;
  199. 		}
  200. 		
  201. 		return true;
  202. 	}
  204. 	/**
  205. 	 * 更新拖拽圆圆心坐标,并重绘界面
  206. 	 * @param x
  207. 	 * @param y
  208. 	 */
  209. 	private void updateDragCenter(float x, float y) {
  210. 		mDragCenter.set(x, y);
  211. 		invalidate();
  212. 	}
  213. 	
  214. 	@Override
  215. 	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  216. 		super.onSizeChanged(w, h, oldw, oldh);
  217. 		
  218. 		statusBarHeight = Utils.getStatusBarHeight(this);
  219. 	}
  220. 	
  221. 	
  222. }
GeometryUtil
  1. /**
  2.  * 几何图形工具
  3.  */
  4. public class GeometryUtil {
  5. 	
  6. 	/**
  7. 	 * As meaning of method name.
  8. 	 * 获得两点之间的距离
  9. 	 * @param p0
  10. 	 * @param p1
  11. 	 * @return
  12. 	 */
  13. 	public static float getDistanceBetween2Points(PointF p0, PointF p1) {
  14. 		float distance = (float) Math.sqrt(Math.pow(p0.y - p1.y, 2) + Math.pow(p0.x - p1.x, 2));
  15. 		return distance;
  16. 	}
  17. 	
  18. 	/**
  19. 	 * Get middle point between p1 and p2.
  20. 	 * 获得两点连线的中点
  21. 	 * @param p1
  22. 	 * @param p2
  23. 	 * @return
  24. 	 */
  25. 	public static PointF getMiddlePoint(PointF p1, PointF p2) {
  26. 		return new PointF((p1.x + p2.x) / 2.0f, (p1.y + p2.y) / 2.0f);
  27. 	}
  28. 	
  29. 	/**
  30. 	 * Get point between p1 and p2 by percent.
  31. 	 * 根据百分比获取两点之间的某个点坐标
  32. 	 * @param p1
  33. 	 * @param p2
  34. 	 * @param percent
  35. 	 * @return
  36. 	 */
  37. 	public static PointF getPointByPercent(PointF p1, PointF p2, float percent) {
  38. 		return new PointF(evaluateValue(percent, p1.x , p2.x), evaluateValue(percent, p1.y , p2.y));
  39. 	}
  40. 	
  41. 	/**
  42. 	 * 根据分度值，计算从start到end中，fraction位置的值。fraction范围为0 -> 1
  43. 	 * @param fraction
  44. 	 * @param start
  45. 	 * @param end
  46. 	 * @return
  47. 	 */
  48. 	public static float evaluateValue(float fraction, Number start, Number end){
  49. 		return start.floatValue() + (end.floatValue() - start.floatValue()) * fraction;
  50. 	}
  51. 	
  52. 	
  53. 	/**
  54. 	 * Get the point of intersection between circle and line.
  55. 	 * 获取 通过指定圆心，斜率为lineK的直线与圆的交点。
  56. 	 * 
  57. 	 * @param pMiddle The circle center point.
  58. 	 * @param radius The circle radius.
  59. 	 * @param lineK The slope of line which cross the pMiddle.
  60. 	 * @return
  61. 	 */
  62. 	public static PointF[] getIntersectionPoints(PointF pMiddle, float radius, Double lineK) {
  63. 		PointF[] points = new PointF[2];
  64. 		
  65. 		float radian, xOffset = 0, yOffset = 0; 
  66. 		if(lineK != null){
  67. 			radian= (float) Math.atan(lineK);
  68. 			xOffset = (float) (Math.sin(radian) * radius);
  69. 			yOffset = (float) (Math.cos(radian) * radius);
  70. 		}else {
  71. 			xOffset = radius;
  72. 			yOffset = 0;
  73. 		}
  74. 		points[0] = new PointF(pMiddle.x + xOffset, pMiddle.y - yOffset);
  75. 		points[1] = new PointF(pMiddle.x - xOffset, pMiddle.y + yOffset);
  76. 		
  77. 		return points;
  78. 	}
  79. }





附件列表

     

    posted @ 2015-12-12 22:19  梦和远方  阅读(248)  评论(0)  编辑  收藏  举报