zoukankan      html  css  js  c++  java

  • 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. }





    附件列表
    • 相关阅读:
      Sql获取表中随机1到n条数据
      SQLite相关
      Eclipse自动生成api时报错“警告： 编码 GBK 的不可映射字符”
      Git基础命令
      Oracle查询结果行转列，列转行
      字符串编码方式转换
      Java字符串匹配正则表达式
      python爬虫--编码问题y
      GET与POST方法
      python爬虫（1）--Urllib库的基本使用
    • 原文地址：https://www.cnblogs.com/sixrain/p/5041965.html
    Copyright © 2011-2022 走看看