iT邦幫忙

2022 iThome 鐵人賽

DAY 15
0
Mobile Development

從開發瀏覽器 APP 學習 Android 實戰技巧,並搭上 Jetpack Compose 的列車系列 第 16

[Day16] 從開發瀏覽器 APP 學習實戰技巧 -- Compose 快速切換設定的對話框

  • 分享至 

  • xImage
  •  

快速切換設定的對話框,是用來切換一些常用的功能:像是啟動桌面模式,音量鍵翻頁,開關廣告阻擋、無痕模式、瀏覽記錄等等。

原本有打算直接使用 Jetpack Compose 的 Dialog 來實作,或是利用原生的 Dialog,在裡頭塞一個 ComposeView 。但這兩個方式都失敗了。最後,退而求其次,改成實作 DialogFragment,並在 DialogFragment 中的 Dialog 放入所需的 ComposeView

https://ithelp.ithome.com.tw/upload/images/20220920/20140260QaxvdBg5O9.png

原生的程式碼就這樣而已,主要是設定一下 Dialog 的屬性,讓它不要畫 Shadow,而且可以放置在畫面上我想放的位置,然後,設定好 ComposeView。(第 39 行的 Column 可以忽略。我不知道那時候在想什麼。)

https://ithelp.ithome.com.tw/upload/images/20220920/20140260BY6EQUTiYi.png

FastToggleItemList 就有點像是在刻 xml 的 layout,把一個個的項目所需的 resource 都指定到 FastToggleItem 中,最後還包含了一個 action,用來切換對應的 SharedPreference 值。

https://ithelp.ithome.com.tw/upload/images/20220920/20140260jOEBCfCEmf.png

FastToggleItem 就很像一般的 Jetpack Compose 教學,利用 RowCheckbox, Icon, 和 Text 放在一行上。這邊有用到 remember 來記錄 Compose 中的 isChecked 狀態。

https://ithelp.ithome.com.tw/upload/images/20220920/20140260LhEoE461QR.png

程式寫得差不多後,在 Android Studio 的 Preview 畫面也能即時看到畫面大概會長成怎麼樣。雖然沒有像 Flutter 的 hotreload 那麼快速,但也遠比要一直去調整 layout xml 來得好多了。

相關連結:

Commit


上一篇
[Day15] 從開發瀏覽器 APP 學習實戰技巧 -- 導入 Jetpack Compose 的一些想法
下一篇
[Day17] 從開發瀏覽器 APP 學習實戰技巧 -- Compose 功能選單
系列文
從開發瀏覽器 APP 學習 Android 實戰技巧,並搭上 Jetpack Compose 的列車31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言