自定义View
尽人事看天意
Android开发 软件开发
展开
-
自定义View之基础概念(一)
1. TouchSlop:TouchSlop是一个常量,保存的是系统所能识别出的最小滑动距离。获取方式:ViewConfiguration.get(this).getScaledTouchSlop();2. VelocityTracker:VelocityTracker,速度追踪,通过这个类我们可以获取手指在滑动时的速度,其中包括水平和垂直方向的速度1. 在View的onTou...原创 2018-07-09 21:00:56 · 190 阅读 · 0 评论 -
自定义ViewGroup之游标卡尺的实现
效果图预览 1. 分析1. 游标卡尺嘛首先得绘制一个尺子吧2. 有了尺子不得绘制刻度线3. 绘制具体刻度值4. 还要绘制能拨动的按钮,不然怎么叫游标卡尺5. 拨动尺子的时候应该是能实时看到数据2. 技术实现原理1. 尺子组成是一个长长的进度条加上带刻度线和刻度值的数据2. 进度条可以用canvas.drawRect画一个矩形3. 刻度线和刻度值分别用canvas...原创 2018-07-11 23:11:58 · 2209 阅读 · 0 评论 -
自定义ViewGroup之仿奥运五环的实现
图片预览 1. 分析和实现原理1. 自定义一个圆环2. 自定义ViewGroup,然后添加圆环3. onMeasue和onLayout处理4. 绘制文字2. 绘制圆环//平移坐标系到中心点canvas.translate(mCenterX,mCenterY);mPaint.setColor(mRingColor);//两种思路 画圆 或者画圆环canvas...原创 2018-07-11 22:22:09 · 401 阅读 · 0 评论 -
自定义ViewGroup之流式布局的实现
效果图预览1. 分析1. 流式布局就是一行可能有多个控件超过一行自动换行 2. 在onMeasure中计算子控件的宽度,如果子控件的宽度已经超过父控件的宽度了就自动换行,高度累加。3. onLayout中控制每一个子控件的左上右下的布局2. onMeasure处理 //记录每一行的宽度,width不断取最大宽度但是不能大于行的宽度 int lineWidth = 0;...原创 2018-07-11 21:58:48 · 485 阅读 · 0 评论 -
自定义ViewGroup之自定义布局的实现
图片预览 1. 分析1. 自定义简易FrameLayout 分别左上,右上,左下,右下4个子View2. 自定义简易LinearLayout,实现横向和纵向布局3. 自定义简易RelativeLayout,实现layout_alignParentXXX方法2. 实现原理1. 自定义ViewGroup主要是复写onMeasure测量每一个子View的宽高,复写onLayo...原创 2018-07-11 21:33:30 · 3432 阅读 · 1 评论 -
自定义View之钟表盘实现
效果图预览 gif图片录制的不是很清晰 1. 分析和技术实现1. 绘制一个外圆和一个红色的内圆,还需要绘制中间的一个小圆点2. 绘制刻度,这里我才用了旋转画布的操作来简化计算3. 主要就是canvas的操作,canvas.save和canvas.restore成对出现,保证当前画布操作不会影响其他的4. 因为秒钟要每秒更新一次,需要调用postInvalidateDelaye...原创 2018-07-10 23:34:39 · 477 阅读 · 0 评论 -
自定义View实战之仿雷达蜘蛛网实现
效果图预览 1. 分析1. 绘制多边形2. 连接多边形各顶点3. 绘制多边形各个顶点的文字4. 绘制每一块的刻度5. 造一些假数据用于绘制数据区域2. 技术实现原理1. PathMeasure可以获取任意正多边形各个坐标的余弦值、正弦值2. 连线闭合采用Path类实现3. 绘制文字采用canvas自带的canvas.drawText方法 不过需要计算角度4. ...原创 2018-07-10 22:11:24 · 332 阅读 · 0 评论 -
自定义View实战之仿QQ小红点实现
效果图预览 1. 分析1. QQ拖拽小红点实现这个主要是用到的二阶贝塞尔曲线2. 在可拖拽范围内实现小红点的拖拽回弹动画处理3. 如果超出了最大拖拽范围 松手时也在拖拽范围之外,则做松手动画处理4. 如果超出了最大拖拽范围 松手时在拖拽范围之内,则把小红点复位2. 实现原理1. 二阶贝塞尔曲线可以用path相关方法实现,然后用canvas.drawPath2. 分别...原创 2018-07-10 21:47:33 · 565 阅读 · 0 评论 -
自定义View实战之饼状图效果实现
效果图预览 1. 分析1. 饼状图这个首先需要确定几块饼,确定每一块饼需要绘制的角度2. 根据饼的范围计算百分比的坐标位置3. 动画处理4. 中间白色圆和文字的绘制2. 实现原理1. 绘制各个饼,可以有两种实现方式 一种通过canvas.drawArc然后中间部分用白色圆给盖住,另一种方式是Path.arcTo然后用path.op方法取交集2. 绘制中间文字和白色...原创 2018-07-10 21:16:13 · 488 阅读 · 0 评论 -
自定义View实战之渐变,可拨动,带动画圆环控件实现
效果图预览 1. 分析1. 绘制中间数字2. 绘制带刻度的圆环 考虑分成若干等份3. 绘制渐变圆环 需要用到渐变相关属性4. 动画处理的同时需要考虑时时计算角度5. 圆环开关控制按钮的波动范围处理2. 实现原理1. 绘制文字这个简单2. 绘制刻度圆环 分等份 用canvas.drawArc画若干圆环3. 绘制渐变圆环,需要用到Paint的setShader方法...原创 2018-07-10 20:54:02 · 474 阅读 · 0 评论 -
自定义View实战之仿土豆Loading实现
图片预览 1. 分析1. 画上面两个小圆点 (眼睛)2. 画下面半个圆环3. 动画处理2. 实现原理1. 绘制小圆点 绘制辅助坐标系 2. 绘制半个圆环3. loading转动过程动画处理4. 角度计算3. 初始化一些东西 private void initPaint() { //画圆环 mPaint = new Paint();...原创 2018-07-09 22:01:12 · 427 阅读 · 0 评论 -
自定义View实战之开关按钮实现
图片预览 1. 分析1. 开关按钮这个可以考虑用两个图片来实现 2. 一个背景图片,一个开关图片3. 通过手势移动切换开关状态 换图4. 然后做动画处理5. 当然可以完全自定义 画两个圆角矩形 切换的时候重绘控件2. 实现原理1. 需要实现onMeasure处理控件宽高为wrap_content时的宽高2. 考虑用图片做开关背景还是完全自定义,加一个字段区分3....原创 2018-07-09 21:47:01 · 808 阅读 · 0 评论 -
自定义View之基础概念(三)
1. Matrix原理Matrix是一个矩阵,主要功能是坐标映射,数值转换。1.缩放(Scale)2.错切(Skew)3.旋转(Rotate)4.平移(Translate)2. Matrix详解setPolyToPolyboolean setPolyToPoly ( float[] src, // 原始数组 src [x,y],存储内容为一组点 ...原创 2018-07-09 21:21:55 · 165 阅读 · 0 评论 -
自定义View之基础概念(二)
1. MotionEvent中 get 和 getRaw 的区别event.getX(); //触摸点相对于其所在组件坐标系的坐标event.getY();event.getRawX(); //触摸点相对于屏幕默认坐标系的坐标event.getRawY();2. 角度和弧度的换算关系圆一周对应的角度为360度(角度),对应的弧度为2π弧度。故得等价关...原创 2018-07-09 21:11:37 · 168 阅读 · 0 评论 -
自定义View系列之源代码下载
1. 自定义View系列自定义View实战之开关按钮实现自定义View实战之仿土豆Loading实现自定义View实战之渐变,可拨动,带动画圆环控件实现自定义View实战之饼状图效果实现自定义View实战之仿QQ小红点实现自定义View实战之仿雷达蜘蛛网实现自定义View之钟表盘实现2. 自定义ViewGroup系列自定义ViewGroup之自定义布局的实现...原创 2018-07-22 17:39:13 · 321 阅读 · 0 评论