赞
踩
一、背景
最近准备要做一个类似仪表盘样式的半圆环带刻度可拖动的进度条来展示和设置温度,网上找了找demo,都和实际的需求有点区别,感觉这种功能实现起来不难,就索性自己弄了一个。
二、正文
在开始之前,我们来看下实际的运行效果,看看能不能满足正在查找资料的小伙伴的项目需求:
效果就是这样的啦,没什么特别的地方,我们来看下实现方法吧,如果对于自定义View的流程还有些不清楚,可以查看一下自定义简单View及获取xml自定义属性,里面总结了自定义View的整体思路和流程,在本例中我们可以将要实现的View分解成一个个基本的小功能,再集中优势力量各个击破,思路如下:
1.继承一个View或者一个我们需要的View的子类,并添加构造方法
2.重写onMeasure方法
3.重写onDraw方法 ,在这里我们将上面的View分解为灰色的半圆环、蓝色的半圆环、环上的按钮图标、灰色刻度线、蓝色刻度线、中间显示的进度几个部分
4.重写onTouchEvent方法,获取用户触屏状态,再进行相应处理
5.在xml中自定义View属性
下面来让我们跟着上面的思路来看看具体的实现代码吧,这是我们的自定义View类,我们添加了不同参数的构造方法,如果你只需要在xml中使用当前的自定义View,我们只需要添加两个参数的构造方法即可
public class MyHalfCricularSlideWithScaleView extends View{
//在代码中直接new的时候,会调用一个参数构造方法
public MyHalfCricularSlideWithScaleView(Context context) {
this(context, null);
}
//在xml中使用自定义控件的时候,不管有没有使用我们自己的自定义属性都会调用两个参数构造方法
public MyHalfCricularSlideWithScaleView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
//这个构造方法系统不会默认调用,需要我们自己主动调用
public MyHalfCricularSlideWithScaleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
private void init(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
}
}
这是我们所声明的变量,看着数量这么多特别吓人,但其实我告诉你这并不是一蹴而就的,而是你在编写的过程中,陆陆续续发现少了参数而不断添加后的结果,而且由于我是先写了demo后才写的博客,这两者并不是同步的,所以就造成onDraw方法里实现绘制每个小功能的初始化代码都放在了一起,正常的写的话都是按照上面步骤一点一点实现的。
//圆环的宽度
float ringWidth;
//底部的圆弧颜色
int ringBgCorlor;
//滑动的圆弧颜色
int slideRingCorlor;
//同心圆的外圆半径
int radius;
//中间字的颜色
int wordCorlor;
//中间字的大小
int wordSize;
//最大进度范围
int maxProgress;
//最小进度范围
int minProgress;
//当前进度(总是将起始位置等分为100份),通过进度的百分比求出实际显示数值
int progress;
//实际显示的数值
double realShowProgress;
//每次要增加减少的数值
double addOrReduce = 1;
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。