HarmonyOS Next 應用UI生成工具介紹

背景

HarmonyOS Next適配開發過程中難買難要參考之前邏輯，但是可能時間較長文檔不全，只能參考Android或iOS代碼，有些邏輯較重的場景還可以通過AI工具將Android 的Java代碼邏輯轉成TS完成部分復用。對于一些UI場景只能手動去寫，雖然ArkUI寫頁面效率比較高，但是如果頁面比較多，工作量也不小，官方提供了Android APK轉ArkTS頁面的工具，本文帶大家一起體驗嘗試一波。

工具介紹

UI Generator用于快速生成可編譯、可運行的HarmonyOS UI工程，支持基于已有UI布局文件（XML），快速生成對應的HarmonyOS UI代碼，其中包含HarmonyOS基礎工程、頁面布局、組件及屬性和資源文件等。

需要使用使用DevEco Studio 5.0.3.700及以上版本。

工具配置

在DevEco-Studio中，打開設置頁面，點擊插件，找到已安裝的UI Generator插件后選擇開啟：
在這里插入圖片描述

應用、確認后，在工具欄工具中點擊“Generate Project from …"：

在這里插入圖片描述

第一次進入需要同意用戶協議：

在這里插入圖片描述

接下來選擇Android的安裝包apk路徑和Android SDK路徑：
在這里插入圖片描述

接著選擇要轉換的xml布局：

在這里插入圖片描述

選擇下一步：
在這里插入圖片描述

這里面Destination Path為生成HarmonyOS Next公測的路徑和名稱，點擊確認后開始轉換，轉換日志如下：

