Material Design Compoents 1.1.0

Material Design Compoents 1.1.0

增加了 Material Theming,新的組件、黑暗主題支持、等等

新的功能:

  • 所有組件都支持黑暗主題

  • 新的日期選擇器(具有范圍選擇功能和提升可訪問功能)

  • 擴展 Floating Action 按鈕

  • 切換按鈕組

  • 支持 Android 10 進行邊緣手勢導(dǎo)航的組件

  • 改善無障礙功能

  • 全新的 Material Theming (形狀、板式、顏色)

  • 穩(wěn)定性和質(zhì)量改進

MDC的背景說明

Material Components for Android(MDC)是從以前的 Design Support Library 庫演變而來,是與 AndroidX 來搭配的??紤]到版本兼容和過渡,一開始的 1.0.0 版本與 design 庫 28.0.0 是等價的。命名發(fā)生了改變從 com.android.support.designcom.google.android.material 。不過后續(xù)更新 design 庫就不再更新了,也就是說 design 庫就永遠的停留在了 1.0.0 這個版本了。

1.0.0 開始 Material Design 的規(guī)范不斷發(fā)展。出現(xiàn)了新的規(guī)范、準則和新的組件,來更好的代表品牌同時保持了 Material 的核心原則。MDC 的目的是為開發(fā)者提供一個庫,該庫通過代碼形式來實現(xiàn)這些組件和準則。隨著指南不斷的變化更新,MDC 將進行調(diào)整并更新來滿足新的規(guī)范。

1.1.0 有什么新功能

MDC從 1.0.0 開始發(fā)生了大量的改變!如果你還在使用測試版或者1.0.0 請盡快遷移到 1.1.0 版本或者更新版本。

Material Theming

Material Theming 可以讓你更好的自定義 Material Design 來體現(xiàn)我們的品牌、顏色、字體和形狀的選擇。

MDC 1.1.0 在您的 Android 應(yīng)用中啟用 Material Theming 。所有組件都支持通過主題、樣式、新屬性和自定義類(比如:MaterialShapeDrawable) 來調(diào)整其顏色、字體和形狀。

// 這個地方要繼承 Theme.MaterialComponents.*
<style name="Theme.MyApp" parent="Theme.MaterialComponents.*">    <!-- Color attributes -->
    <item name="colorPrimary">@color/green_500</item>
    <item name="colorPrimaryVariant">@color/green_700</item>
    <item name="colorOnPrimary">@color/black</item>
    <item name="colorSecondary">@color/orange_500</item>
    <item name="colorSecondaryVariant">@color/orange_300</item>
    <item name="colorOnSecondary">@color/black</item>
    <item name="colorError">@color/red_700</item>
    <item name="colorOnError">@color/white</item>
    <item name="colorSurface">@color/white</item>
    <item name="colorOnSurface">@color/black</item>
    <item name="android:colorBackground">@color/white</item>
    <item name="colorOnBackground">@color/black</item>    <!-- Type attributes -->
    <item name="textAppearanceHeadline1">
        @style/TextAppearance.MyApp.Headline1
    </item>
    <item name="textAppearanceHeadline2">
        @style/TextAppearance.MyApp.Headline2
    </item>
    <item name="textAppearanceHeadline3">
        @style/TextAppearance.MyApp.Headline3
    </item>
    <item name="textAppearanceHeadline4">
        @style/TextAppearance.MyApp.Headline4
    </item>
    <item name="textAppearanceHeadline5">
        @style/TextAppearance.MyApp.Headline5
    </item>
    <item name="textAppearanceHeadline6">
        @style/TextAppearance.MyApp.Headline6
    </item>
    <item name="textAppearanceSubtitle1">
        @style/TextAppearance.MyApp.Subtitle1
    </item>
    <item name="textAppearanceSubtitle2">
        @style/TextAppearance.MyApp.Subtitle2
    </item>
    <item name="textAppearanceBody1">
        @style/TextAppearance.MyApp.Body1
    </item>
    <item name="textAppearanceBody2">
        @style/TextAppearance.MyApp.Body2
    </item>
    <item name="textAppearanceCaption">
        @style/TextAppearance.MyApp.Caption
    </item>
    <item name="textAppearanceButton">
        @style/TextAppearance.MyApp.Button
    </item>
    <item name="textAppearanceOverline">
        @style/TextAppearance.MyApp.Overline
    </item>    <!-- Shape attributes -->
    <item name="shapeAppearanceSmallComponent">
        @style/ShapeAppearance.MyApp.SmallComponent
    </item>
    <item name="shapeAppearanceMediumComponent">
        @style/ShapeAppearance.MyApp.MediumComponent
    </item>
    <item name="shapeAppearanceLargeComponent">
        @style/ShapeAppearance.MyApp.LargeComponent
    </item>
    
