使用 Remote Compose 驅動互動式介面

大家好！

我是 Nicolas Roard，擔任 Remote Compose 專案的技術負責人。

我是 John Hoford。

我是 Remote Compose 的開發人員。

我是 John Zoeller，負責 Wear OS 的開發人員關係。

好，讓我們開始吧

首先，我會快速介紹 Remote Compose 試圖解決的問題。

因此，當您談論或思考 Android 上的 UI 時，通常會將 UI 視為應用程式和應用程式程序的一部分，對吧？

有時您會想將 UI 封裝並傳送到其他地方，例如遠端介面。

因此，遠端介面基本上就像這些例子，例如手錶樣式、小工具，甚至是您自己的應用程式或其他應用程式，對吧？

因此，這些基本上都是遠端介面的例子。

因此，在其他地方 (可能是您的應用程式，也可能是伺服器)，其他地方知道要傳送什麼內容到該遠端介面。

而…

我的音箱會怎麼樣？

兩者之間基本上存在距離。

距離可以是實際距離，也可以是網路連線，對吧？

也可能只是程序邊界。

你可能使用同一部裝置。

但無論是什麼，都需要付出代價。

最簡單的做法就是擷取使用者介面畫面，然後傳送出去。

但問題是，這種做法不夠快，對吧？

因此，我們改用 Remote Compose 傳送代表該 UI 的文件。

請記住，規模小有很多優勢。

這很重要。

我們在您傳送的第一個像素上看到了這一點，但實際上，您想在該介面上進行的任何更新都是如此，對吧？

你已完成來回行程。

因此，您會在遠端介面上收到事件、點擊、觸控等。

你必須請建立者提供新版本。

這可不妙。

因此，我們在許多方面都試圖透過 Remote Compose 解決這個問題。

我們看到文件已傳送。

除了文件之外，還有兩個非常重要的部分。

一個是建立文件的方式。

第二個是播放方式。

我提到我們要建立文件。

我們不會傳送螢幕畫面副本，也不會傳送應用程式。

我們提供三種方法，協助您建立這份文件。

一是 Compose API，二是程序式 Kotlin API (KMP)，三是 JSON 格式。

它們都會發出相同的位元組。

因此，我們提供了一組工具來建立這些文件，並透過 Compose API，實際利用 Android Studio 中的現有工具。

舉例來說，您可以在 IDE 中直接預覽開發中的內容。

不過，我們也正在開發一些強大的新工具，例如文件檢查工具。

我們來快速瞭解一下這份文件。

基本上，這是一份以精簡二進位表示法編碼的作業清單，這些作業描述了可傳送至該遠端介面的獨立使用者介面。

因此，這些文件的一大特點就是體積小。

如你所見，小巧精緻

所以通常是幾 KB，對吧？

但即使是更複雜、版面配置更靈活的 UI，也只需要幾十 KB，對吧？

並將所有素材資源打包到該文件中。

因此，如果仔細想想，唯一會占用文件空間的，就是開始封裝點陣圖。

所以請務必記住。

畢竟，這正是我們傳送文件而非螢幕截圖的原因。

當我們談到小巧和重要時，不只是指通訊。

這算是 Remote Compose 理念的核心極端案例。

如您所見，這顯然會影響第一個像素顯示在畫面上的時間，但抱歉，

這也代表在相同能力和容量下，我們能使用更多文件，同時保持效率。

我們在支援小工具時，會利用這項功能。

播放器本身通常也很小，而且依附元件很少。

由於這些文件體積小且依附元件少，因此我們可以擴大範圍，在實際播放 Remote Compose 文件的位置播放。

這對受限平台來說尤其重要，您會看到。

我剛才談了很多關於傳輸和距離的問題，但 Remote Compose 本身並不處理傳輸。

這由你決定。

我們將所有內容封裝到位元組緩衝區，然後使用適當的方法傳送到遠端介面。

我們提供連接器，協助您建立小工具。

但一般來說，請務必記住，您必須負責傳輸。

播放器收到文件後，無論傳送方式為何，都能擷取作業清單，並將其轉換為繪圖指令、版面配置樹狀結構、運算式，所有這些元素結合在一起，就能創造出非常豐富的使用者體驗。

因此，請記住，您可以自行決定如何轉移文件，這表示您可以在許多情境中重複使用遠端撰寫功能，有些情境我們甚至可能沒想到，對吧？

播放器載入文件後，文件就會自行執行。

這就是整個概念。

我們希望文件能建立一個具有某種自主性的使用者介面，不必回到建立者的手中，對吧？

綜合以上所述，我們能支援調整大小、捲動、觸控事件、決定顯示或隱藏元件、動畫、部分觸控事件和部分觸控處理，這些都可以在文件中完成，不必返回播放器。

