鸿蒙开发 ——UI开发之RoundedImageView_pagimageview 鸿蒙开发-优快云博客

本文链接：https://blog.youkuaiyun.com/guangxishaoji/article/details/146560950

📑往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）

✒️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

✒️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

✒️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

✒️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

✒️ 记录一场鸿蒙开发岗位面试经历~

✒️ 持续更新中……

简介

RoundedImageView支持圆角（和椭圆或圆形）的快速 ImageView。它支持许多附加功能，包括椭圆、圆角矩形、ScaleTypes 和 TileModes。

效果展示：

安装教程

ohpm install @ohos/roundedimageview

对于OpenHarmony ohpm环境配置的详细信息，请参阅OpenHarmony环境配置指南。

使用说明

在page页面引入包

  import { RoundedImageView, ScaleType, TileMode, SrcType, FileUtils } from '@ohos/roundedimageview/'

创建多种PictureItem实例用于构造数据，使用方法类似
初始化：实例化dialogController和对应的RoundedImageView.Model对象，并添加typeArr类型以标记当前页页面类型

 dialogController: CustomDialogController = new CustomDialogController({
   alignment: DialogAlignment.Top,
   builder: TypeCustomDialog({ typeValue: $typeValue }),
   autoCancel: true
 })
 private initViewModels(): void  {
   let viewModelsLength = Math.max(this.picIdxArr.length, this.colorIdxArr.length)
   for (var index = 0; index < viewModelsLength; index++) {
     this.viewModels.push(new RoundedImageView.Model)
   }
 }

属性设置：通过Model类对象设置UI属性来自定义所需风格

 private updateViewModels(pictureItem: PictureItem[]) {
   pictureItem.forEach((val, idx) => {
     this.viewModels[idx]
       .setImageSrc(pictureItem[idx].src)
       .setBackgroundColor(pictureItem[idx].backgroundColor)
       .setSrcType(pictureItem[idx].srcType)
       .setIsSvg(pictureItem[idx].isSvg)
       .setTypeValue(this.typeValue)
       .setUiWidth(pictureItem[idx].uiWidth)
       .setUiHeight(pictureItem[idx].uiHeight)
       .setScaleType(pictureItem[idx].scaleType)
       .setTileModeXY(pictureItem[idx].tileMode)
       .setCornerRadius(pictureItem[idx].cornerRadius)
       .setBorderWidth(pictureItem[idx].borderWidth)
       .setBorderColor(pictureItem[idx].borderColor)
       .setPadding(pictureItem[idx].padding)
       .setColorWidth(this.uiHeight)
       .setColorHeight(this.uiHeight)
   });
 }

界面绘制：界面顶部为类型选择内容，并监听type_value内容的变化，以重新构建Model，通知给Model类，Scroll中使用list布局放置图片。

build() {
   Column() {
     Column() {
       Image($r('app.media.down')).width(30).height(30).position({ x: -30, y: 5 }).onClick(() => {
         this.dialogController.open()
       })
       Text(' select:' + this.typeValue).fontSize(30)
     }.margin(15)

     Scroll(this.scroller) {
       List({ space: 10, initialIndex: 0 }) {
         if (this.typeValue == 'Bitmap') {
           ForEach(this.picIdxArr, (item) => {
             ListItem() {
               this.viewItem(this.viewModels[item], this.rectPictureItems[item])
             }.editable(false)
           }, item => item)
         }
         ...
       }
     }
     .scrollable(ScrollDirection.Vertical).scrollBar(BarState.Off)
   }
   .width('100%')
   .height('100%')
   .backgroundColor(0xDCDCDC)
   .padding({ top: 20, bottom: 100 })
 }

接口说明

let data: RoundedImageView.Model = new RoundedImageView.Model();

设置图片路径 data.setImageSrc(src: string | Resource | ArrayBuffer)
设置图片类型 data.setSrcType(srcType: SrcType)
设置图片缩放类型 data.setScaleType(scaleType: ScaleType)
设置图片的重复样式 data.setTileModeXY(value: TileMode)
设置角半径 data.setCornerRadius(cornerRadius: number)
设置图片显示的宽度 data.setWidth(width: number)
设置图片显示的高度 data.setHeight(height: number)
设置边框线宽 data.setBorderWidth(borderWidth: number)
设置背景颜色 data.setBackgroundColor(value: string | CanvasGradient | CanvasPattern)
设置当前场景上下文context

data.setContext(context:common.UIAbilityContext)

约束与限制

在下述版本验证通过：

DevEco Studio: NEXT Beta1-5.0.3.806,SDK:API12 Release(5.0.0.66)

HSP场景适配:

RoundedImageView.Model配置类新增setContext(context:common.UIAbilityContext)接口, 在HSP场景下需要传入正确的context, 才能保证三方库后续正确获取Resource资源。

非HSP场景不影响原功能, context可以不传。

目录结构

|---- RoundedImageView
|     |---- entry                       # 示例代码文件夹
|     |---- library            # RoundedImageView库文件夹
|           |---- src     
|                   |---- main 
|                           |---- ets 
|                                   |---- components
|                                             |---- DownloadUtils.ts  # 图片下载工具类
|                                             |---- FileUtils.ts  # 文件操作工具类
|                                             |---- PixelMapUtils.ts  # PixelMap工具类
|                                             |---- RoundedImageView.ets  # 库的核心实现
|                                             |---- ScaleType.ts  # ScaleType枚举
|                                             |---- SrcType.ts  # SrcType枚举
|                                             |---- TileMode.ts  # TileMode枚举
|                                             |---- GlobalContext.ts  # GlobalContext替代globalThis
|     |---- README.md                   # 安装使用方法  
|     |---- README_zh.md                   # 安装使用方法