实用第一f 智慧密集
■ BBaSEIEieSI3l3BBI3SeSBI3BBEIISBBBI3BI9@SI3eSI3aiSieEISeBI3ei3iaEIBBeBI3BaEIEII3SS@ieEl®
Android  智能净水机APP 开发（二）
杨东
（安徽博约信息科技股份有限公司，合肥230088）
摘要：主要讲述了智能净水机APP 状态页布局和功能实现，通过程序实例讲解了 Android 项目中自定
义控件技术。
关键词：Android 编程；自定义控件；净水机APP
1概述上一篇从智能净水机物理网原理、净水机APP 结
构方面展开，对APP 主界面进行设计，并对项目常用 组件Toast 提示、Dialog 对话框等进行封装，讲述了
净水APP 的主要功能设计，在此从净水机状态页功能
展开。
2状态页
状态页主要表述净水机当前工作情况。APP 中要实
时显示净水机当前出水质量以及机器工作状态等。
机器工作状态有制水、水满、缺水、正常、故障和
异常6种，其中故障和异常可显示具体问题内容。状态 页的设计图如图1所示。
0.49K/S  0
兮' (3 CW  67%
(D
制水
+
11:37
D
100
正常
异常
净水机状态页
冲洗
当机器评分为0时请冲洗
图1状态页
3布局
3.1布局分解
结合状态页设计图， 可以看出 APP  状态页布局主 要由以下几个部分组成。
(1) 顶部的标题栏和操作按钮
通过 RelativeLayout  可以构造出这种结构， 将标题 居中，开关机和刷新按钮分别居左、居右显示即可。
(2) 评分控件
评分控件需要通过Android 自定义控件技术来实
现，将会在下一节详细讲述。
(3) 冲洗按钮
冲洗按钮是冲洗功能的入口，通过Button 标签即可
实现。
(4) 状态显示
状态显示区域由6个RadioButton 组成袁每个Ra ­dioButton  都有选中和未选中的状态袁刚好可以作为状态
标识呈现给用户。
3.2布局源码
(1) 评分控件
<com.demo.purifier.widget.ScaleArc
android:id="@+id/scale_quality"
android:layout_width="@dimen/state_round_width" android:layout_height="@dimen/state_round_width"
android:layout_gravity="center_horizonta  l" app:arcColor="@color/white"
app:arcWidth="1dip"
app:pointerColor="@color/white" app:pointerWeight="1dip"
app:innerColor="@color/white"
app:roundWidth="1dip"
app:scaleColor="@color/white"
app:scaleSpace="4dip" app:scaleWeight="0.5dip" app:scaleWidth="7dip"
注：Android 智能净水机APP 开发（一），于2018年 2月刊出
。
移动应用
app:percentColor="@color/white"
app:percentSize="22sp"/>
(2)状态显示按钮组
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical">
<RadioGroup
android:id="@+id/rg_state_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_making"
android:drawableTop="@drawab l引bg_making_selector"/>
<RadioButton
android:id="@+id/rb_full"
android:drawableTop="@drawable/ bg_full_selector"/>
<RadioButton
android:id="@+id/rb_need"
android:drawableTop="@drawab l引bg_need_selector"/>
</RadioGroup>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dip"
android:orientation="horizontal">
<TextView
android:text="制水"/>
<TextView
android:text="水满"/>
<TextView
android:text="缺水"/>
</LinearLayout>
<RadioGroup
android:id="@+id/rg_state_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dip"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_norma l"
android:drawableTop="@drawable/ bg_normal_selector"/>
<RadioButton
android:id="@+id/rb_break"
android:drawableTop="@drawable/ bg_break_selector"/>
<RadioButton
android:id="@+id/rb_abnorma l"
android:drawableTop="@drawable/ bg_abnormal_selector"/>
</RadioGroup>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dip"
android:orientation="horizontal">
<TextView
android:text="正常"/>
<TextView
android:text="故障"/>
<TextView
android:text="异常"/>
</LinearLayout>
</LinearLayout>
(3)自定义属性res/l
在(1)源码中使用到的自定义属性arcColor等定义在l中袁通过declare-styleable标签声明一系列控件属性，这些属性将在控件绘制的过程中使用。
<?xml version="1.0"encoding="UTF-8"?>
<resources>
<attr name="scaleColor"format="color"/>
<attr name="pointerColor"format="color"/>
<attr name="percentColor"format="color"
/>
SreeaeBBHI*>SBSI3EIEIEIEIffiEBBI!IBBBeaeBI3BigBlslBBai3IIBBEISBHI3glBBIIIIIIBSSI3aBIIIglEISa3BEIQISB>E 实用第一f智慧密集
<attr name="percentSize"format="dimension"/>
<attr name="scaleWidth"format="dimension"/>
<attr name="scaleWeight"format="dimension"/> <attr name="pointerWeight"format="dimension"/> <attr name="max"format="integer"/>
<declare-styleable name="ScaleArc">
<attr name="arcColor"format="color"/>
<attr name="innerColor"format="color"/>
<attr name="scaleColor"/>
<attr name="pointerColor"/>
<attr name="percentColor"/>
<attr name="arcWidth"format="dimension"/> <attr name="roundWidth"format="dimen­sion"/>
<attr name="roundRadius"format="dimen­sion"/>
<attr name="scaleWidth"/>
<attr name="scaleSpace"format="dimen­sion"/>
<attr name="scaleWeight"/>
<attr name="pointerSpace"format="dimen-sion"/>
<attr name="pointerWeight"/>
<attr name="textSize"/>
<attr name="max"/>
</declare-styleable>
</resources>
(l
在l声明了状态RadioButton控件的公用样式，以便于统一控件显示效果。
<!--主界面状态组按钮样式-->
<style name="rb_state">
<item name="android:layout_width">@di-men/rb_state_width</item>
<item name="android:layout_height">@di-men/rb_state_width</item>
<item name="android:layout_marginLeft"> 15dip</item>
<item name="android:layout_marginRight"> 15dip</item>
<item name="android:paddingTop">@di-men/rb_state_paddingTop</item>
<item name="android:paddingLeft">1dip</ item>
<item name="android:backgroun d">@drawabl引bg_state_selector</item>
<item name="android:button">@null</item>
<item name="android:gravity">center</ item>
<item name="android:clickable">false</ item>
</style>
<!--主界面状态组文字样式-->
<style name="text_state">
<item name="android:layout_width">@di-men/rb_state_width</item>
<item name="android:layout_height"> wrap_content</item>
<item name="android:gravity">center</ item>
<item name="android:layout_marginLeft">15dip</ item>
android radiogroup
<item name="android:layout_marginRight"> 15dip</item>
<item name="android:percentColor">@col-or/gray_main_text</item>
<item name="android:textSize">12sp</ item>
</style>
4自定义控件
4.1常用方法
一般来说，Android中的自定义控件继承android. view.View类，然后复写android.Draw(Can­vas canvas)方法，达到目标的显示效果。通常情况下，需要用到aphics.Canvas类来为人们绘制文字、图形、图片等。
(1)绘制文字
public void drawText(String text,float x,float y, Paint paint);
canvas.drawText("test",100,100,paint);
例中将通过canvas对象在界面中坐标(100,100)位置绘制“test”文字。也可通过其他重载方法传入对应的参数绘制。
(2)绘制直线
public void drawLine(float startX,float startY,float stopX,float stopY,Paint paint);
canvas.drawLine(100,100,200,200,paint);
例中将通过canvas对象在界面中绘制从点(100,100)至点(200,200)的直线。
也可通过其他重载方法传入
移动应用MOBILE APPLICATION-
对应的参数绘制。
(3)绘制矩形
public void drawRect(float left,float top,float right,float bottom,Paint paint);
canvas.drawRect(100,100,100,100,paint);
例中将通过canvas对象在界面中绘制长宽均为100的矩形。也可通过其他重载方法传入对应的参数绘
制O
(4)绘制圆
public void drawCircle(float cx,float cy,float ra­dius,Paint paint);
canvas.drawCircle(100,100,50,paint);
例中将通过canvas对象在界面中绘制圆心为(100,100)、半径为50的圆形。也可通过其他重载方法传入对应的参数绘制。
(5)绘制弧形
public void drawArc(RectF oval,float startAngle, float sweepAngle,boolean useCenter,Paint paint);
private RectF mRectF;
mRectF=new RectF(50,50,100,100);//定义一〃个矩形区域
canvas.drawArc(mRectF,0,90,false,paint);
例中将通过canvas对象在界面中绘制在矩形(50,50)-(100,100)范围内、起始角度为0、终止角度为90的圆弧。也可通过其他重载方法传入对应的参数绘制。
4.2评分控件
评分控件要实现的效果如图2所示。
图2评分控件
按照效果图元素分解为以下步骤:
(1)画进度上的显示文字。
(2)画最外层的圆弧。
(3)画界面的弧形刻度。
(4)画内层的圆环。
(5)画刻度指示progress。
完整的控件源码:
*圆弧+刻度盘
*/
public class ScaleArc extends View{
private Paint paint;//画笔
private int arcColor;//外圆彩
pr i vate int inner C olo r;//内圆彩
private int scaleColor;//亥0度彩
pr i vate int pointer C olo r;//扌旨针彩
private int percentColor;//百分比彩
private float percentSize;//百分比字体大小
private float arcWidth;//外圆宽度
pri v ate float rou nd W idth;//内圆宽度
private float roundRadius;//内圆半径
private float scaleWidth;//刻度宽度
private float scaleWeight;//刻度粗细
private float scaleSpace;//圆弧和刻度间距大小
private float pointerWeight;//扌旨针粗纟田
private float pointerSpace;//刻度和指针之间的间//距大小
private int max;//最大进度
private int progress;//当前进度
private int startAngle=120;//刻度起始角度
private int scale;//刻度
/
**
*构造方法
*@param context
*/
public ScaleArc(Context context){
this(context,null);
}
/**
*构造方法
*@param context
*@param attrs
*/
public ScaleArc(Context context,AttributeSet attrs){ this(context,attrs,0);
}
**
*构造方法
*@param context
*@param attrs
*@param defStyleAttr
*/
SreeaeBBHI*>SBSI3EIEIEIEIffiEBBI!IBBBeaeBI3BigBlslBBai3IIBBEISBHI3glBBIIIIIIBSSI3aBIIIglEISa3BEIQISB>E 实用第一f智慧密集
public ScaleArc(Context context,AttributeSet at-trs,int defStyleAttr){
super(context,attrs,defStyleAttr);
paint=new Paint();
TypedArray typedArray=context.obtain-StyledAttributes(attrs,R.styleable.ScaleArc);
//颜配置
Color(R.styleable. ScaleArc_arcColor,Color.WHITE);
Color(R.styleable. ScaleArc_innerColor,Color.WHITE);
Color(R.styleable. ScaleArc_scaleColor,Color.BLUE);
Color(R.styleable. ScaleArc_pointerColor,Color.WHITE);
Color(R.styleable. ScaleArc_percentColor,Color.BLACK);
//尺寸配置
Dimension(R.styleable. ScaleArc_percentSize,20);
Dimension(R.styleable. ScaleArc_arcWidth,5);
Dimension(R.styleable. ScaleArc_roundWidth,5);
Dimension(R.styleable. ScaleArc_roundRadius,40);
Dimension(R.styleable. ScaleArc_scaleWidth,15);
Dimension(R.styleable. ScaleArc_scaleWeight,4);
Dimension(R.styleable. ScaleArc_scaleSpace,25);
Dimension(R.styleable. ScaleArc_pointerWeight,4);
Dimension(R.styleable. ScaleArc_pointerSpace,25);
Integer(R.styleable. ScaleArc_max,100);
//回收资源
//圆弧单元刻度占据的弧度
scale=300/max;
}
©Override
protected void onDraw(Canvas canvas){
//获取圆心中心位置坐标
int center=getWidth()/2;
//计算圆环半径
int radius=(int)(center-arcWidth/ 2);
//设置画笔状态空心
paint.setStyle(Paint.Style.STROKE);
//设置消除锯齿
paint.setAntiAlias(true);
//1、画进度上的数字部分
paint.setStrokeWidth(0);//设置画笔宽度
paint.setColor(percentColor);//设置颜paint.setTextSize(percentSize);//设置字体大小paint.Typeface (getContextO));//通过公用字体资源来设置字体
String text=progress+"";
FontMetricsInt Font-MetricsInt();
float baseline=(center+p)/ 2;
canvas.drawText(a-sureText(text)/ 2,baseline,paint);
//2、画最外层的圆弧
paint.setColor(arcColor);//设置圆环颜paint.setStrokeWidth(arcWidth);//设置圆环宽度RectF oval=new RectF(center-radius, center-radius,center+radius,center+radius);//定〃义圆弧的形状和大小
canvas.drawArc(oval,startAngle,300,false,paint);
〃3、画界面的弧形刻度
paint.setColor(scaleColor);
paint.setStrokeWidth(scaleWeight);//设置刻〃度的粗细
//锁画布(为了保存之前的画布状态)
canvas.save();
for(int i=0;i<max;i++){
canvas.drawLine(scaleSpace,0, scaleWidth+scaleSpace,0,paint);
}
〃4、画内层的圆环
paint.setColor(innerColor);//设置圆环颜paint.setStrokeWidth(roundWidth);//设置圆环宽度
radius=(int)(roundRadius-roundWidth/2);
8^2021.1—0 \_//程技巧与维

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。