iT邦幫忙

material you相關文章
共有 26 則文章
1 Like 0 留言 2285 瀏覽
鐵人賽 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 留言 2248 瀏覽
鐵人賽 Mobile Development DAY 20
Kotlin 實踐 Material Design 懶人包 系列 第 20 篇

技術 Day20 使用M3的Navigation drawer

Navigation drawer 預設情況下可以開啟或關閉，以適應不同的應用程式佈局，有兩種型別的Standard、Modal。Standard標準非常適合頻...

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

技術 Day01 踏入Google的設計語言

這次Kotlin 實踐 Material Design 懶人包，文章主要關注在 Material Design components 的實作上，所以會有大量實作...

Anna ‧ 2022-09-15
0 Like 0 留言 1694 瀏覽
鐵人賽 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 留言 1584 瀏覽
鐵人賽 Mobile Development DAY 18
Kotlin 實踐 Material Design 懶人包 系列 第 18 篇

技術 Day18 使用M3的Menus

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

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

技術 Day04 實戰登入頁面

在前兩篇學會MDC Components的Button和Text Field，所以已經可以來實作一個「登錄頁面」。 介紹的內容： 使用 IDE版本 : A...

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

技術 Day03 使用 Text fields

Text fields 是讓可輸入欄位，並且提示容易讓使用者理解的資訊，同時可以有顯示輸入的錯誤訊息。 簡單介紹 有兩種Text fields，都提供相同的功能...

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

技術 Day06 使用 M3 的 Segmented Buttons

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

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

技術 Day12 使用 M3 的 Bottom App Bar

Bottom app bar BottomAppBars 使用操作上是類似 NavigationBars，但NavigationBars使用在切換頁面，Bott...

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

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

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

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

技術 Day17 使用M3的Divider

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

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

技術 Day07 使用 M3 的 MaterialCardView

使用Card顯示單個主題的內容和操作，也是作為進入更深層次細節或導航的切入點，例如音樂專輯或即將到來的假期的詳細資訊。呈現Cards可以是一起顯示在網格、垂直列...

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

技術 Day26 使用M3的Progress Indicators

Progress 有分兩種類型 Linear progress indicator Circular progress indicator 實作上探討...

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

技術 Day28 使用M3的Motion - Transition Patterns四種模式，其中的Container transform patterns (1)

Material Design的Ｍotion由四種模式組成，用於在元件或全屏檢視之間過渡轉換動畫，這些模式主要在透過加強使用者介面元素之間的關係來幫助使用者瀏覽...

Anna ‧ 2022-10-12
1 Like 0 留言 1196 瀏覽
鐵人賽 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
0 Like 0 留言 1166 瀏覽
鐵人賽 Mobile Development DAY 13
Kotlin 實踐 Material Design 懶人包 系列 第 13 篇

技術 Day 13 使用 M3 的Chips

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

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

技術 Day02 一般常見 Button

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

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

技術 Day05 使用M3 Icon button

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

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

技術 Day23 使用M3MaterialSwitch

當需要開啟或關閉單一選項時，可使用Switch ，最常用於手機裝置，以啟用和禁用選項或是選單中的選項。開啟和關閉表示一個具有兩種狀態的按鈕，開關由軌道和拇指組成...

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

技術 Day29 使用M3的Motion - Shared axis（2）

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

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

技術 Day22 使用M3的Navigation bar

Navigation bar 主要手機裝置位於螢幕底部固定呈現，通常顯示3~5個item，當需要5個以上、3個以下皆考慮使用Chips 、navigation...

Anna ‧ 2022-10-06
0 Like 0 留言 887 瀏覽
鐵人賽 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
1 Like 0 留言 869 瀏覽
鐵人賽 Mobile Development DAY 21
Kotlin 實踐 Material Design 懶人包 系列 第 21 篇

技術 Day21 使用M3的Navigation rail

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

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

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

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

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

技術 Day16 使用Ｍ3的Dialogs

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

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

技術 Day24 使用M3的Sliders

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

Anna ‧ 2022-10-08
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22200 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