• 課程時長

    7 小時 7 分

  • 課程級別

    中階

  • 授課語言

    中文

這堂課你將會學到

  • 瞭解Material Design設計語言
  • 能夠應用Material Design Component在作品上
  • 優化你的UI 佈局

章節目錄

  • 1

    第 1 章 Material Design Components 基本元件篇

    • 單元 1 - Material Component 簡介

    • 單元 2 - 1_1 基礎互動元件：MaterialButton

    • 單元 3 - 1_2 基礎互動元件：TextField

    • 單元 4 - 1_3 浮動按鈕：FAB (Float Action Bottun)

    • 單元 5 - 1_4 Material Design 的經典元件：卡片 Card

    • 單元 6 - 1_5 用Chip做勾選、複選、篩選按鈕

    • 單元 7 - 1_6 給使用者一個復原的機會：Snackbar

    • 單元 8 - 1_7 範圍選擇 Slider

    • 單元 9 - 1_8 日期選擇器(單選、起迄日) MaterialDatePicker

    • 單元 10 - 1_9 Selection Controls：Checkbox、RadioButton、Switch

    • 單元 11 - 1_10 選單 Menu
  • 2

    第 2 章 Material Design Components 進階運用篇 共 5 單元

    • 單元 1 - 2_1 對話框再升級(單選、多選)功能：MaterialDialog

    • 單元 2 - 2_2 可展開、收合的底部選單：BottomSheet

    • 單元 3 - 2_3 側邊選單：NavigationDrawer

    • 單元 4 - 2_4 快速切換View的底部導覽列：BottomNavigation

    • 單元 5 - 2_5 CoordinatorLayout 與自定Behavior
  • 3

    第 3 章 UI 經典案例實作 - 功能篇

    • 單元 1 - 3_1 多筆列表的滑動刪除與拖拽排序

    • 單元 2 - 3_2 下拉更新資料 Swipe Refresh Layout

    • 單元 3 - 3_3 頁面滑至底部自動載入更多的分頁效果

    • 單元 4 - 3_4 客制RecyclerView的分隔線：Item Decoration

    • 單元 5 - 3_5滑動標籤置頂效果：Item Decoration
  • 4

    第 4 章 UI 經典案例實作 - 視覺篇

    • 單元 1 - 4_1 照片牆 Staggered Grid Layout manager

    • 單元 2 - 4_2 多筆的左右滑動效果 - Google Play首頁效果

    • 單元 3 - 4_3 左右滑動的廣告輪撥效果

    • 單元 4 - 4_4 ViewPager 與頁籤TabLayout 的組合運用
  • 5

    第 5 章 打造彈性、多樣化的ToolBar

    • 單元 1 - 5_1 最基本的Bar：ActionBar

    • 單元 2 - 5_2 客制Bar裡的內容：Toolbar

    • 單元 3 - 5_3 隨著其他View響應變化的AppBarLayout

    • 單元 4 - 5_4 可折疊式的Bar：CollapsingToolbarLayout

    • 單元 5 - 5_5 放置在底部的Bar：BottomAppBar
  • 6

    第 6 章 UI佈局優化 - 客制可重用的UI元件

    • 單元 1 - 6_1 重用UI元件：Include

    • 單元 2 - 6_2 延遲載入UI資源：Viewstub

    • 單元 3 - 6_3 使用Merge減少View的階層

    • 單元 4 - 6_4 自定義View：CustomView

    • 單元 5 - 6_5 用ViewGroup管理多個子View
  • 7

    第 7 章 UI常見錯誤

    • 單元 1 - 7_1 在我的手機測試都正常，App一上線就跑版

    • 單元 2 - 7_2 沒有考慮到當資料只有局部出現或無資料

    • 單元 3 - 7_3 發生錯誤了，沒有告訴使用者該怎麼辦

    • 單元 4 - 7_4 使用者自行調整手機字型大小，畫面就跑版