技術 Day 21 - Cards ( Design )

前言 Card 的設計，已經廣泛出現在我們的應用程式中，例如 ig、facebook 等等，是一種元件配置的設計方式，並非只是單純一個元件 Cards - D...

技術 Day 3 - Button ( Implementation )

大綱 會分為下面幾個段落來介紹 Simple Using in layout in code add a icon Text Button in...

技術 Day 11 使用 M3 的 Extended Floating Action Button（下）

延續上一篇 Floating Action Buttons (上) 在上一篇FAB提到的icon必須清晰易懂，因為按鈕沒有文字描述，Extended FABs可...

技術 Day21 使用M3的Navigation rail

Navigation rail 元件會顯示在應用程式中每個螢幕的同一側，顯示3到7個item。通常適用於平板的螢幕上，但也可以在手機裝置上使用，判斷螢幕寬度大小...

技術 Day 23 溫咖癲啦唯啊薩～讓按鈕浮起來吧！Floating Action Button

前言 今天來介紹整個頁面的要角 Floating Action Button。 Floating Action Button 樣子 簡稱為 FAB ，常在...

技術 Day28 實作 DateTimePicker

前言 昨天完成 Training 頁面雛形，今天要來加一些更改數據的互動。 首先是日期調整這裡要用到 DatePickerDialog Date Picker...

技術 Day 13 - Floating action button (Design)

前言 FAB 作為一個獨立的 Action Button，位置上是在所有 Content 的前面並位於右下方，形狀上是圓形或依據不同大小可能為橢圓。通常對應著當...

技術 Day 10 - Switches ( Design & Implementation )

前言 接下來的篇幅會開始講到 Selection Controls Components 簡稱 “選擇控件”：允許用戶完成涉及做出選擇的任務，例如選擇選項、打開...

技術 Day30 Motion - Fade through 、Fade（3）

繼前兩天章節 Day28 使用M3的Motion - Transition Patterns四種模式，其中的Container transform patter...

技術 Day 14 - Floating action button (Implementation)

大綱 Using Type Regular FABs Mini FABs Extended FABs Speed dial Custom Style Usg...

技術 Day 15 - Divider ( Design & Implementation )

前言 Divider 是能將要在 UI 呈現的重點內容，更加清晰且顯眼地表達。在我們想呈現列表形式的資料時，透過 Divider 的劃分，讓用戶能明顯辨識之間的...

技術 Day09 實戰簡易的卡片瀏覽頁面

延續之前實作的「登錄頁面」在Day05~Day07學會MDC的Icon Buttons、Segmented Buttons和MaterialCardView、A...

技術 Day 26 把主畫面組起來！

前言 學以致用，把主畫面組裝起來。 MainScreen 這裡傳三個 funtion 用來做頁面轉換用。 @OptIn(ExperimentalMateria...

技術 Day16 使用Ｍ3的Dialogs

通常我們大家熟悉的Dialogs 是讓使用者需要的操作、內容包含簡明扼要的陳述或問題。 Dialogs在應用程式內容前面，同時禁用所有應用程式功能，以提供關鍵資...

技術 Day 17 實作 Grid Layout 和 Card

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

技術 Day 13 Text Brush

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

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

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

技術 Day 23 - Material Design

Android 遵循的一套視覺設計規範叫 Material Design，目前分為 Material 2 與 Material 3，Android 11（含）以...

技術 Day24 使用M3的Sliders

Sliders是使用條形的滑動進行檢視和選值或範圍，非常適合調整音量和亮度等設定等。 Silders 有分兩種類型 Continuous slider Di...