2025-01-22 12:08:02,885   In /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug
2025-01-22 12:08:02,960   sdkdir: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk
2025-01-22 12:08:02,960   apkpath: /Users/shen/Downloads/app-debug.apk
2025-01-22 12:08:02,960   androidsdk: /Users/shen/Library/Android/sdk
2025-01-22 12:08:02,960   aapt: /Users/shen/Library/Android/sdk/build-tools/34.0.0/aapt2
2025-01-22 12:08:02,962   bash dumpres.sh /Users/shen/Downloads/app-debug.apk /Users/shen/Library/Android/sdk/build-tools/34.0.0/aapt2
2025-01-22 12:08:05,916   run dump apk resources finished.
2025-01-22 12:08:05,917   =================================================
2025-01-22 12:08:05,917   /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/maple-decompile.sh exec success
2025-01-22 12:08:05,917   =================================================
2025-01-22 12:08:05,920   In /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/runs
2025-01-22 12:08:05,939   dexdir: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/unzip
2025-01-22 12:08:05,939   androiddir: /Users/shen/Library/Android/sdk
2025-01-22 12:08:05,939   componentspath: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/runs/components.txt
2025-01-22 12:08:05,950   bash /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/bin/component_analyze.sh --dexdump-dir=/Users/shen/Library/Android/sdk/build-tools/34.0.0/dexdump --dex-dir=/Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/unzip --mplsdk-dir=/Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk --component-include=false /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/runs/components.txt
2025-01-22 12:08:05,965   dexdump-dir: /Users/shen/Library/Android/sdk/build-tools/34.0.0/dexdump
2025-01-22 12:08:05,965   dex-dir: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/unzip
2025-01-22 12:08:05,966   analysis start!
2025-01-22 12:08:05,967   Darwin
2025-01-22 12:08:05,967   xml analysis start
2025-01-22 12:08:05,975   =================================================
2025-01-22 12:08:05,975   /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/runs/maple-files-dex.sh exec success
2025-01-22 12:08:05,975   =================================================
2025-01-22 12:08:44,098   In /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk
2025-01-22 12:08:44,105   Darwin
2025-01-22 12:08:44,129   target is xml file, no need to analyze dex dependency, exit dex-crop.sh
2025-01-22 12:08:44,130   =================================================
2025-01-22 12:08:44,130   /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/bin/dex_crop.sh exec success
2025-01-22 12:08:44,130   =================================================
2025-01-22 12:08:44,143   In /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/components
2025-01-22 12:08:44,173   cp: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/maple_deps/host_maple/bin_darwin/dex2mpl is a directory (not copied).
2025-01-22 12:08:44,180   cp: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/autodeps/bin_darwin/dex2deps is a directory (not copied).
2025-01-22 12:08:44,181   cp: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/autodeps/bin_darwin/gendeps is a directory (not copied).
2025-01-22 12:08:44,183   chmod: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/autodeps/bin/*: No such file or directory
2025-01-22 12:08:44,185   maplebinary: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/maple_deps/host_maple/bin/maple
2025-01-22 12:08:44,185   xmldir: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/decompile
2025-01-22 12:08:44,185   component: layout/activity_preview.xml
2025-01-22 12:08:44,185   sdkdir: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk
2025-01-22 12:08:44,185   apkname: app-debug
2025-01-22 12:08:44,185   sourcedir:
2025-01-22 12:08:44,185   mplfile: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/components/test.mpl
2025-01-22 12:08:44,185   dexdump:
2025-01-22 12:08:44,187   /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/maple_deps/host_maple/bin/maple --infile /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/components/test.mpl --me-opt="--O2 --quiet --no-nativeopt --meverify --threads=4 --no-ignoreipa --enable-ea" --mpl2mpl-opt="--O2 --quiet --regnativefunc --deferred-visit --no-nativeopt --maplelinker --emitVtableImpl --maplelinker-nolocal --sva --android-xml=/Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/decompile --xml-to-analyze=layout/activity_preview.xml --class-to-analyze=activity_preview --config-path=/Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/config_files" --save-temps
2025-01-22 12:08:46,235   Sighandler : signal handler isn't implemented for non-unix os
2025-01-22 12:08:46,235   Sighandler : signal handler isn't implemented for non-unix os
2025-01-22 12:08:46,235   Sighandler : signal handler isn't implemented for non-unix os
2025-01-22 12:08:46,235   Sighandler : signal handler isn't implemented for non-unix os
2025-01-22 12:08:46,235   Sighandler : signal handler isn't implemented for non-unix os
2025-01-22 12:08:46,235   Sighandler : signal handler isn't implemented for non-unix os
2025-01-22 12:08:46,235   Sighandler : signal handler isn't implemented for non-unix os
2025-01-22 12:08:46,763   android activities cnt : 10
2025-01-22 12:08:46,763   => Log File: android-ui-ir-activity_preview.log
2025-01-22 12:08:46,763   ==========> Save UI Generate Report to activity_preview_generation_report.json <==========
2025-01-22 12:08:46,769   =================================================
2025-01-22 12:08:46,769   /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/components/maple.sh exec success
2025-01-22 12:08:46,769   =================================================
2025-01-22 12:08:46,784   In /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/components
2025-01-22 12:08:46,787   Darwin
2025-01-22 12:08:46,793   dexdump-dir: /Users/shen/Library/Android/sdk
2025-01-22 12:08:46,793   dex-dir: /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/build/app-debug/unzip
2025-01-22 12:08:46,793   cropping analysis start!
2025-01-22 12:08:46,793   searching for all dexdump
2025-01-22 12:08:48,812   searching for all dexdump
2025-01-22 12:08:48,812   /Users/shen/Library/Android/sdk/build-tools/30.0.2/dexdump
2025-01-22 12:08:48,812   searching for all dex file
2025-01-22 12:08:48,815    1 dexdump location founded.
2025-01-22 12:08:49,409   =================================================
2025-01-22 12:08:49,409   /Users/shen/Library/Caches/Huawei/DevEcoStudio5.0/ui-generation/maple-sdk/bin/get_base_class.sh exec success
2025-01-22 12:08:49,409   =================================================
2025-01-22 12:08:49,458   Generation IR Time Elapsed: 5.368000 s
2025-01-22 12:09:06,886   Generation Success, Generated Project Location: 2025-01-22 12:09:06,886   /Users/shen/UIGenerationProjects/UIGeneration_app-debug_activity_preview
2025-01-22 12:09:06,886   Generation Project Time Elapsed: 0.129000 s

打開新工程，生成的頁面位于entry > src > main > ets > pages目錄下，可以在Previewer中查看頁面預覽效果。生成的新工程內的entry > src > main > resources目錄包含文本、圖像、顏色資源。

這里以一個簡單示例為例，Android xml：

<?xml version="1.0" encoding="utf-8"?>  
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:orientation="vertical">  <LinearLayout        android:id="@+id/container"  android:layout_width="213dp"  android:layout_height="wrap_content"  android:orientation="vertical">  </LinearLayout></ScrollView>

生成ArkTS代碼：

@Entry  
@Component  
export struct activity_preview {  build() {  /*  * FIXME: Unhandled property 'android:orientation'  */    Scroll() {  Column()  .id('container')  .width('213vp')  .alignItems(HorizontalAlign.Start)  }  .align(Alignment.TopStart)  .width('100%')  .height('100%')  }  
}

不支持生成的組件、屬性會以注釋的形式給出，方便后續定位修改。