iT邦幫忙

material design相關文章
共有 141 則文章
0 Like 0 留言 947 瀏覽
鐵人賽 Mobile Development DAY 23
今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列 第 23 篇

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

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

ChuLin ‧ 2022-09-29 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們
0 Like 0 留言 925 瀏覽
鐵人賽 Mobile Development DAY 14
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 14 篇

技術 Day 14 - Floating action button (Implementation)

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

vosscg0822 ‧ 2022-09-29 ‧團隊好想工作室 v6.0
0 Like 0 留言 1608 瀏覽
鐵人賽 Mobile Development DAY 18
Kotlin 實踐 Material Design 懶人包 系列 第 18 篇

技術 Day18 使用M3的Menus

選單內容應適合使用者需求，同時易於開啟、關閉和互動。當用戶與按鈕、操作或其他控制元件互動時，會出現選單。 1. Dropdown menus 2. Expose...

Anna ‧ 2022-10-02
1 Like 0 留言 1354 瀏覽
鐵人賽 Mobile Development DAY 17
Kotlin 實踐 Material Design 懶人包 系列 第 17 篇

技術 Day17 使用M3的Divider

Divider 分隔線(MaterialDivider)是一個可用於佈局的檢視，將內容清晰的劃分。分隔線長度可伸縮性，例如用於分離列表項或定義長度。 M3新增內...

Anna ‧ 2022-10-01
0 Like 0 留言 653 瀏覽
鐵人賽 Mobile Development DAY 16
Kotlin 實踐 Material Design 懶人包 系列 第 16 篇

技術 Day16 使用Ｍ3的Dialogs

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

Anna ‧ 2022-09-30
1 Like 0 留言 2346 瀏覽
鐵人賽 Mobile Development DAY 15
Kotlin 實踐 Material Design 懶人包 系列 第 15 篇

技術 Day15 使用M3的Bottom sheets

BottomSheets 分成兩種 Standard bottom sheet Modal bottom sheet M3新增內容 顏色：新的顏色對映和...

Anna ‧ 2022-09-29
1 Like 0 留言 1230 瀏覽
鐵人賽 Mobile Development DAY 14
Kotlin 實踐 Material Design 懶人包 系列 第 14 篇

技術 Day14 延續前實戰新增 FAB + Bottom App Bar 實作

延續之前實作的「Day09 實戰簡易的卡片瀏覽頁面」後，將Day10~Day12學會MDC Components的Floating Action Buttons...

Anna ‧ 2022-09-28
1 Like 0 留言 1539 瀏覽
鐵人賽 Mobile Development DAY 12
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 12 篇

技術 Day 12 - RadioButtons (Design & Implementation)

前言 為 selection controls components 最後一個元件，與 slider、checkboxes 在設計上都非常簡潔，一樣也是實作與設...

vosscg0822 ‧ 2022-09-27 ‧團隊好想工作室 v6.0
0 Like 0 留言 952 瀏覽
鐵人賽 Mobile Development DAY 13
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 13 篇

技術 Day 13 - Floating action button (Design)

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

vosscg0822 ‧ 2022-09-28 ‧團隊好想工作室 v6.0
0 Like 0 留言 1495 瀏覽
鐵人賽 Mobile Development DAY 11
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 11 篇

技術 Day 11 - Checkboxes (Design & Implementation)

前言 與上篇同為 Selection Controls Components，今天要講的是 Checkboxes，由於這些元件整體相對簡潔，Material D...

vosscg0822 ‧ 2022-09-26 ‧團隊好想工作室 v6.0
0 Like 0 留言 865 瀏覽
鐵人賽 Mobile Development DAY 10
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 10 篇

技術 Day 10 - Switches ( Design & Implementation )

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

vosscg0822 ‧ 2022-09-25 ‧團隊好想工作室 v6.0
0 Like 0 留言 480 瀏覽
鐵人賽 Mobile Development DAY 18
今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列 第 18 篇

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

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

ChuLin ‧ 2022-09-24 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們
0 Like 0 留言 1864 瀏覽
鐵人賽 Mobile Development DAY 9
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 9 篇

技術 Day 9 - Slider ( Implementation )

大綱 Simple Using Using Ranger Slider Adding/removing the value label Setting a...

vosscg0822 ‧ 2022-09-24 ‧團隊好想工作室 v6.0
1 Like 0 留言 632 瀏覽
鐵人賽 Mobile Development DAY 17
今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列 第 17 篇

技術 Day 17 實作 Grid Layout 和 Card

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

ChuLin ‧ 2022-09-23 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們
0 Like 0 留言 1209 瀏覽
鐵人賽 Mobile Development DAY 13
Kotlin 實踐 Material Design 懶人包 系列 第 13 篇

技術 Day 13 使用 M3 的Chips

主要功能在幫助輸入信息、進行選擇、過濾內容或觸發操作，Chipa和Button有相似之處在於它們都提供視覺提示用戶採取行動和做出選擇。 但是有一些重要的區別，C...

Anna ‧ 2022-09-27
0 Like 0 留言 1212 瀏覽
鐵人賽 Mobile Development DAY 8
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 8 篇