有時，如果你需要返回，抱歉，返回建立，你實際上可以要求一個動作，說「請給我一份新文件」。

我們提供三個官方播放器，主要透過 Remote Compose 的 AndroidX 程式庫提供。

一個是 Compose 播放器，可在 Compose 應用程式中使用。

如果您仍在使用 View，我們也提供 View 播放器。

此外，我們也提供 RemoteViews 實作，自 API 36 起在 Android 平台中推出，可讓您使用 Remote Compose 建立在啟動器上執行的 Android 小工具。

我們也提供一些實驗性播放器，包括在 Skia 上執行的 C++、TypeScript，甚至是 Compose Multiplatform。

因此，您使用的技術基本上可以用來在許多不同的介面和平台上算繪。

總而言之，我剛才提到的距離仍然存在，但我們正在努力，讓距離只在真正重要時才發揮作用。

是啊

接下來，我們來談談 Remote Compose 文件提供的功能。

因此，它的基礎是 Canvas，而且具備 Android Canvas 的所有功能。

但其中包含一些額外的 API。

但其中一個特別之處在於，Android Canvas 中的所有浮點值都可以替換為運算式。

這可讓您製作動畫 (如這裡所示)、動態縮放、彈性版面配置。

這項功能有許多用途。

進一步瞭解運算式。

您可以使用豐富的運算子，包括一般數學、三角函數、陣列存取、樣條插值等。

其中一個很棒的地方是，任何變更的值都可以建立動畫，因此您可以為任何值的狀態變更建立動畫。

在這個繪圖中，每個鐘擺都會選擇不同的動畫類型，而這些動畫都可以在 Remote Compose 中使用。

此外，我們還有基本元件、Compose 內容，以及您知道的內容。

它會產生非常熟悉的 API、方塊、列、欄等。

此外，我們還有自動調整元件。

這樣做的好處是，由於您此時無法控制文件，因此這些物件可以處理消失、出現、消失、因調整大小而返回等情況，而無需返回文件來源。

此外，我們還提供元件動畫。

所有變更都可以加上動畫效果，因此如果某個元素消失，你可以為其加上動畫效果。

您也可以編寫自訂動畫。

在這個案例中，您可以看到有些遊戲使用著色器，以及各種不同的技術。

我們還能與使用者互動，不只是提供精美圖片。

您可以點選項目、觸控事件、捲動等。

無障礙功能也很重要，因此所有無障礙 API 都在這裡。

如你所見，我正在建構一個完整的碼錶，並在上面加入一些有趣的 UI，而這一切都是在播放器端進行。

都在文件中。

你看到的所有內容，都不需要返回伺服器。

現在，如果您在應用程式中建構，在這種情況下，藍色部分是應用程式，黑色部分是遠端 Compose 文件。

你可以在兩者之間互動。

我正在增加值，您可以看到應用程式 (我們稱為主機) 接收到這些值，我也可以移動滑桿，這會變更文件中的值。

因此，我可以雙向進行。

現在就來看看如何建立這類文件。

實際上共有三個 API：Compose、Kotlin 和 JSON。

您對 Compose API 應該有一定程度的瞭解。

這個方法有一些變化，我們將詳細說明。

Kotlin API 則非常程序化。

文件中的指令與輸出內容是一對一的關係。

JSON 是一種 JSON 語法，我們有轉換器可將其轉換為遠端 Compose。

如果您使用 LLM，這項功能也很有用，因為 LLM 可以讀取和寫入文件。

現在就來實際使用 Compose 建構內容。

在本例中，您會看到這是一個可組合項和遠端可組合項。

我們有畫布，不是畫布，而是遠端畫布和遠端修飾符，但修飾符本身大致相同，都是您熟悉且喜愛的功能。

現在，其中的所有指令實際上都會在執行時產生遠端指令 Remote Compose 文件指令。

在這個例子中，我們繪製一個圓圈，然後加入一些浮點數和運算式，並在這些運算式中使用時間。

當我在動畫中開啟這項功能時，請注意，這是 Android Studio 的即時預覽，實際上會為您即時執行。

您可以在這裡看到這些運算式。

我們來稍微瞭解一下這項功能，以及它的運作方式。

左側會顯示類似試算表的內容。

這是一個浮點值表格。

此外，它還具有依附元件樹狀結構，因此您可以知道某個項目與另一個項目的連接位置。

每當有變更時，其依附元件就會標示為「dirty」，需要清除並調整。

執行時，系統會清除所有依附元件，並只評估有變更的依附元件。

因此，這種做法非常有效率。舉例來說，如果物件的大小等屬性發生變更，則依附元件也會隨之變更，且必須反映這項變更。

