Missing parts when designing and implementing Android UI

Missing parts when designing and implementing Android UI

昨天出席了 GDG Hong Kong 舉辦的 DevFest 2024 Hong Kong 並分享了「Missing parts when designing and implementing Android UI」。 這個題目大致分為三個部分: 一般在準備 Figma mockup 及由 mockup 實作成 Android app UI 時的常見問題,並以一 Figma Community 免費範本作例子 Jetpack Compose accessibility Jetpack Compose UI testing,示範 Compose testing 搭配 Robolectric 及支援 Appium 的貼士 ...

November 24, 2024

AndroidX Navigation component for Jetpack Compose type safety

AndroidX Navigation component 是 Google 推出的 single Activity app navigation library。本身是用 Fragment 來做每一頁的內容,然後再用新的 Android resource type——navigation 來定義 navigation graph(即是聲明一個 navigation graph 內有什麼 Fragment、打開 Fragment 時要什麼參數和各 Fragment 之間如何導覽的 XML 檔案)。如果加上 Safe Args Gradle plugin 的話就會按 navigation graph XML 檔案生成那些 Java code 去讓你在 Fragment 內轉頁時調用,那就不會怕轉頁時漏了幾個參數沒有傳到,因為漏了的話就不能成功 compile。 ...

August 18, 2024

Jetpack Compose Navigation component sub-graph

這次遷移到 Compose 時特別花了時間試用 Compose 的 Navigation component,終於弄清 nested graph 的意義。其實 Compose 的 Navigation component 底層都是跟 XML 版的 Navigation component 一樣,只是底層多了以 route 形式的處理。以往的說明文件在介紹 nested navigation graph 時沒有太具體說明 nested graph 背後的意義,看完之後可能覺得只是用來避免單一 XML 檔過長而拆成不同 sub-graph。但其實在 deep link 時是有特別意義。 ...

July 27, 2022

Jetpack Compose 遷移 (2)

上一篇提過如何將 MetroRide 由傳統 view system 遷移到 Jetpack Compose。但一篇又太長,所以分拆成兩篇。 Dependency injection 按照官方的建議,composable function 要用到的 dependency 應該由 caller 經參數提供。然後就是由外層一直傳進去。至於那個外層最遠可以去到 Activity 或者 Fragment。由於 composable function 就是 top-level function,沒有 class 包住,所以平常用開的 Dagger 或者 Koin 之類的 DI library 都無辦法輕易地在 composable function 經 DI 拿到 dependency。如果以 Dagger Hilt 來計,目前是有這幾種方式: ...

July 26, 2022

Jetpack Compose 遷移 (1)

近幾個月斷斷續續替 MetroRide 的界面由傳統 view system(即是 layout XML)轉為 Jetpack Compose,順帶補上去年參加 iThome 鐵人賽時用來做示範的重鐵抵站時間功能。昨天新版 app 上架了就來分享一下遷移過程。其實這個 app 在之前的版本有把其中一頁靜態的頁面(延誤定義)改用 Compose,那時是在 Fragment 內的 onCreateView 加入 setContent 顯示 Compose 內容。由於那時只是做排版,沒有遇到大問題。之後開始慢慢轉用 Compose 才遇到問題。 ...

July 24, 2022