技術 Day 8 - Slider ( Design )

前言 Slider 能讓用戶透過滑動按壓來對一系列的數值進行更加細部選擇的元件，常應用在音量控制或價格範圍等數值範圍選取的情境 Slider - Design...

vosscg0822 ‧ 2022-09-23 ‧團隊好想工作室 v6.0
0 Like 0 留言 898 瀏覽
鐵人賽 Mobile Development DAY 11
Kotlin 實踐 Material Design 懶人包 系列 第 11 篇

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

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

Anna ‧ 2022-09-25
0 Like 0 留言 1479 瀏覽
鐵人賽 Mobile Development DAY 10
Kotlin 實踐 Material Design 懶人包 系列 第 10 篇

技術 Day10 使用 M3 的 Floating Action Buttons (FAB) (上)

在Material Design中提供不同樣式的Button，官方同時說明使用Button需根據操作的重要性選擇類型，當操作越重要時Button應該越具有強調性...

Anna ‧ 2022-09-24
0 Like 0 留言 1844 瀏覽
鐵人賽 Mobile Development DAY 7
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 7 篇

技術 Day 7 - App bar : Top ( Implementation )

大綱 Type Regular top app bar Simple Using Applying scrolling behavior Prominent...

vosscg0822 ‧ 2022-09-22 ‧團隊好想工作室 v6.0
0 Like 0 留言 1179 瀏覽
鐵人賽 Mobile Development DAY 6
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 6 篇

技術 Day 6 - App bar : Top ( Design )

前言 App bar:Top ( toolbar )，官方之所以這樣區分，是因為在 Material Design 分為 Top 與 Bottom，只不過在常見...

vosscg0822 ‧ 2022-09-21 ‧團隊好想工作室 v6.0
0 Like 0 留言 751 瀏覽
鐵人賽 Mobile Development DAY 9
Kotlin 實踐 Material Design 懶人包 系列 第 9 篇

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

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

Anna ‧ 2022-09-23
1 Like 0 留言 589 瀏覽
鐵人賽 Mobile Development DAY 13
今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列 第 13 篇

技術 Day 13 Text Brush

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

ChuLin ‧ 2022-09-19 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們
0 Like 0 留言 1736 瀏覽
鐵人賽 Mobile Development DAY 8
Kotlin 實踐 Material Design 懶人包 系列 第 8 篇

技術 Day08 使用 M3 的 AppBarLayout

Top app bar 提供與當前螢幕相關的內容和操作，通常是與裝置的寬度相同。 將APP的主題使用NoActionBar，如<style name=&q...

Anna ‧ 2022-09-22
0 Like 0 留言 1980 瀏覽
鐵人賽 Mobile Development DAY 5
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 5 篇

技術 Day 5 - Text fields ( Implementation )

大綱 TextInputLayout Simple Using Adding a leading icon Leading icon attribute...

vosscg0822 ‧ 2022-09-20 ‧團隊好想工作室 v6.0
0 Like 0 留言 1468 瀏覽
鐵人賽 Mobile Development DAY 4
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 4 篇

技術 Day 4 - Text fields ( Design )

前言 今天要來介紹的是 Text fields ( Input Text )，與 Button 一樣都是在應用程式中很常見的元件，通常出現在需要讓用戶填寫資料的...

vosscg0822 ‧ 2022-09-19 ‧團隊好想工作室 v6.0
1 Like 0 留言 1452 瀏覽
鐵人賽 Mobile Development DAY 12
今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列 第 12 篇

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

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

ChuLin ‧ 2022-09-18 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們
1 Like 0 留言 1526 瀏覽
鐵人賽 Mobile Development DAY 6
Kotlin 實踐 Material Design 懶人包 系列 第 6 篇

技術 Day06 使用 M3 的 Segmented Buttons

在Material Design中提供不同樣式的Button，官方同時說明使用Button需根據操作的重要性選擇類型，當操作越重要時Button應該越具有強調性...

Anna ‧ 2022-09-20
0 Like 0 留言 961 瀏覽
鐵人賽 Mobile Development DAY 3
從 Google Material Design Components 來了解與實作 Android 的 UI/UX 元件設計 系列 第 3 篇

技術 Day 3 - Button ( Implementation )

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

vosscg0822 ‧ 2022-09-18 ‧團隊好想工作室 v6.0
1 Like 0 留言 1118 瀏覽
鐵人賽 Mobile Development DAY 5
Kotlin 實踐 Material Design 懶人包 系列 第 5 篇

技術 Day05 使用M3 Icon button

在Material Design中提供不同樣式的Button，官方同時說明使用Button需根據操作的重要性選擇類型，當操作越重要時Button應該越具有強調性...

Anna ‧ 2022-09-19
0 Like 0 留言 1307 瀏覽
鐵人賽 Mobile Development DAY 11
今年一定減成功!Jetpack Compose 做出重訓紀錄APP 系列 第 11 篇

技術 Day 11 Top App Bar、Scaffold

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

ChuLin ‧ 2022-09-17 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22203 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