鸿蒙HarmonyOS实战：图形图像普通组件开发指导

已于 2024-08-05 22:13:50 修改
阅读量517 收藏 9
点赞数 10
分类专栏： HarmonyOS OpenHarmony 鸿蒙开发 文章标签： harmonyos 华为 开发语言 驱动开发 鸿蒙 前端 鸿蒙系统
于 2024-08-05 22:12:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwe9518/article/details/140937587
版权

普通组件均继承于基类UIView，不可以添加子组件，常用的普通组件有button、image、label等。

图1 普通组件树结构

UIView为基础类，UIAbstractProgress、UIArcLabel（旋转字体）、UIButton（按键）、UICanvas（画布）、UILabel（字体）、UIImageView（图片）从UIView继承。UIBoxProgress、UICircleProgress从UIAbstractProgress继承，UILabelButton和UIRepeatButton从UIButton继承，UIImageAnimatorView和UITextureMapper从UIImageView继承。

UIButton

使用场景

UIButton组件，提供可点击功能，同时可设置不同状态下样式。

接口说明

表1 button接口说明

方法功能
void SetImageSrc (const char *defaultImgSrc, const char *triggeredImgSrc)设置button图片
void SetImagePosition (const int16_t x, const int16_t y)设置button图片位置
int16_t GetImageX () const获取图片X坐标
int16_t GetImageY () const获取图片Y坐标
const ImageInfo* GetCurImageSrc() const获取当前状态图片
Style&  GetStyleForState (ButtonState state)设置button当前状态的style
voidSetStyleForState (const Style &style, ButtonState state)设置button指定状态的style
void Disable ()去使能button
void Enable ()使能button

开发步骤

  1. 实现点击事件。

    class TestBtnOnClickListener : public OHOS::UIView::OnClickListener {
    bool OnClick(UIView& view, const ClickEvent& event) override
    {
        int16_t width = view.GetWidth() + 10;
        int16_t height = view.GetHeight() + 10;
        view.Resize(width, height);
        view.Invalidate();
        return true;
    }
};

  2. 创建一个UIButton。

    UIButton* button = new UIButton();
button->SetPosition(50, 50);
button->SetWidth(100);
button->SetHeight(50);

  3. 给UIButton注册点击事件回调。

    button->SetOnClickListener(new TestBtnOnClickListener());

  4. 检查Button点击效果如下图所示，Button逐渐变大。

    图2 UIButton点击效果

UIImageView

使用场景

图片组件，提供图片显示，透明度设置，图片旋转、缩放功能。支持的图片格式为RGB565、RGB888、RGBA8888、PNG、JPG。

接口说明

表2 image接口说明

方法功能
void SetSrc (const char *src)设置二进制图片路径
void SetSrc (const ImageInfo *src)设置图片指针
void SetAutoEnable (bool enable)设置组件大小跟随image大小变化
const void* GetSrcType () const获取图片类型
bool GetAutoEnable () const获取组件大小是否跟随image大小变化
void SetBlurLevel(BlurLevel level)设置模糊等级
BlurLevel GetBlurLevel() const获取模糊等级
void SetTransformAlgorithm(TransformAlgorithm algorithm)设置旋转算法
TransformAlgorithm GetTransformAlgorithm() const获取旋转算法

开发步骤（自适应）

  1. 创建一个UIImageView。

    UIImageView* imageView = new UIImageView();
imageView->SetPosition(0, 30);

  2. 设置二进制格式的图片。

    imageView->SetSrc("..\\config\\images\\A021_001.bin");

  3. 检查UIImageView控件大小与图片相同。

    图3 自适应模式图片效果图

 

开发步骤（平铺模式）

  1. 创建一个UIImageView。

    UIImageView* imageView = new UIImageView();
imageView->SetPosition(0, 30);

  2. 设置图片。

    imageView->SetSrc("..\\config\\images\\A021_001.bin");

  3. 取消图片自适应，设置图片大小，平铺显示效果。

    imageView->SetAutoEnable(false);
imageView->Resize(454, 150);

  4. 检查UIImageView控件显示为平铺效果。

    图4 平铺模式图片效果图

UILabel

使用场景

标签（label）是在一块区域上显示文本字符串的组件，可设置区域背景色、文字的显示样式和长文本的显示效果等。

接口说明

表3 label接口说明

