HDC2021技術(shù)分論壇：ArkUI 3.0讓多設(shè)備開(kāi)發(fā)更簡(jiǎn)單！
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
HarmonyOS自誕生以來(lái)，就是為滿足分布式多設(shè)備應(yīng)用場(chǎng)景而設(shè)計(jì)的，大到智慧屏、車(chē)機(jī)、平板，小到手機(jī)、手表。在多設(shè)備場(chǎng)景下進(jìn)行應(yīng)用UI界面開(kāi)發(fā)，面臨新的困難與挑戰(zhàn)，如下圖所示：
圖1 多設(shè)備開(kāi)發(fā)的挑戰(zhàn)
為了使UI界面在色彩風(fēng)格、屏幕尺寸、交互方式和組件功能等差異下仍能夠正常顯示，無(wú)疑需要開(kāi)發(fā)人員花費(fèi)大量精力在UI適配。開(kāi)發(fā)人員常常需要實(shí)現(xiàn)多套界面布局(甚至多套工程)，來(lái)滿足不同設(shè)備間的設(shè)計(jì)差異。即使頁(yè)面差異不大，也需要進(jìn)行多設(shè)備測(cè)試，多次打包編譯在設(shè)備或者模擬器上運(yùn)行查看效果。后期維護(hù)過(guò)程中也需要不斷查看不同設(shè)備下的兼容性，這些都極大地增加了應(yīng)用開(kāi)發(fā)者的工作量。
為了解決上述問(wèn)題，簡(jiǎn)化開(kāi)發(fā)者在多設(shè)備上的開(kāi)發(fā)調(diào)試成本，我們提出了一次開(kāi)發(fā)多端部署的設(shè)計(jì)理念，實(shí)現(xiàn)通過(guò)一套工程代碼，一次開(kāi)發(fā)上架，即可按需部署到不同設(shè)備。為了實(shí)現(xiàn)這一目標(biāo)，我們從Harmony系統(tǒng)能力、ArkUI 3.0框架能力和開(kāi)發(fā)工具能力三個(gè)方面，為開(kāi)發(fā)者提供了多種適配方法和能力。下面將一一為大家介紹。
一、HarmonyOS系統(tǒng)能力
首先介紹一下系統(tǒng)層面提供的能力。系統(tǒng)能力無(wú)需開(kāi)發(fā)者進(jìn)行頁(yè)面調(diào)整，也無(wú)需進(jìn)行業(yè)務(wù)邏輯調(diào)整，僅通過(guò)增加簡(jiǎn)單的幾行配置描述，即可由系統(tǒng)進(jìn)行多設(shè)備適配。系統(tǒng)能力與開(kāi)發(fā)范式無(wú)關(guān)，因此在新的UI編程框架下仍可使用。下面我們依次介紹兩種系統(tǒng)能力：模擬小窗和平行視界。
1. 模擬小窗
模擬小窗是最常用也是最簡(jiǎn)單的一種多設(shè)備適配方式，通過(guò)利用系統(tǒng)的懸浮窗能力，將低分辨率的應(yīng)用，以懸浮窗口的形式在高分辨率屏幕上進(jìn)行顯示。常見(jiàn)的使用場(chǎng)景是手機(jī)應(yīng)用在平板或PC上運(yùn)行的場(chǎng)景，如下圖所示：
圖2 模擬小窗
模擬小窗的使用方式非常簡(jiǎn)單，只需在項(xiàng)目中config.json文件中增加兩條描述，分別配置好應(yīng)用的目標(biāo)設(shè)備類(lèi)型和響應(yīng)的窗口尺寸，即可將低分辨率的應(yīng)用運(yùn)行在高分辨率設(shè)備上。示例代碼如下：
- {
- “app”: {
- ...
- “smartWindowSize”:“360*640”,
- “smartWindowDeviceType”: [
- “tablet”
- ]
- },
- ...
- }
這種使用方式能夠良好地保證我們應(yīng)用的展示效果和原始平臺(tái)效果是一致的，無(wú)需開(kāi)發(fā)者進(jìn)行額外的界面的適配。但是這種方式也有局限，最顯著的問(wèn)題就是沒(méi)有辦法利用全部高分辨率的屏幕，整個(gè)屏幕內(nèi)展示的數(shù)據(jù)量沒(méi)有因屏幕分辨率的增加而增大，造成了屏幕上空間的浪費(fèi)。為解決此問(wèn)題，系統(tǒng)提供了另一種適配方案——平行視界。
2. 平行視界
系統(tǒng)針對(duì)折疊屏、平板設(shè)備提供了平行視界的能力，借助分屏顯示的思想，將屏幕分為左右兩個(gè)部分，分別顯示應(yīng)用相關(guān)聯(lián)的兩個(gè)頁(yè)面內(nèi)容。這樣每個(gè)區(qū)域都能夠保持良好的界面顯示效果，也增加了屏幕內(nèi)的有效數(shù)據(jù)量，良好地利用了屏幕顯示區(qū)域。常用于新聞、購(gòu)物類(lèi)的場(chǎng)景，將相關(guān)的兩個(gè)頁(yè)面同時(shí)顯示，如下圖所示：
圖3 平行視界
使用平行視界時(shí)，首先需要在config.json文件中配置metaData，聲明支持平行視界。同時(shí)，還需要增加easygo.json文件進(jìn)行頁(yè)面路由關(guān)系配置，指導(dǎo)系統(tǒng)進(jìn)行分屏顯示。
平行視界的詳細(xì)使用說(shuō)明，可參考官網(wǎng)：
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/multi-device-ui-app-multiplier-guidelines-0000001135848428
二、ArkUI 3.0框架能力
上述兩種是通過(guò)配置即可實(shí)現(xiàn)的多端適配方案，使用簡(jiǎn)單，但是使用場(chǎng)景比較受限。為了更加精準(zhǔn)地適配多設(shè)備界面，ArkUI 3.0框架提供了媒體查詢、多態(tài)控件、原子布局和柵格系統(tǒng)，方便開(kāi)發(fā)者選擇合適的能力進(jìn)行UI界面構(gòu)建。
1. 媒體查詢
媒體查詢是CSS提供的標(biāo)準(zhǔn)能力，是響應(yīng)式Web設(shè)計(jì)的關(guān)鍵部分。在新的UI范式中仍保留了此能力，作為最基礎(chǔ)的UI響應(yīng)式設(shè)計(jì)能力。在新的UI范式中，通過(guò)API接口方式對(duì)外提供媒體查詢能力，可以探查的范圍包括頁(yè)面尺寸、設(shè)備分辨率、屏幕方向、頁(yè)面寬高比、屏幕尺寸、設(shè)備類(lèi)型、屏幕類(lèi)型和主題模式。開(kāi)發(fā)者可以根據(jù)不同的查詢結(jié)果，進(jìn)行定制化處理。比如：當(dāng)屏幕方向變化時(shí)，可以調(diào)整界面內(nèi)布局樣式和組件顯示效果;也可以根據(jù)設(shè)備類(lèi)型不同，控制組件的顯示和隱藏;并且當(dāng)查詢狀態(tài)發(fā)生變化時(shí)，提供事件通知。
圖4 媒體查詢
2. 多態(tài)組件
UI界面構(gòu)建離不開(kāi)組件的使用。ArkUI 3.0框架為開(kāi)發(fā)者提供了多態(tài)組件，通過(guò)組件將不同設(shè)備的樣式風(fēng)格和交互方式進(jìn)行封裝，替開(kāi)發(fā)者完成大部分適配相關(guān)工作。開(kāi)發(fā)者在使用多態(tài)組件時(shí)，無(wú)需考慮設(shè)備差異，只需關(guān)注功能實(shí)現(xiàn)即可。
下面通過(guò)一個(gè)示例來(lái)看看，相同的一套開(kāi)發(fā)代碼在手機(jī)、智慧屏和車(chē)機(jī)上展示的不同效果。
圖5 多態(tài)組件
示例代碼如下：
- Column() {
- Text("手機(jī) / 平板")
- .margin({top: 150})
- Button("普通按鈕")
- .margin({top: 40})
- .onClick(() => {
- AlertDialog.show({title: '發(fā)現(xiàn)新版本', message: '當(dāng)前使用移動(dòng)數(shù)據(jù)網(wǎng)絡(luò)，將消耗 XXX MB流量，是否更新',
- primaryButton: {
- value: '立即更新',
- action: () => {}
- },
- secondaryButton: {
- value: '以后再說(shuō)',
- action: () => {}
- }})
- })
- }
產(chǎn)品設(shè)計(jì)人員常常不滿足于使用系統(tǒng)默認(rèn)樣式，希望能夠針對(duì)不同的平臺(tái)使用自定義的風(fēng)格樣式。為了避免開(kāi)發(fā)者逐個(gè)組件地進(jìn)行樣式調(diào)整，ArkUI 3.0框架將組件樣式相關(guān)設(shè)置信息(如顏色、尺寸、圓角弧度、內(nèi)容文本等)抽象出來(lái)形成了一個(gè)參數(shù)表，按照參數(shù)名稱和參數(shù)值的方式進(jìn)行映射。UI組件樣式屬性值都來(lái)自這張參數(shù)表，開(kāi)發(fā)者和設(shè)計(jì)人員只需調(diào)整參數(shù)值，即可調(diào)整組件的顯示效果。
3. 原子布局
多設(shè)備間差異最大的還是屏幕的分辨率，差異分辨率適配離不開(kāi)自適應(yīng)布局的能力。針對(duì)常見(jiàn)的開(kāi)發(fā)場(chǎng)景，我們提煉了七種原子布局能力。這些布局可以獨(dú)立使用，也可多種布局疊加使用。下面我們依次介紹這七種原子布局能力：
(1)折行布局： 常用于橫豎屏適配或手機(jī)向平板切換的場(chǎng)景。比如，豎直方向空間減少，但是水平方向上顯示區(qū)域增加，這時(shí)可考慮使用折行布局，將豎直方向的排版變成水平方向。
圖6 折行布局
折行布局利用了Flex布局的折行能力實(shí)現(xiàn)，配合布局約束設(shè)置，即可實(shí)現(xiàn)折行排布效果。示例代碼如下：
- Flex({direction: FlexDirection.Column, wrap: FlexWrap.Wrap}) {
- Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {
- Text("First Content")
- .fontColor(Color.White)
- .fontSize(30)
- }
- .constraintSize({minWidth: '50%', minHeight: '50%', maxWidth: 400})
- .backgroundColor(Color.Gray)
- Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {
- Text("Second Content")
- .fontSize(30)
- .fontColor(Color.White)
- }
- .constraintSize({minWidth: '50%', minHeight: '50%', maxWidth: 400})
- .backgroundColor('rgb(207, 171, 103)')
(2)均分布局： 常用于內(nèi)容數(shù)量固定、均分顯示的場(chǎng)景，比如工具欄、底部菜單欄等。
圖7 均分布局
示例代碼如下：
- @Entry
- @Component
- struct Index {
- build() {
- Flex({direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly}) {
- Text('Hello')
- .fontSize(20)
- .borderColor(Color.Red)
- .borderWidth(1)
- Text('World')
- .fontSize(20)
- .borderColor(Color.Red)
- .borderWidth(1)
- Text('Ark')
- .fontSize(20)
- .borderColor(Color.Red)
- .borderWidth(1)
- Text('UI')
- .fontSize(20)
- .borderColor(Color.Red)
- .borderWidth(1)
- }
- .width('100%')
- .height('100%')
- }
- }
僅需配置為FlexAlign.SpaceEvenly模式，即可在Flex組件中將內(nèi)容均分顯示。
(3)隱藏布局： 是一種比較高級(jí)的布局方式，常用于分辨率變化較大，且不同分辨率下顯示內(nèi)容有所差異的場(chǎng)景。主要思想是通過(guò)增加或減少顯示內(nèi)容，來(lái)保持最佳的顯示效果。比如媒體播放控制器，在寬屏場(chǎng)景可以完整顯示全部控制項(xiàng)(包含播放、暫停、上一首、下一首、快進(jìn)、快退，可能還有點(diǎn)贊和收藏按鈕等)，而在低分辨率場(chǎng)景只保留部分控制項(xiàng)(比如播放、暫停、上一首、下一首按鈕)。
圖8 隱藏布局
隱藏布局使用方式非常簡(jiǎn)單，只需通過(guò)displayPriority方法設(shè)置顯示優(yōu)先級(jí)，具有相同優(yōu)先級(jí)的元素會(huì)同時(shí)顯示或隱藏。在進(jìn)行布局計(jì)算時(shí)，會(huì)根據(jù)當(dāng)前可用空間，計(jì)算當(dāng)前可顯示組件進(jìn)行顯示。示例代碼如下：
- Row({space: 10}) {
- Text('1')
- .width(100)
- .textAlign(TextAlign.Center)
- .fontSize(40)
- .backgroundColor(Color.Red)
- .displayPriority(2)
- Text('2')
- .width(100)
- .fontSize(40)
- .textAlign(TextAlign.Center)
- .backgroundColor(Color.Red)
- .displayPriority(1)
- Text('3')
- .width(100)
- .textAlign(TextAlign.Center)
- .fontSize(40)
- .backgroundColor(Color.Red)
- .displayPriority(3)
- Text('4')
- .width(100)
- .textAlign(TextAlign.Center)
- .fontSize(40)
- .backgroundColor(Color.Red)
- .displayPriority(1)
- Text('5')
- .width(100)
- .textAlign(TextAlign.Center)
- .fontSize(40)
- .backgroundColor(Color.Red)
- .displayPriority(2)
- }
(4)占比布局： 是一種很常見(jiàn)的布局，就是根據(jù)容器尺寸按照比例進(jìn)行顯示。
圖9 占比布局
通過(guò)設(shè)置百分比尺寸，即可實(shí)現(xiàn)比例調(diào)整。示例代碼如下：
- @Entry
- @Component
- struct Index {
- build() {
- Row() {
- Text('Hello')
- .fontSize(20)
- .width('50%')
- .backgroundColor(Color.Red)
- Text('World')
- .fontSize(20)
- .width('20%')
- .backgroundColor(Color.Yellow)
- Text('Ark')
- .fontSize(20)
- .width('15%')
- .backgroundColor(Color.Green)
- Text('UI')
- .fontSize(20)
- .width('15%')
- .backgroundColor(Color.Gray)
- }
- .width('100%')
- .height('100%')
- }
- }
(5)拉伸縮放布局： 組件尺寸跟隨父容器尺寸變化，產(chǎn)生拉伸或縮放的展示效果。
圖10 拉伸縮放布局
通過(guò)設(shè)置相對(duì)容器的比例，實(shí)現(xiàn)拉伸或縮放的展示效果。示例代碼如下：
- Row() {
- Image($r('app.media.background'))
- .objectFit(ImageFit.Fill)
- .width('100%')
- .height('100%')
- }
(6)固定寬高比布局： 在拉伸縮放時(shí)保持自身寬高比，通常用于圖片縮放場(chǎng)景中，可保持圖片顯示效果正常，避免圖片被拉長(zhǎng)或壓癟，引起顯示失真。
圖11 固定寬高比布局
通過(guò)設(shè)置寬高比，保持按照固定寬高比進(jìn)行拉伸顯示，保障圖片不會(huì)產(chǎn)生變形。示例代碼如下：
- Row() {
- Image($r('app.media.background'))
- .objectFit(ImageFit.Fill)
- .width('100%')
- .height('100%')
- .aspectRatio(1.2)
- }
(7)延伸布局： 根據(jù)尺寸調(diào)整內(nèi)容顯示數(shù)量，主要是通過(guò)像列表這樣的能力來(lái)實(shí)現(xiàn)。
圖12 延伸布局
根據(jù)寬度不同，顯示不同數(shù)量的內(nèi)容，并且可以通過(guò)滑動(dòng)操作，顯示出更多內(nèi)容。示例代碼如下：
- @Entry
- @Component
- struct Index {
- private data: string[] = ['Hello', 'World', 'Ark', 'UI', 'This', 'Is', 'Layout', 'Demo']
- build() {
- Flex({direction:FlexDirection.Column, justifyContent: FlexAlign.Center}) {
- List({space: 10}) {
- ForEach(this.data, (item) => {
- ListItem() {
- Text(item)
- .fontSize(20)
- .width(80)
- }.height(80)
- .backgroundColor(Color.Red)
- })
- }
- .listDirection(Axis.Horizontal)
- .width('100%')
- .height(100)
- }
- .width('100%')
- .height('100%')
- }
- }
此示例通過(guò)List作為布局容器，進(jìn)行內(nèi)容線性排布，并支持滑動(dòng)響應(yīng)。
4. 柵格系統(tǒng)
ArkUI 3.0框架還提供了完整的柵格系統(tǒng)。所謂柵格系統(tǒng)是來(lái)自UX設(shè)計(jì)中的柵格設(shè)計(jì)，將屏幕寬度按照不同數(shù)量的柵格劃分為不同的列，組件的尺寸占用一個(gè)或多個(gè)柵格。采用這種方式進(jìn)行設(shè)計(jì)的布局系統(tǒng)，稱之為柵格系統(tǒng)。使用柵格系統(tǒng)，可以屏蔽屏幕分辨率的差異，在不同分辨率的屏幕上保持顯示內(nèi)容的相對(duì)尺寸一致。
常見(jiàn)的柵格系統(tǒng)有8柵格系統(tǒng)和12柵格系統(tǒng)，而我們提供的是動(dòng)態(tài)柵格系統(tǒng)，可以根據(jù)不同的屏幕尺寸，動(dòng)態(tài)地調(diào)整柵格數(shù)量。使用動(dòng)態(tài)柵格系統(tǒng)時(shí)，不同分辨率的設(shè)備使用不同的柵格配置，比如：手機(jī)豎屏采用4柵格系統(tǒng)，手機(jī)橫屏和折疊屏采用8柵格系統(tǒng)，大屏采用12柵格系統(tǒng)。
圖13 動(dòng)態(tài)柵格系統(tǒng)
為了方便開(kāi)發(fā)者使用，ArkUI 3.0框架提供了柵格布局容器GridContainer。下面我們來(lái)看一個(gè)示例，代碼如下：
- Stack() {
- GridContainer({sizeType: SizeType.Auto}) {
- Row() {
- Button('OK')
- .fontSize(30)
- .gridSpan(2)
- .useSizeType({lg: 4})
- }
- }
- }
柵格布局容器可以設(shè)置為固定柵格數(shù)，也可以設(shè)置為Auto模式。此示例采用的是Auto模式，柵格布局容器會(huì)根據(jù)寬度動(dòng)態(tài)調(diào)整柵格數(shù)量。同時(shí)通過(guò)useSizeType屬性方法，可以設(shè)置在不同柵格模式下，組件占用的柵格數(shù)量。比如：“.useSizeType({lg: 4})”表示在large柵格系統(tǒng)(即12柵格系統(tǒng))中，Button組件寬度占用4柵格顯示。
因此，此示例在手機(jī)和平板上的顯示效果如下：
圖14 顯示效果
三、開(kāi)發(fā)工具能力
除了上面的系統(tǒng)能力和ArkUI 3.0框架能力外，我們還從開(kāi)發(fā)工具(DevEco Studio)方面，為開(kāi)發(fā)者提供了各種各樣的開(kāi)發(fā)模板，以及多設(shè)備預(yù)覽等能力，減少開(kāi)發(fā)者的開(kāi)發(fā)調(diào)試成本，提升開(kāi)發(fā)效率。
1. 開(kāi)發(fā)模板
開(kāi)發(fā)模板主要包括工程模板和卡片模板。
- 工程模板： DevEco Studio預(yù)置了豐富的工程模板，可以根據(jù)工程向?qū)лp松創(chuàng)建適應(yīng)于各類(lèi)設(shè)備的工程，并自動(dòng)生成對(duì)應(yīng)的代碼和資源模板。創(chuàng)建工程時(shí)，開(kāi)發(fā)者可以挑選合適的工程模板。
- 卡片模板： DevEco Studio提供了多種類(lèi)型的卡片模板，開(kāi)發(fā)者可以根據(jù)需要展示的信息類(lèi)型靈活選擇模板，快速構(gòu)建服務(wù)卡片。
圖15 工程模板和卡片模板
2. 多設(shè)備預(yù)覽
DevEco Studio還支持多設(shè)備預(yù)覽能力，開(kāi)發(fā)者可以在同一窗口中，同時(shí)查看多種設(shè)備下UI界面的展示效果。預(yù)覽器與真機(jī)設(shè)備采用相同渲染引擎和UI框架，可以最大程度地做到預(yù)覽效果與真機(jī)運(yùn)行效果的一致。以下gif展示了多設(shè)備預(yù)覽能力：
感興趣的小伙伴，可以從官網(wǎng)下載和體驗(yàn)DevEco Studio新版本：
https://developer.harmonyos.com/cn/develop/devecostudio
四、結(jié)束語(yǔ)
實(shí)現(xiàn)完美的一次開(kāi)發(fā)多端部署效果，離不開(kāi)開(kāi)發(fā)者的參與。UI開(kāi)發(fā)框架和系統(tǒng)在實(shí)現(xiàn)一次開(kāi)發(fā)多端部署的過(guò)程中進(jìn)行了初步的探索，也期待開(kāi)發(fā)者能反饋更多的多設(shè)備UI開(kāi)發(fā)過(guò)程中的痛點(diǎn)，以及期待系統(tǒng)框架提供的能力。歡迎開(kāi)發(fā)者和我們一起，在開(kāi)源社區(qū)將一次開(kāi)發(fā)多端部署的能力豐富起來(lái)!
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
