PS:上一篇从0开始学自定义View有博友给我留言说要看实战,今天我特意写了几个例子,供大家参考,所画的图案加上动画看着确实让人舒服,喜欢的博友可以直接拿到自己的项目中去使用,由于我这个写的是demo,代码格式写的有些乱,所以,要自己封装一下才可以使用,当然你如果真的不想封装,可以直接使用,也可以给我留言,我封装好放在github上供大家参考,也会做成依赖让大家直接添加即可

先上图再分析

可以看出图中有三种样式

  • 第一种是普通的一个label,使用场景:商品过期,促销等展示。
  • 第二种是圆形进度条,      使用场景:下载文件进度,加载视频进度,耗电量进度.....
  • 第三种是条形进度条,      使用场景:滑动调值,手机音效大小...

上面的三种,均是demo,考虑使用场景并不完善,比如说第三种条形进度条还可以加上刻度,滑动到两边需要判断越界等。那就先拿第三个来吧

条形进度条-可拖动

分析:我们想要做一个类似的控件,需要考虑的问题不只是眼睛看的到的,看不到的就好比我只能点击小红球才可以滑动,我点击其他区域是不能有任何操作的,这个时候就要判断手指down的时候是否落在了小球上。

  • 线条 : 渐变颜色,线帽格式,长度,宽度设置,父布局宽高格式设置格式设置,子view宽高格式设置
  • 球 :颜色,起始位置和终止位置要在线上,尺寸

在做之前我们先一个一个知识点解析,首先是线的渐变颜色,单独拿出

/**
* 设置进度圆环颜色(支持渐变色)
*
* @param colorArray 渐变色集合
*/
private int[] mColorArray; // 圆环渐变色
public void setProgColor(@ColorRes int[] colorArray) {
if (colorArray == null || colorArray.length < 2) return;
mColorArray = new int[colorArray.length];
for (int index = 0; index < colorArray.length; index++)
mColorArray[index] = ContextCompat.getColor(getContext(), colorArray[index]);
paint.setShader(new LinearGradient(0, 0, getMeasuredWidth(),0 , mColorArray, new float[]{0,.3F,.6F,.9F}, Shader.TileMode.MIRROR));
invalidate();
}

我们可以看到我封装成了一个方法,通过paint.setShader进行着色,方法传入的是LinearGradient对象,我们看源码,解释参数

 /**
* Create a shader that draws a linear gradient along a line.
*
* @param x0 The x-coordinate for the start of the gradient line
* @param y0 The y-coordinate for the start of the gradient line
* @param x1 The x-coordinate for the end of the gradient line
* @param y1 The y-coordinate for the end of the gradient line
* @param colors The colors to be distributed along the gradient line
* @param positions May be null. The relative positions [0..1] of
* each corresponding color in the colors array. If this is null,
* the the colors are distributed evenly along the gradient line.
* @param tile The Shader tiling mode
*/
public LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int colors[],
@Nullable float positions[], @NonNull TileMode tile) {
if (colors.length < 2) {
throw new IllegalArgumentException("needs >= 2 number of colors");
}
if (positions != null && colors.length != positions.length) {
throw new IllegalArgumentException("color and position arrays must be of equal length");
}
mType = TYPE_COLORS_AND_POSITIONS;
mX0 = x0;
mY0 = y0;
mX1 = x1;
mY1 = y1;
mColors = colors.clone();
mPositions = positions != null ? positions.clone() : null;
mTileMode = tile;
}

参数

  1. x0,y0着色的起始位置
  2. x1,y1终止位置
  3. colors区域内着色的颜色集
  4. positions区域内部划分模块,逐一着色,如:区域1-100划分为4块,第一块1-25红色,26-50蓝色..。系统会默认在两种颜色不一样的情况下进行颜色过度渲染,达到渐变的效果,所以我们不用担心出现红蓝划分明显的情况。
  5. TileMode 模式选择
    1.   CLAMP:当图片小于绘制尺寸时要进行边界拉伸来填充
    2.   REPEAT:当图片小于绘制尺寸时重复平铺
    3.   MIRROR:当图片小于绘制尺寸时镜像平铺

好了,下面我们就先画线和红点,如果有看不懂的博友,可以先看上一篇从0开始学自定义View

public void init(){
paint = new Paint();
paint.setStrokeWidth(20);//画笔宽度
paint.setStyle(Paint.Style.FILL);//填充类型
paint.setAntiAlias(true);
paint.setStrokeCap(Paint.Cap.ROUND);//线帽,半圆
paintCircle2 = new Paint();
paintCircle2.setColor(Color.RED);
paintCircle2.setStrokeWidth(5);
paintCircle2.setStyle(Paint.Style.FILL);
paintCircle2.setAntiAlias(true);
}
 @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = MeasureSpec.getSize(widthMeasureSpec);
heigth = MeasureSpec.getSize(heightMeasureSpec);
Log.e("heigth -- width ",heigth+" -- "+width);
circleX=width/2;//初始化红点坐标位置
circleY=20;
}
 int[] colors={R.color.colorPrimary,R.color.colorAccent,R.color.color_environment_serious,R.color.color_environment_mild};
@Override
protected void onDraw(Canvas canvas) { super.onDraw(canvas);
setProgColor(colors);
//绘制一条线,线帽为半圆
canvas.drawLine(50,20,width-50,20,paint);
canvas.drawCircle(circleX,circleY,15,paintCircle2);
}

到这里,线和点就已经做好了,只是静态的,下面是如何拖动,就要在onTouchEvent方法中去写了,代码都已经添加了注释  Math.abs(dhx)<50&&Math.abs(dhy)<50  是证明down的坐标点和原始球的坐标点相差范围在50内,如果小球在屏幕200,200的位置,而我们手指down的点在800,800,那么相差如此巨大,肯定不是我们想要的结果,所以,我们就认为down的坐标减去球的坐标差值最小(50内)才是我们想要的结果,这个时候我们再设置小球move的坐标(让小球跟随手指移动)。