這種運算方式非常有效率，因為您是由上而下，而且非常有效率。

我們來擴充一下這個時鐘，展示如何建構實際的東西，或稍微實際一點的東西。

在這個例子中，我們會在邊緣加上一些刻度，您會看到一些 for 迴圈，因此您可以在本機和右側進行 for 迴圈。

接著加入時針和分針，然後加入秒針，最後再加入幾個不同的按鈕，這樣就完成了，我們有一個即時時鐘。

你看，它真的顯示時間了。

另一個有趣的地方是，你可以用 JSON 寫出同樣的內容，如果是 JSON，你可以輕鬆與 LLM 互動，說「將分針改成綠色」，它就會理解你的意思。

這點非常棒。

好的。

好

希望這能讓您瞭解遠端 Compose 的功能。

接下來，我會稍微介紹一下我們為開發人員提供的支援服務。

我提過這些主要是 AndroidX 程式庫，所以您知道可以在 DAC 找到所有內容。

您將取得最新版本、說明文件等。

一如往常，我們看到 John 示範了 Android Studio 的功能。

我認為最棒的功能是即時預覽，這能大幅縮短開發時間。

我們也正在努力為這個格式制定實際的公開開放規格，對吧？

我們並非試圖完全隱藏，而是公開透明。

您可以查看其運作方式，以及實際建構和編碼的方式。

您在應用程式中常用的其中一項功能是動畫向量可繪項目，這項功能非常方便。

還記得我提過的點陣圖嗎？

我們很想知道，您傳送的是向量圖，而不是點陣圖，對吧？

因此，我們正在開發一些工具，協助您將 Lottie (或其他格式) 轉換為 RemoteCompose 元件，以便在 RemoteCompose 檔案中使用。

我先前提到，我們也正在開發其他工具，特別是文件檢查工具，因為開發人員體驗是一回事，但能夠檢查開發結果又是另一回事。

在本範例中，這項資源是文件。

以下是我們正在開發的工具預覽。

這項工具是 RemoteCompose 文件檢查器，可讓您檢查文件，並套用多種實用工具和視覺化效果。

舉例來說，您可以開啟文件，並逐步執行文件中的不同作業，進一步瞭解所有作業如何相互連結。

但我們有其他工具。

舉例來說，我很喜歡這個功能，可以立即以不同的密度和大小呈現文件，這樣就能快速查看建構的內容是否能很好地適應不同的尺寸變化。

我們最近也正在開發功能完整的版面配置檢查器，也就是您在 Android Studio 中習慣使用的版面配置檢查功能，但這裡會套用至作業和文件，對吧？

我們還能進一步運用 3D 技術。

我先前提到，希望現在你已經相信，小巧是這項產品的特色。

這很重要。

我們希望文件越小越好。

這對所有人都有幫助。

請照做。

那麼，我們該怎麼做？

我們來看看常見的使用者介面範例。

也就是包含多個資料列的資料集。

資料列本身包含名稱、小圖表，可能還有按鈕。

這很常見。

該 UI 的大小已經很小。

我們談論的是大約 25 kB，但 RemoteCompose 有各種功能，可協助您進一步縮小。

我們來看看。

首先，我們會免費為你執行這項作業。如果你傳送相同的字串，我們會注意到。

我們可以指向同一個字串，藉此減少一些位元組。

但我們提供更多功能，例如迴圈。

在這個例子中，我使用這個迴圈運算繪製小圖表，對吧？

這樣可以節省更多位元組。

我們也有函式。

因此，您可以建立函式，這裡我再次為該圖表建立函式，然後只要多次呼叫該圖表即可。

這同樣能節省一些位元組。

元件則有範本，對吧？

與函式類似，但更偏向元件，對吧？

因此，我只要使用正確的參數叫用該範本，就能取代所有不同的元件和資料列，大幅節省文件空間。

最後，我們也支援壓縮文件。

一般來說，這種做法可以節省約一半的文件大小。

有趣的是，這份文件的標頭有點特別。

我們不會壓縮。

如果想快速篩選大量文件，而不必解壓縮，這項功能就非常實用。

總之，文件本身就很小，但您也可以讓文件變得更小。

從這個小例子可以看出，只要將小巧視為一項功能，就能輕鬆將體積縮小一個數量級。

我介紹了小工具，特別是 Android 平台上的啟動器小工具。

接著，我們來談談 Google 正在進行的工作，以及目前已推出的產品。

因此，我們首先可以複製現有的小工具 (例如時鐘)，完全在 RemoteCompose 中執行，基本上行為會相同，只是在 RemoteCompose 中執行。

但我們還能做得更多，對吧？

