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

发布于 2021-8-10 14:12
浏览
16收藏

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

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

指南

1. 创建一个CustomerView类继承自Component,并实现DrawTask(绘制任务接口):

public class CustomerView extends Component implements DrawTask;

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

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

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

public void onDraw(Component component, Canvas canvas){

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

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>

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);
  }
}

实现效果图:

【软通动力】HarmonyOS基础知识拓展之自定义控件-开源基础软件社区

 

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
22
收藏 16
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