/**
* 判断所按压的坐标和红点坐标的关系
* 如果手指按在了红点的下方,那么down-红点y坐标的绝对值如果等于或者小于半径,也就是说目前按压的就是红点,
*
* */
private boolean clickCircle(int downHeigth,int downWidth){
int dhy = downHeigth - circleY;
int dhx = downWidth - circleX;
//证明按压的是原点
if(Math.abs(dhx)<50&&Math.abs(dhy)<50){
return true;
}
return false;
}
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
return super.dispatchTouchEvent(event);
}
boolean isFlag=false;
@Override
public boolean onTouchEvent(MotionEvent event) {
int rawX = (int) event.getX();
int rawY = (int) event.getY();//获取到视图坐标,想对于外部viewgroup来说。
Log.e("raw",rawX+" --- "+rawY);
Log.e("rawwww",circleX+" --- "+circleY);
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
//如果是手指down在了红点上,move时可重绘
if(clickCircle(rawY,rawX)) {
circleX = rawX;
isFlag=true;
}else{
isFlag=false;
}
break;
case MotionEvent.ACTION_MOVE:
if(isFlag){
circleX = rawX;
invalidate();
}
break;
case MotionEvent.ACTION_UP:
isFlag=false;//抬起手指,状态恢复
break;
}
return true;//自己消费
}

下一篇是圆形进度条

自定义View实战的更多相关文章

  1. Android自定义View实战(SlideTab-可滑动的选择器)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/52178553 本文出自:[openXu的博客] 目录: 初步分析重写onDraw绘制 重写o ...

  2. 自定义View实战--实现一个清新美观的加载按钮

    本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 在 Dribble 上偶然看到了一组交互如下: 当时在心里问自己能不能做,答案肯定是能做的,不过我比较懒,觉得中间那个伸缩变化要编写 ...

  3. 高级UI晋升之自定义View实战(九)

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680 1.前言: 本文采用自定义view的方法来实现一键清除的动画这个功能. 2.效果 ...

  4. 高级UI晋升之自定义View实战(六)

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从Android 自定义属性动画&Camera动画来介绍自定义V ...

  5. 高级UI晋升之自定义View实战(五)

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从自定义View利器Canvas和Paint来进行详解 一.Canvas ...

  6. 高级UI晋升之自定义view实战(七)

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章自定义ViewGroup实现瀑布流效果来进行详解dispatchTouch ...

  7. 转载:android自定义view实战(温度控制表)!

    效果图 package cn.ljuns.temperature.view; import com.example.mvp.R; import android.content.Context;impo ...

  8. Android为TV端助力 转载:android自定义view实战(温度控制表)!

    效果图 package cn.ljuns.temperature.view; import com.example.mvp.R; import android.content.Context;impo ...

  9. 高级UI晋升之自定义View实战(八)

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章自定义流式布局来进行介绍: 一般常见的流式布局由两种,一种是横向的个数固定 ...

随机推荐

  1. qt creator源码全方面分析(4-1)

    目录 d指针和q指针 简单示例 q指针 QObject和QObjectPrivate qtcreator中的变体1 qtcreator中的变体2 小结 d指针和q指针 我们在类成员名称和使用d指针中, ...

  2. 造轮子:实现一个简易的 Spring IoC 容器

    作者:DeppWang.原文地址 我通过实现一个简易的 Spring IoC 容器,算是入门了 Spring 框架.本文是对实现过程的一个总结提炼,需要配合源码阅读,源码地址. 结合本文和源码,你应该 ...

  3. substr和substring之间的区别

    substr 和 substring都是JS 截取字符串函数,两者用法很相近,下面是两者的语法很示例: substr 方法 返回一个从指定位置开始的指定长度的子字符串.stringvar.substr ...

  4. 如何使用python进行自动网上考试

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: HIS Hacker PS:如有需要Python学习资料的小伙伴可以 ...

  5. stand up meeting 12/8/2015

    part 组员 今日工作 工作耗时/h 明日计划 工作耗时/h UI 冯晓云  --------------    --  -----------  -- PDF Reader 朱玉影         ...

  6. 数据结构之循环队列Demo

    循环队列 比较简单,循环队列主要是判断队满.队空.有效元素个数 画图说明: 假设:队的长度为5(0-4) 但是实际maxsize为6,需要一个预留空间(不存储元素)做计算 继续添加3个元素后: 出队一 ...

  7. F. 蚂蚁装修

    单点时限: 2.0 sec 内存限制: 512 MB 还有一个月就开学了,爱学习的小蚂蚁想庆祝一下!于是它要把它的“家”装修一下.首先要做的就是贴地板.小蚂蚁“家”的地面可以看成一个2∗N 的方格 , ...

  8. 关于MIME类型问题,浏览器请求到的资源是乱码

    简介 我想很多同学都可能会遇到这样的问题,调用后台提共的静态资源服务api时,用浏览器打开发现却是一堆乱码.需要的是 JSON, 拿到的却是 xml,访问一个mp4的文件,浏览器直接下载.这一切的来源 ...

  9. Redis 5.0.9 安装

    目录 系统环境 系统版本 内核版本 安装步骤 安装 gcc 依赖 下载 Redis 解压 Redis 切换到 redis 解压目录下,执行编译 指定目录安装 启动 Redis 服务 最后 系统环境 系 ...

  10. gloo基本知识

    Architechture(架构) Gloo通过Envoy XDS gRPC API来动态更新Envoy配置, 更方便的控制Envoy Proxy, 并保留扩展性..本质是一个Envoy xDS配置翻 ...