因此，如果您想打造更具彈性的 UI，以及可調整大小和正確顯示動畫的小工具，現在就能做到，對吧？

因為我們有合適的原語，可以做到這一點，而遠端檢視則無法做到。

基本上，我們提供更多彈性和功能。

說到強大功能，這裡有個簡單例子，說明你可以做哪些瘋狂的事，對吧？

這個小工具會顯示完整遊戲。

並指向該小工具的實際大小。

我們說的是 4 KB。

我曾提到，傳輸並非我們在遠端 Compose 中直接處理的事項。

不過，針對小工具，我們確實提供了 RemoteCompose Widget 連接器類別，可讓您輕鬆擷取文件並傳送至啟動器。

不過，如果您已有小工具，建議繼續使用 Glance，因為最新版本 Glance 會自動提供後端，在平台上發出遠端 Compose。

接下來，我們來談談 Wear OS。

謝謝，Nico。

大家好！

我是 John Zoeller。

我將介紹 Wear OS。

我為這場簡報寫了大概 30 個笑話，但講給我媽聽後，她說如果我講任何一個，就會被開除。

因此，我會略過這部分，直接進行簡報。

接著來談談 Remote Compose，以及這項功能在 Wear OS 上的優點。

首先，我們要介紹全新的 Wear OS 健身追蹤器。

我們使用 Remote Compose 建構了這個功能，也知道要為 Wear 打造功能完整、高品質的健身追蹤器非常困難。

這需要一些時間。

因此，我們為你做了這項工作，並加入一些非常棒的新式運動功能，例如即時指標和控制媒體的能力。

此外，多虧有 Remote Compose，我們才能將 UI 與所有執行作業分離，因此能以極高效率執行，並避免耗盡使用者的電池電力。

如果沒有 Remote Compose，只使用一般的 Compose，就無法在螢幕上每秒重新整理即時指標。

實際上需要一分鐘，因為您必須在微光模式下喚醒手錶，才能顯示指標。

這是一大優勢。

信不信由你，這其實是 GIF。

這不是圖片。

我知道它還沒移動，但大約 45 秒後，當我們進行下一個指標更新時，它就會移動。

但這正是 Remote Compose 的優勢。

此外，

Wear 運動追蹤工具現已推出。

ASICS Runkeeper 應用程式就是使用這項功能建構而成，您可以點選這個連結並加入 Beta 版公開測試，立即體驗。

接下來介紹 Wear OS 小工具。

這是遠端撰寫功能的另一個絕佳應用實例。

這些程式庫會取代舊版 ProtoLayout Tiles 程式庫，因此您不必再為不同裝置支援兩種不同類型的 UI 架構。

Remote Compose 都能幫你完成。

由於 Wear OS 小工具是 Jetpack Glance 的一部分，因此也屬於 Android 整合式小工具生態系統。

好的，在這個生態系統中，RemoteCompose 小工具的 UI 與任何特定應用程式程序完全分離，因此可以安全地序列化，並使用與 Android 堆疊其餘部分相同的技術，在 Wear OS 裝置上算繪。

此外，Remote Compose 還能為小工具提供現代化圖形和回應式版面配置，同時兼顧效率和電池續航力。

在 Wear OS 7 中，硬體製造商已開始採用垂直捲動匣。

這是 Samsung Galaxy Watch，您可以看到小工具在匣中垂直捲動。

如要進一步瞭解如何將資訊方塊遷移至小工具，請參閱這個連結。

在依賴水平輪轉介面顯示資訊方塊的舊裝置上，小工具會自動顯示為全螢幕資訊方塊。

此外，這些功能也完全回溯相容於 Wear OS 4。

此外，這個連結也會進一步說明回溯相容性。

還有其他幾位合作夥伴也已採用小工具。

你可以看看。

以上就是我的分享。

沒錯，Nico，請繼續。

感謝您！

現在我們來做個小測驗

以上就是本次講座的內容。

我們介紹了 Remote Compose 的部分功能。

還有一些我們沒提到的。

這個架構非常豐富。

建議您查看現有和即將推出的說明文件。

我們的目標是打造一個未來，讓您能真正使用 Remote Compose 處理所有不同的遠端介面。

您剛才也看過一些，像是 Wear OS、小工具。

但還有更多內容即將推出。

我也會說這是一項持續進行的專案。

目前正在積極開發中。

我們所有的開發工作都是公開進行。

你可以看到我們正在做什麼。

不過，我們真的很想聽聽開發人員的意見。

我們正在為您打造這項功能。

因此，如果您有其他想法或覺得缺少某些功能，歡迎與我們聯絡。

我們很樂意收到這類訊息。

最後，我想補充一點，您剛才看到的整個簡報，包括動畫，都是在 Remote Compose 中完成的。