码迷，mamicode.com
首页 > 其他好文 > 详细

11.粘性控件

时间：2015-12-12 23:20:51      阅读：649      评论：0      收藏：0      [点我收藏+]

标签：

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





附件列表

     

    11.粘性控件

    标签：

    原文地址：http://www.cnblogs.com/liuyu0529/p/5041965.html
    踩
    (0)
    赞
    (0)
       
    举报
    评论 一句话评论（0）
    登录后才能评论！
    分享档案
    更多>
    2021年07月29日 (22)
    2021年07月28日 (40)
    2021年07月27日 (32)
    2021年07月26日 (79)
    2021年07月23日 (29)
    2021年07月22日 (30)
    2021年07月21日 (42)
    2021年07月20日 (16)
    2021年07月19日 (90)
    2021年07月16日 (35)
    周排行
    mamicode.com排行更多图片
    更多
    友情链接
    兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
    关于我们 - 联系我们 - 留言反馈
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码！