方法功能
void SetText(const char* text);设置文字
const char* GetText() const;获取text
void SetLineBreakMode(const uint8_t lineBreakMode);设置label模式，例如截断，自动扩展等。
uint8_t GetLineBreakMode() const获取label模式
void SetTextColor(ColorType color)设置文本颜色
ColorType GetTextColor() const获取文本颜色
void SetAlign(UITextLanguageAlignment horizontalAlign,
UITextLanguageAlignment verticalAlign = TEXT_ALIGNMENT_TOP);		设置文本对齐方式
UITextLanguageAlignment GetHorAlign() const获取文本水平对齐方式
UITextLanguageAlignment GetVerAlign() const获取文本竖直对齐方式
void SetDirect(UITextLanguageDirect direct)设置文本显示方向
UITextLanguageDirect GetDirect() const获取文本显示方向
void SetFontId(uint8_t fontId);设置动态字体id
uint8_t GetFontId() const获取动态字体id
void SetFont(const char *name, uint8_t size);设置字的名字和大小
void SetAnimatorSpeed(uint16_t animSpeed);设置字体旋转的速度
uint16_t GetTextWidth();获取字体的宽
uint16_t GetTextHeight();获取字体的高
void SetRollStartPos(int16_t pos)设置旋转的位置
int16_t GetRollStartPos() const获取旋转的位置
void SetTextRotation(LabelRotateDegree angle)设置文本旋转角度枚举值
LabelRotateDegree GetTextRotation() const获取文本旋转角度枚举值
uint16_t GetTextRotateDegree() const获取文本旋转角度数值

开发步骤（默认模式）

  1. 创建label，设置大小和位置信息。

    UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);

  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置文本数据。

    label->SetText("label");

  4. 检查label大小和显示效果正常，如下图所示。

    图5 默认模式显示效果图

开发步骤（背景色和透明度）

  1. 创建label，设置大小和位置信息。

    UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);

  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置背景颜色及透明度效果。

    label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
label->SetStyle(STYLE_BACKGROUND_OPA, 127);
label->SetText("Label");

  4. 检查label背景色为Gray，如下图所示。

    图6 设置背景色显示效果图

开发步骤（字符间距）

  1. 创建label，设置大小和位置信息。

    UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);

  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置字体颜色和字间距效果。

    label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
label->SetStyle(STYLE_LETTER_SPACE, 5);
label->SetText("Label");

  4. 检查label字符间距为5，如下图所示。

    图7 设置文字颜色、字间距显示效果图

开发步骤（大小自适应）

当文本过长时，可根据文本信息自动调整label组件大小，也可以设置文本截断或者文本滚动效果。

  1. 创建label，设置大小和位置信息。

    UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);

  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置字体颜色为Gray，组件大小自适应文本内容。

    label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
label->SetLineBreakMode(UILabel::LINE_BREAK_ADAPT);
label->SetText("123\n567890");

  4. 检查label大小自适应文本内容，如下图所示。

    图8 自适应模式显示效果图

开发步骤（省略号模式）

省略号模式指文本内容显示不下时，在末尾显示省略号。

  1. 创建label，设置大小和位置信息。

    UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);

  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置换行模式为DOT模式

    label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
label->SetLineBreakMode(UILabel::LINE_BREAK_ELLIPSIS);
label->SetText("123567890");

  4. 检查label DOT模式效果，如下图所示，末尾显示省略号。

    图9 DOT模式显示效果图

开发步骤（滚动模式）

文本滚动显示。

  1. 创建label，设置大小和位置信息。

    UILabel* label = new UILabel();
label->SetPosition(x, y);
label->Resize(width, height);

  2. 设置字形信息。

    label->SetFont("SourceHanSansSC-Regular.otf", 30);

  3. 设置换行模式为滚动模式

    label->SetStyle(STYLE_BACKGROUND_COLOR, Color::Gray().full);
label->SetStyle(STYLE_BACKGROUND_OPA, 127);
label->SetLineBreakMode(UILabel::LINE_BREAK_MARQUEE);
label->SetText("123567890");

  4. 检查label滚动模式效果，如下图所示。

    图10 滚动模式显示效果图