</style>

新組件

Material Components 庫中有很多新的組件添加到了 MDC 1.1.0 中。并且已經(jīng)存在的組件也是通過最新的設(shè)計有了新的 style 如果您使用的是Design庫或者 MDC 1.0.0 那么組件將自動采用這些新樣式。例如,文字有新的默認的 appearance

MDC 1.1.0 中提供的一些新組件和更新組件包括:

  • 擴展 FAB
  • 日期選擇器
  • 切換按鈕
  • 底部應(yīng)用欄

黑色主題支持

在 Android 10 中引入了系統(tǒng)范圍的深色主題支持。連同 Material Design 指南。MDC 可以立即使用 Material Dark 主題。它以現(xiàn)有的 AppCompat DayNight功能為基礎(chǔ),因此不用從頭開始實現(xiàn)它:

  • 主題:現(xiàn)在所有的 MDC 主題都會有不同的 DayNight 形式。這些會根據(jù)設(shè)備配置自動在 -night-not-night 資源定位符之間切換。
  • 新顏色:默認調(diào)色板已擴展為了深色主題已經(jīng)擴展了。應(yīng)該進行調(diào)整 colorPrimary colorSecondary 以使品牌在黑暗主題中的飽和度降低。默認情況下 colorSurface android:colorBackground 使用深灰而不是黑色來減輕眼睛疲勞,使高程度更明顯,并確保與文本和其他元素形成適當(dāng)?shù)膶Ρ榷取?/li>
  • 海拔表面增亮:所有 MDC 組件都支持其表面增亮來傳達黑暗主題中的海拔。指南中的白色覆蓋投影映射到組件上設(shè)置的 elevation 的數(shù)值。
  • 可訪問性:MDC 利用顏色來區(qū)分是否可以訪問。(colorSurface 和 colorOnSurface)在深色主題中區(qū)分可訪問和不可訪問一個重要的方面是通過顏色之間有足夠的對比度!MDC 現(xiàn)在使用推薦的顏色和不透明度來確保是這種情況。
  • Primary 和 Surface 顏色切換:MDC 組件遵循指南,減少在深色主題中使用 Primary 色。例如:可以在工具欄中看到使用 colorSurface 來替換了 colorPrimary 作為其背景色。這是由一個新的顏色屬性 colorPrimarySurface (更加當(dāng)前的模式在 colorPrimarycolorSurface之間切換)和組件的PrimarySurface style 來提供支持。

Android 10 手勢支持

手勢導(dǎo)航是在 Android10 中引入的。某些 MDC 組件常常處于主手勢的區(qū)域(比如,BottomNavigationView 以及從底部向上滑動的原始手勢)。相關(guān)組件已經(jīng)更新,以考慮這些手勢區(qū)域以及設(shè)備方向。適當(dāng)?shù)?padding/margin 值會自動被申請,用 WindowInsets API(在 Android 10 或者更高版本)。

Accessibility improvements

許多可 accessibility 改進已經(jīng)加入到 MDC 組件中。這主要包含更好的 "話語提示" 在有用的內(nèi)容描述、功能和各部分的排序。例如,TextInputLayout現(xiàn)在按正確的順序讀取其提示,輸入以及幫助程序或錯誤文本。

MDC的下一步計劃

我們已經(jīng)收到了您關(guān)于 MDC 版本的反饋。我們致力于更新并且整合您的重要貢獻。

原文地址:https://medium.com/google-design/material-design-components-for-android-1-1-0-are-now-available-45e1d576037c

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容