Compose Multiplatform 實戰：在Android、iOS模擬器上跑CMP專案

前言

Compose Multiplatform (簡稱CMP)

昨天我們才剛建置好CMP專案

若你有成功導入專案到IDE中

可以看到類似下方的資料夾結構

這時候我們可以先試試看是否可以編譯

若成功編譯

可以看到類似下方畫面

使用模擬器打開實作好的app畫面

右下角會提示編譯成功與否訊息

安裝Android模擬器

如果你是用昨天文章:用Wizard創建CMP專案來創建的話

那他基本的專案配置都已經先幫你配好了

大致上你只要確保Day2時安裝CMP環境時

的系統環境有裝好

如JDK、Kotlin...等等

接著若要在電腦上模擬

則需要創建Android模擬器

點擊最上方系統欄中的Tools > Device Manager

右方會彈出Device Manager視窗

點擊上面的 + 並點擊 Create Vitual Device

會彈出視窗讓你選擇你要創建的Android模擬器

包括有Phone、Tablet、TV、Watch、Automative等等

那因為Android Studio後期主要由Google維護

所以有提供帶有Google Pixel OS的 Android Phone的AVD(Android Vitual Device)讓你下載

當然Pixel AVD的映像檔也可以在Android Developer官網上下載

不過Google貼心的幫你整合至IDE中了

選擇想要的Phone並點右下角的Next

會進入選擇Android SDK的畫面

這邊也是根據你想要的實測的SDK去選

若是之前沒下載過的SDK

會呈現灰色並且右邊有下載圖示

下載完成後就可以選擇了

點Next後可以設定模擬器的設定

如：方向、網路、開機設定、RAM大小、SDK大小等等...

選好後按右下角Finish即可

透過IDE Build Android App

在上方選擇剛創好的模擬器

並點擊上方Run專案的按鈕(類似綠色的播放按鈕)讓IDE幫你Build且裝到模擬器中

手動 Build Android App

在terminal中執行以下指令來Build出APK

run ./gradlew :yourComposeAppProjectName:assembleDebug

yourComposeAppProjectName 是你創建專案的project name assembleDebug 是指Build debug版的出來

找到 .apk file in yourComposeAppProjectName/build/outputs/apk/debug/yourComposeAppProjectName-debug.apk

手動安裝

有兩種方法

1.把APK拖拉到模擬器中

2.使用指令安裝 (若在真機上adb時使用時，需打開開發者模式)

adb install ../xxx/yourComposeAppProjectName-debug.apk

安裝iOS模擬器

確保Day2 安裝CMP環境時

安裝了Xcode

在Android Studio畫面最上方有個Android小綠人圖示的地方

點開下拉式視窗

這一欄是集成了在專案中設定的Configuration

可以是Build Android app、Build iOS app 或是一些gradle task...等等

若是第一次在Android Studio 中 Run iOS app

可能不會有預設的Build iOS Configutraion

所以可以點擊Edit Configuration去設定

點左上角 + > iOS Application

隨後可以根據你的需求

a. 設task的名稱

b. Xcode project file 最右邊點擊folder icon

c. 彈出的檔案選擇器中可以選.xcodeproj的路徑

(反藍.xcodeproj後點擊open)

d. 選擇.xcodeproj路徑後

IDE會自動讀裡面的 scheme 跟 configuration

所以接下來我們只要選擇目標的iOS emulator版本、型號即可

e. 把Build Configuration改成剛創建的設定

按鈕Run按鈕即可

透過Xcode Build iOS App

因為CMP是直接在root folder下創建iOS project

所以直接透過Xcode打開CMP專案底下的iOSApp資料夾

就可以透過Xcode直接Build iOSApp

總結

至此已經可以完整Build CMP專案並在Android 跟iOS模擬器上跑了

<img src="/images/compose/015.png" alt="Cover" class="w-half prose-img"/ loading="lazy" decoding="async">
明天我想跟大家介紹

CMP的專案結構跟一些可能遇到的疑難雜症

最新文章