建站
咨詢
售后
建站咨詢
新聞中心
準(zhǔn)備好遷移到 Material Design 3 了嗎?讓我們開始吧!
十載的昌圖網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整昌圖建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“昌圖網(wǎng)站設(shè)計(jì)”,“昌圖網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
從 M2 遷移到 M3(MDC 1.4.0 到 MDC 1.5.0)
將 Theme 更新為 Material 3
Material Design 3 具有擴(kuò)展的顏色系統(tǒng)，可利用動(dòng)態(tài)顏色等功能。
如果大家使用 Material Theme Builder 重新配置 palettes 的話，可以簡(jiǎn)單地放入 Android XML 或 Compose 的主題代碼。否則，請(qǐng)?zhí)鎿Q Theme.MaterialComponents.* 為 Theme.Material3.* 主題和 Widget.MaterialComponents.* 的部件樣式。
顏色和主題
Material You 中的主題擴(kuò)展了其前身的顏色空間，添加了第三顏色和從主要顏色、次要顏色、第三顏色和錯(cuò)誤顏色派生的許多插值顏色。
完整版本：
這些新的色彩空間支持動(dòng)態(tài)色彩表達(dá),使用 Material Theme Builder 簡(jiǎn)化了動(dòng)態(tài)顏色的可視化并遷移到新顏色系統(tǒng)，可在 Web 和 Figma 上使用。當(dāng)通過作圖工具生成時(shí)，這些中間顏色值只需提供一種顏色即可創(chuàng)建。
How it works
當(dāng)用戶在 Android 12 設(shè)備上更改壁紙時(shí)，系統(tǒng)會(huì)分析圖像已選擇顏色，并使用初 Primary 種子顏色通過算法選擇主要、次要、第三和錯(cuò)誤顏色。同時(shí)，它應(yīng)用了色彩理論和可訪問性規(guī)則。從這些顏色中，該算法創(chuàng)建從 0% 亮度(黑色)到 100%(白色)的色調(diào)調(diào)色板。通過工具創(chuàng)建的動(dòng)態(tài)主題或自定義主題將使用這些色調(diào)調(diào)色板中的值來設(shè)置該顏色范圍的主題屬性。
例如，如果主顏色上顯示的 text/icon 的 On Primary color 是 100 色調(diào)，則 On Secondary、On Tertiary 和 On Error 都將為淺色主題各自顏色的 100 色調(diào)，也許是 20 色調(diào)對(duì)于黑暗的主題。
大家可以自由自定義任何這些值，但請(qǐng)注意對(duì)比度和可訪問性。
在 Android 12 設(shè)備上，Material You 將根據(jù)用戶的壁紙生成動(dòng)態(tài)調(diào)色板。除了生成的調(diào)色板外，還會(huì)有幾個(gè)預(yù)先創(chuàng)建的方案。要選擇動(dòng)態(tài)顏色，首先需要確保應(yīng)用程序中沒有任何硬編碼顏色。相反，應(yīng)用程序中的所有顏色都應(yīng)作為主題屬性引用，這樣在啟用動(dòng)態(tài)壁紙顏色支持時(shí)可以輕松交換它們。
整合動(dòng)態(tài)色彩
Material 庫(kù)中的DynamicColors類利用 Activity Lifecycle Callbacks 來確定何時(shí)以及如何應(yīng)用顏色疊加。使用提供的 API 調(diào)用，可以將動(dòng)態(tài)顏色應(yīng)用于子集或整個(gè)應(yīng)用程序，除此之外還可以確定應(yīng)在何時(shí)何地應(yīng)用動(dòng)態(tài)顏色。
為避免意外影響，需要確認(rèn)應(yīng)用程序代碼引用主題屬性不是任何硬編碼顏色(HEX 代碼或@color/)。
給定一個(gè)使用帶有 MDC 組件的 Material3 主題的應(yīng)用程序，以下是啟用動(dòng)態(tài)顏色所需的最少代碼 - onCreateApplication 類的方法中的一行。
import android.app.Application;
import com.google.android.material.color.DynamicColors;
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
// This is all you need.
DynamicColors.applyToActivitiesIfAvailable(this);
}
}
排版
在 Material3 之前，有 6 種標(biāo)題變體、2 種字幕變體、2 種正文變體、按鈕、標(biāo)題和上劃線樣式。
在 Material3 中，每個(gè)分類都有更規(guī)則且數(shù)量更少的變體，即小、中和大。
大多數(shù) new TextAppearance 樣式直接映射到 pre-Material 3 之前的樣式。MDC-Android 中的屬性名稱使用類似的模式形成：textAppearance+ {Display, Headline, Title, Body, Label} + {Large, Medium, Small}
組件更新
Top App Bar
Top App Bar已經(jīng)被 Material You 刷新過以更好地與顏色對(duì)齊。在 Material You 之前，top app bar 使用陰影來區(qū)分 app bar 和 content。顏色現(xiàn)在是使用新創(chuàng)建的表面色調(diào)的主要標(biāo)高指標(biāo)。
Navigation Bar / Bottom Navigation View
Bottom Navigation View 進(jìn)行了視覺刷新并獲得了一些新功能。目前， Bottom Navigation View 中的每個(gè)菜單項(xiàng)都由一個(gè)圖標(biāo)和文本標(biāo)簽組成。選擇目的地后，圖標(biāo)和標(biāo)簽都將被染成與非活動(dòng)狀態(tài)不同的顏色。
在 Material Design 3 中，不活動(dòng)的目的地由圖標(biāo)的 OutLined 版本(如果可用)指示?；顒?dòng)目的地由一個(gè)填充在藥丸狀容器中的圖標(biāo)表示。
如果圖標(biāo)的不同填充和 OutLined 變體不可用，就可能需要考慮其他提示來幫助指示活動(dòng)狀態(tài)，例如僅在活動(dòng)目的地上顯示目的地標(biāo)簽。
Floating Action Button
FloatingActionButton 經(jīng)歷了一些重新設(shè)計(jì)。沒有明確主題或遺留 Widget.Design.FloatingActionButton 主題的 FAB 將在主題中繼承此新設(shè)計(jì) Theme.Material3.*。
新的 FAB 的角半徑更小，現(xiàn)在類似于圓角矩形，而不是現(xiàn)有 FAB 的圓形。有預(yù)設(shè)樣式可以使用來自主色、輔助色或表面顏色的色調(diào)來為 FAB 設(shè)置主題。要保留以前的浮動(dòng)操作按鈕設(shè)計(jì)，請(qǐng)確保將 FAB 的樣式設(shè)置為@style/Widget.MaterialComponents.FloatingActionButton. 還有一個(gè)新的大型 FAB 變體。
Button
Material Design 3 中的填充和輪廓按鈕具有完全圓角，包含在派生自 Theme.Material3.*.
Chips
在 Material Design 2 中，芯片具有完全圓角，在 Material Design 3 中，它們發(fā)生了視覺變化，現(xiàn)在有 8 個(gè) dp 角。它們?cè)诓牧?3 中都有 8 個(gè) dp 角。
Badges
Bottom Navigation View 現(xiàn)在能夠?qū)㈥P(guān)聯(lián)的 Badges 顯示為填充形狀或帶有標(biāo)簽。通過將其重力設(shè)置為以下聲明的常量之一，可以將 Badges 錨定到圖標(biāo)的四個(gè)角之一 Badge Drawable.BadgeGravity：
TOP_START
TOP_END
BOTTOM_START
BOTTOM_END
下面是一些代碼，展示了如何將 Badges 添加到 BottomNavigationView 菜單項(xiàng)：
Navigation View bn = //... items.
// Retrieve the first menu item and increment the badge label MenuItem menuItem = bn.getMenu().getItem(0);
int menuItemId = menuItem.getItemId();
Badge Drawable badgeDrawable = bn.getOrCreateBadge(menuItemId);
// If the first menu item is selected and the badge was hidden,
// call Badge Drawable #setVisible to ensure the badge is visible.
badge Drawable.setVisible(true);
badge Drawable.setNumber(badgeDrawable.getNumber() +1);
下一步是什么?大家看完上述文章想必已經(jīng)了解了 MDC 1.4.0 和 1.5.0(Material Design 3)版本之間的主要區(qū)別。
所以還在等什么，趕緊快來替換接入Material Design 3， 探索不一樣的UI體驗(yàn)!
新聞標(biāo)題：MaterialDesign3全新的進(jìn)階版本UI庫(kù)！
文章地址：http://m.5511xx.com/article/cocdspg.html
