目錄
引言
我原本在撰寫一篇關於使用Glance和應用小部件的不同博客文章,然而,我需要一個範例應用程式。因為既有的應用都不能滿足我的需求,我決定自己建一個。在建造過程中,我意外地開發出了一個更完善的應用程式,並加入了新概念。
這個應用程式包含許多貓咪圖片作為卡片顯示,我希望能將這些卡片疊放成一堆。這篇文章就將討論如何建立這樣的疊層卡片佈局,當然,少不了一些關於貓咪的內容。
貓咪疊層卡片應用介面
這個應用的設計理念很簡單:從API中抓取貓咪圖片,一張一張地展示。每次觀看完圖片後,可以獲取更多的貓咪圖片,算是有趣的小程式。圖片的JSON資料從Cataas-API隨機抓取,並將圖片的ID儲存於簡單的資料儲存中。
為了圖片呈現,應用程式使用了Coil 的
SubcomposeAsyncImage
,可以直接從網址顯示圖片,而不必下載到裝置中。由於這只是個範例程式,並不需要為離線使用或類似功能作最佳化。
應用介面將最新的圖片置頂顯示,其他圖片依次垂直排列在下方。使用者可以通過點擊X按鈕來移除顯示的最上層圖片。
讓我們來看看這些貓咪卡片疊層效果的樣子:
自定義佈局探討
Compose提供了許多內建佈局,但往往需要自定義佈局才能滿足特定的需求。這篇文章就展示如何使用Compose的
Layout
來創建自定義的佈局。
Compose自主佈局的過程包含三個階段: 1. 測量子組件 2. 決定組件自身大小 3. 放置子組件
我們來看看用到的具體範例。
程式碼解說
要創建卡片堆疊的佈局,需要自己編寫組件,這需要考慮
modifier
和
content
等參數。
核心部分在於
Layout
的使用,通過自定義測量和佈局規則,這樣實現圖片的層疊效果。完整程式碼可參照
貓咪倉庫
。
總結反思
我們已經學習了如何運用Compose自定義佈局,來製作一個貓咪圖片疊層展示的應用程式,也展示了如何加入隨機旋轉效果。希望此分享能夠啟發您製作出更有趣的應用。
實際應用中,需求會更複雜,然而,這篇文章足以作為撰寫Compose自定義佈局的一個良好起點。您是否已經開始製作自己的自定義佈局?有趣的故事或經驗歡迎分享!