【软通动力】HarmonyOS基础知识拓展之自定义控件原创精华

软通张二龙

发布于 2021-8-10 14:12

浏览

15收藏

引言
在实际应用开发中，有时候我们会使用一些自定义控件，如：圆形进度条、下拉刷新上拉加载、圆角图片、图表库……，都使用的是自定义控件，可见自定义控件的实用场景也是多种多样。所以对于HarmonyOS开发者而言，也需要了解HarmonyOS自定义控件的开发知识，这对于每一个HarmonyOS开发者，也是一项必不可少的专业技能。

功能介绍
主要介绍了自定义控件类的创建、绘制任务接口DrawTask的实现，以及画笔Paint、画布Canvas的使用，和直线、圆、以及文字的绘制。

指南

1. 创建一个CustomerView类继承自Component，并实现DrawTask（绘制任务接口）：

public class CustomerView extends Component implements DrawTask；
1.

2. 重写其构造方法 CustomerView(Context context, AttrSet attrSet)，添加绘制任务addDrawTask(this)：

public CustomerView(Context context, AttrSet attrSet) {
  super(context, attrSet);
  addDrawTask(this);
}1.
2.
3.
4.

3. 实现接口DrawTask的方法onDraw()：

public void onDraw(Component component, Canvas canvas){1.

//这里实现自定义控件的绘制过程，比如绘制个圆

Paint paint=new Paint();//创建画笔

paint.setColor(Color.GREEN);//设置画笔颜色

paint.setStyle(Style.FILL_STYLE);//设置画笔填充样式，这里用实心样式；还有空心样式

paint.setStrokeWidth(8);//设置画笔粗细大小

canvas.drawCircle(600,400,100,paint);//使用canvas画布完成绘制，参数600，400表示圆心的x，y坐标，100表示圆的半径，paint为设置的画笔

//绘制文字

Point pointStart=new Point((float)700,(float)400);//绘制直线起点
Point pointEnd=new Point((float)1000,(float)400);//绘制直线终点
canvas.drawLine(pointStart,pointEnd,paint);//绘制直线的方法，参数分别是起点、终点及画笔对象

//绘制文字

paint.setTextSize(60);//绘制文字时，设置文字大小

canvas.drawText(paint,"自定义图形",(float) 450,(float)630);//参数为画笔对象、文字内容以及绘制文字的坐标点x/y值

}

4. 在xml布局中引用自定义控件：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
  xmlns:ohos="http://schemas.huawei.com/res/ohos"
  ohos:height="match_parent"
  ohos:orientation="vertical"
  ohos:width="match_parent">
  <com.isoftstone.zeldemo.CustomerView
    ohos:height="match_content"
    ohos:width="match_content"/>
</DirectionalLayout>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

5．自定义控件类源码：

package com.isoftstone.zeldemo;

import ohos.agp.components.AttrSet;
import ohos.agp.components.Component;
import ohos.agp.components.Component.DrawTask;
import ohos.agp.render.Canvas;
import ohos.agp.render.Paint;
import ohos.agp.render.Paint.Style;
import ohos.agp.utils.Color;
import ohos.agp.utils.Point;
import ohos.app.Context;

public class CustomerView extends Component implements DrawTask {

  public CustomerView(Context context, AttrSet attrSet) {
    super(context, attrSet);
    addDrawTask(this);
  }

  @Override
  public void onDraw(Component component, Canvas canvas) {
    Paint  paint=new Paint();
    paint.setColor(Color.GREEN);
    paint.setStyle(Style.FILL_STYLE);
    paint.setStrokeWidth(8);
    paint.setTextSize(60);
    canvas.drawCircle(600,400,100,paint);

    paint.setColor(Color.BLACK);
    Point pointStart1=new Point((float)700,(float)400);
    Point pointEnd1=new Point((float)1000,(float)400);
    canvas.drawLine(pointStart1,pointEnd1,paint);

    Point pointEnd2=new Point((float)800,(float)600);
    canvas.drawLine(pointEnd1,pointEnd2,paint);

    Point pointEnd3=new Point((float)900,(float)800);
    canvas.drawLine(pointEnd2,pointEnd3,paint);

    paint.setColor(Color.RED);
    canvas.drawCircle(900,900,100,paint);

    paint.setColor(Color.BLACK);
    Point pointEnd4=new Point((float)800,(float)900);
    Point pointEnd5=new Point((float)400,(float)900);
    canvas.drawLine(pointEnd4,pointEnd5,paint);

    paint.setColor(Color.YELLOW);
    canvas.drawCircle(300,900,100,paint);

    paint.setColor(Color.BLACK);
    Point pointEnd6=new Point((float)300,(float)800);
    Point pointEnd7=new Point((float)400,(float)600);
    canvas.drawLine(pointEnd6,pointEnd7,paint);


    Point pointEnd8=new Point((float)200,(float)400);
    canvas.drawLine(pointEnd7,pointEnd8,paint);

    Point pointEnd9=new Point((float)500,(float)400);
    canvas.drawLine(pointEnd8,pointEnd9,paint);

    canvas.drawText(paint,"自定义图形",(float) 450,(float)630);
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.