鸿蒙开发next【图片美化】一多开发实例_鸿蒙 大图预览-爱代码爱编程
一多图片美化场景概述
本文从目前流行的垂类市场中，选择图片美化应用作为典型案例详细介绍在“一多”实际开发中的应用。一多图片美化应用包含相册，大图预览，图片编辑功能。
当前系统的产品形态主要有手机、折叠屏、tablet和2in1四种，本文分别从UX设计、页面开发两个角度给出符合“一多”的参考样例，介绍“一多”图片美化应用在开发过程中的最佳实践。
UX设计
本示例中的图片美化应用包含相册、大图预览、图片编辑页面。
架构设计
HarmonyOS的分层架构主要包括三个层次：产品定制层、基础特性层和公共能力层，为开发者构建了一个清晰、高效、可扩展的设计架构。
页面开发
本章介绍图片美化应用中如何使用”一多”的布局能力，完成页面层级的一套代码、多端适配。同时介绍图片美化应用中的交互开发。
布局能力
本节由不同页面展开，介绍每个页面区域使用到的具体布局能力，帮助开发者从零到一进行图片美化应用的开发。
相册
相册页显示所有图片。观察相册页在折叠屏上的UX设计图，可以进行如下设计：
- 将相册页划分为2个区域，效果图如下：
相册页的2个基础区域介绍及实现方案如下表所示：
| 区域编号 | 简介 | 实现方案 |
|---|---|---|
| 1 | 顶部返回 | 使用自适应布局实现左侧返回图标及文字，右侧图标。 |
| 2 | 相册列表 | 使用网格实现相册列表。 |
示意图如下：
| 示意图 | sm | md | lg |
|---|---|---|---|
| 效果图 |
|
|
|
当组件区域宽度变化时，可以通过 onAreaChangeAPI获取组件的相关信息，并调整相册列数。
// 监控组件区域变化
Flex.onAreaChange((oldValue: Area, newValue: Area) => {
this.GridColumn = this.getGridColumn(newValue.width)
})
// 列数计算公式
getGridColumn(value: Length): number {
return Math.floor(2 * ((parseInt(JSON.stringify(value)) / 360) - 1) + 4)
}大图预览
大图预览显示一张图片。观察大图预览页在折叠屏上的UX设计图，可以进行如下设计：
- 将大图预览页划分为4个区域，效果图如下：
相册页的4个基础区域介绍及实现方案如下表所示：
| 区域编号 | 简介 | 实现方案 |
|---|---|---|
| 1 | 顶部返回 | 使用自适应布局实现左侧返回图标及文字，右侧图标。 |
| 2 | 图片展示 | 使用Image组件展示图片。 |
| 3 | 相册滚动展示 | 使用列表实现相册滚动展示。 |
| 4 | 图片操作 | 使用自适应布局实现图标自适应摆放。 |
示意图如下：
| 示意图 | sm | md | lg |
|---|---|---|---|
| 效果图 |
|
|
|
图片编辑
在折叠屏中，可以切换图片区域与编辑操作区域的摆放位置。观察图片编辑页在折叠屏上的UX设计图，可以进行如下设计：
- 将相册页划分为3个区域，效果图如下：
- 区域2与区域3使用Flex组件实现左右摆放与上下摆放的切换
图片编辑的3个基础区域介绍及实现方案如下表所示：
| 区域编号 | 简介 | 实现方案 |
|---|---|---|
| 1 | 顶部返回 | 使用自适应布局实现左侧返回图标及文字，右侧图标。 |
| 2 | 图片展示 | 使用Image组件展示图片。 |
| 3 | 编辑操作栏 | 使用Flex组件实现编辑操作栏的自适应摆放。 |
示意图如下：
| 示意图 | sm | md | lg |
|---|---|---|---|
| 效果图 |
|
|
|
交互开发
对于不同类型的智能设备，用户可能有不同的交互方式，如通过触摸屏、鼠标、触控板等。如果针对不同的交互方式单独做适配，会增加开发工作量同时产生大量重复代码。为解决这一问题，我们统一了各种交互方式的API，即实现了交互归一。常见的交互有触屏事件、键鼠事件、焦点事件。图片美化涉及的交互主要涉及图片的缩放。
双指缩放
在触控屏与触控板上进行双指捏合或张开可以实现缩放功能。本文中有两处涉及双指缩放：
- 相册页，双指缩放控制相册中图片列数变更。
- 大图预览页，双指缩放控制图片的宽高变更。
双指缩放使用PinchGesture API实现， 当触发双指缩放时，可以实时获取缩放比例参数，传入 scaleAPI（控制组件缩放的API）即可调整图片的比例。
Row() {
Column() {
Image($r('app.media.photo10'))
.autoResize(true)
}
}
// 组件缩放 API
.scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
// 双指缩放 API
.gesture(PinchGesture({ fingers: 2 }).onActionStart((event: GestureEvent | undefined) => {
console.info('Pinch start');
})
.onActionUpdate((event: GestureEvent | undefined) => {
if (event) {
this.scaleValue = this.pinchValue * event.scale;
}
})
.onActionEnd(() => {
this.pinchValue = this.scaleValue;
console.info('Pinch end');
}))