小_飞棍来咯
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS从基础到实战-高性能华为在线答题元服务
一键难忘的博客
11-21 12万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
HarmonyOS开发从入门到实践 掌握这些资源就够了.pdf
05-29
HarmonyOS开发从入门到实践 掌握这些资源就够了
鸿蒙HarmonyOS开发：图形图像容器类组件开发指导
qwe9518的博客
08-05 287
容器类组件，指能包含其它UI组件的组件，容器类组件继承于UIViewGroup（带Add方法），基于实际组件的使用场景，将需要增加其他子组件的组件，放置到容器类继承结构下。
鸿蒙HarmonyOS开发：图形图像UI 之间的关系
qwe9518的博客
08-05 309
当前对于 OpenHarmony 应用界面开发，你可能已经了解到几个不同的概念，比如 ArkUI 声明式开发范式、ArkUI 类 Web 开发范式等，那他们和当前小型系统图形图像框架之间是什么关系呢
鸿蒙Harmony开发：图形图像布局类组件开发规范
qwe9518的博客
08-05 639
该组件分为水平方向和垂直方向，通过Add方法添加的子组件会根据Add的顺序和UISwipeView方向自动水平对齐或者垂直对齐。
鸿蒙南向开发实战：小型系统图形图像框架
shudaoshanQAQ的博客
04-25 892
小型系统图形图像子系统是一套轻量级图形框架.......
HarmonyOS开发实战：时延类性能问题实践-Trace
DMZDAMS的博客
06-29 982
当应用在运行时出现明显的延迟或不流畅的情况，会影响用户体验
鸿蒙HarmonyOS实战-ArkUI组件（Canvas）_鸿蒙 canvas(1)
2401_84160310的博客
04-18 1094
/用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。//用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。//用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。
HarmonyOS 实战开发-使用canvas实现图表系列之折线图
m0_71524094的博客
04-26 1275
实现一个公共组件的时候，首先分析一下大概的实现结构以及开发思路，方便我们少走弯路，也可以使组件更加容易拓展，维护性更强。然后我会把功能逐个拆开来讲，这样大家才能学习到更详细的内容。下面简单阐述下折线图组件的功能结构：
华为鸿蒙HarmonyOS开发整理资料汇总.zip
11-25
华为鸿蒙HarmonyOS开发整理资料汇总，共38份。 1学前必读：HarmonyOS学习资源主题分享 2学前必读：OpenHarmony-联盟生态资料合集 3-1.HarmonyOS概述：技术特性 3-2.HarmonyOS概述：开发工具与平台 3-3.HarmonyOS...
华为鸿蒙HarmonyOS开发者资料大全鸿蒙系统开发资料汇总.zip
06-16
鸿蒙HarmonyOS开发者资料大全鸿蒙系统开发资料汇总,包括如下： DevEco Studio 1.0 使用指南.pdf HarmonyOS-NFC开发指南.pdf HarmonyOS应用开发之页面开发.pdf HarmonyOS开发必备基础知识.pdf WLAN开发指南.pdf 图像...
HarmonyOS 2.0鸿蒙应用开发实战教程视频教程2.4G
06-16
3. **Java / Kotlin / JS开发**：HarmonyOS支持使用Java、Kotlin或JavaScript进行开发。了解这三种语言在HarmonyOS开发中的应用场景和语法特点，以及如何使用它们创建组件和交互逻辑。 4. **UI组件与布局**：掌握...
HarmonyOS 2.0鸿蒙应用开发实战教程视频教程
06-16
此外，HarmonyOS还提供了Ability组件模型，允许开发者构建可复用、可组合的能力模块，提升代码的复用性和可维护性。 在UI设计上，HarmonyOS提供了基于XML的UI描述语言，开发者可以使用它来定义界面布局和交互逻辑。...
【HarmonyOS NEXT星河版开发学习】小型测试案例06-小红书卡片
最新发布
2302_80329073的博客
08-06 239
在鸿蒙（HarmonyOS）开发中，自适应伸缩是指应用程序能够根据不同设备的屏幕尺寸、分辨率和形态（如手机、平板、电视）自动调整布局和元素大小，以确保用户界面在各种设备上都能良好地显示和使用。约束布局（ConstraintLayout）
鸿蒙图形开发【3D引擎接口示例】
2301_76813281的博客
08-05 915
本实例主要介绍3D引擎提供的接口功能。提供了@ohos.graphics.scene中接口的功能演示。 3D引擎渲染的画面会被显示在Component3D这一控件中。点击按钮触发不同的功能，用户可以观察渲染画面的改变。
鸿蒙系统开发【加解密算法库框架】安全
2301_76813281的博客
08-02 836
本示例使用@ohos.security.cryptoFramework相关接口实现了对文本文件的加解密、签名验签操作。
【HarmonyOS NEXT星河版开发学习】小型测试案例01-今日头条置顶练习
2302_80329073的博客
08-05 428
本系列可能是博客首发，鸿蒙开发星河版是一个全新的版本，由于参考视频较少鸿蒙开发不被重视导致csdn上面并没有全套的学习路线，所以我决定分享个人的学习。本人也是正在参照黑马程序员的视频进行逐步学习，并不是这方面的专家。希望大家能够对鸿蒙开发感兴趣。鸿蒙（HarmonyOS）是华为推出的一款全场景分布式操作系统，旨在支持各种设备上的统一操作体验。如果你对鸿蒙开发感兴趣，这里简要介绍一下相关内容：开发语言。
鸿蒙HarmonyOS实战：构建登录与注册页面
"鸿蒙HarmonyOS项目实战指南，包括环境搭建、登录及注册页面的创建，使用TextInput组件，常量文件的建立以及页面间参数传递。" 在本实战篇中，我们将深入学习如何利用鸿蒙HarmonyOS进行项目开发。首先，作者提到不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值