iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Mobile Development

今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列

工程師減肥減到年中已經乏味了,是時候來點新鮮的了!
這次要用 Jetpack Compose 做出美美der 健身紀錄介面,將我揮灑汗水歷程記錄下來,繼續向前行!

DAY 11

Day 11 Top App Bar、Scaffold

前言 今天研究 Search bar 如何用 TopAppBar 實現。 TopAppBar 上方導覽列,分為四種樣式。M3 和 M2不同的點在於,捨棄了陰...

2022-09-17 ‧ 由 ChuLin 分享
DAY 12

Day 12 IconButton,從IconButton的參數看到狀態提升技巧。

前言 Card 上面會用到關閉的 IconButton。來介紹IconButton的參數,並且從Toggle Button 的參數來介紹狀態提升的技巧。 Ic...

2022-09-18 ‧ 由 ChuLin 分享
DAY 13

Day 13 Text Brush

前言 因為團隊成員聖佑有把 Text 屬性全部詳說一遍了,所以我想來點不一樣的,今天來研究 Brush API 來做出字體漸層色效果。 Brush API...

2022-09-19 ‧ 由 ChuLin 分享
DAY 14

Day 14 Text Brush 2 從圖片吸取顏色、指定字串範圍套用筆刷風格

前言 昨天介紹了 Brush 如何套用在字體,以及重複上色的模式TileMode,今天帶來用圖片作為字體色,以及指定範圍內字體套用筆刷風格的方法。 用圖片顏色...

2022-09-20 ‧ 由 ChuLin 分享
DAY 15

Day 15 Lazy Grid Layout

前言 今天來研究 Layout 排版中的 GridLayout。 Grid Layout 首先我們要了解LazyVerticalGrid的欄位有什麼,在 c...

2022-09-21 ‧ 由 ChuLin 分享
DAY 16

Day 16 Lazy Grid Layout : content 佈局 Scope、橫跨多欄 Span

前言 昨天講解了 Grid Layout 的基本用法,今天來講最後一個參數 content 的 LazyGridScope 是什麼。 Scope Layou...

2022-09-22 ‧ 由 ChuLin 分享
DAY 17

Day 17 實作 Grid Layout 和 Card

前言 詳讀完 grid layout ,接下來要使用在專案中。除了呈現,我還要做出紀錄長按 item,並且記住 item index 的功能。 前置作業 1...

2022-09-23 ‧ 由 ChuLin 分享
DAY 18

Day 18 實作 Grid Layout 2 調整卡片內容樣式

前言 今天接續昨天,調整卡片樣式。目標樣式: 字體大小 參考 MD3 Card日期我們使用 title medium 內文使用 body medium 在 T...

2022-09-24 ‧ 由 ChuLin 分享
DAY 19

Day 19 使用者互動,如何在 compose 中監聽 click、drag 等動作

前言 今天來研究如何處理使用者互動行為,這個專案會用到 click、drag 等動作,讓記事進入編輯狀態,還能透過拖曳來改變 list 的順序。所以首先要先知...

2022-09-25 ‧ 由 ChuLin 分享
DAY 20

Day 20 使用三方庫做出 LazyGrid 拖曳排序

前言 今天要來實踐如何在 Lazy Layout 中滑動 item。 支援庫 ComposeReorderable 昨天開心的研究完手勢互動,突然發現在 L...

2022-09-26 ‧ 由 ChuLin 分享