欢乐颂第二季,完美世界前传下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

MaterialDesign3全新的進階版本UI庫！

準(zhǔn)備好遷移到 Material Design 3 了嗎?讓我們開始吧!

十載的昌圖網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。營銷型網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整昌圖建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)從事“昌圖網(wǎng)站設(shè)計”,“昌圖網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

從 M2 遷移到 M3(MDC 1.4.0 到 MDC 1.5.0)

將 Theme 更新為 Material 3

Material Design 3 具有擴展的顏色系統(tǒng)，可利用動態(tài)顏色等功能。

如果大家使用 Material Theme Builder 重新配置 palettes 的話，可以簡單地放入 Android XML 或 Compose 的主題代碼。否則，請?zhí)鎿Q Theme.MaterialComponents.* 為 Theme.Material3.* 主題和 Widget.MaterialComponents.* 的部件樣式。

顏色和主題

Material You 中的主題擴展了其前身的顏色空間，添加了第三顏色和從主要顏色、次要顏色、第三顏色和錯誤顏色派生的許多插值顏色。

完整版本：

這些新的色彩空間支持動態(tài)色彩表達,使用 Material Theme Builder 簡化了動態(tài)顏色的可視化并遷移到新顏色系統(tǒng)，可在 Web 和 Figma 上使用。當(dāng)通過作圖工具生成時，這些中間顏色值只需提供一種顏色即可創(chuàng)建。

How it works

當(dāng)用戶在 Android 12 設(shè)備上更改壁紙時，系統(tǒng)會分析圖像已選擇顏色，并使用初 Primary 種子顏色通過算法選擇主要、次要、第三和錯誤顏色。同時，它應(yīng)用了色彩理論和可訪問性規(guī)則。從這些顏色中，該算法創(chuàng)建從 0% 亮度(黑色)到 100%(白色)的色調(diào)調(diào)色板。通過工具創(chuà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)對于黑暗的主題。

大家可以自由自定義任何這些值，但請注意對比度和可訪問性。

在 Android 12 設(shè)備上，Material You 將根據(jù)用戶的壁紙生成動態(tài)調(diào)色板。除了生成的調(diào)色板外，還會有幾個預(yù)先創(chuàng)建的方案。要選擇動態(tài)顏色，首先需要確保應(yīng)用程序中沒有任何硬編碼顏色。相反，應(yīng)用程序中的所有顏色都應(yīng)作為主題屬性引用，這樣在啟用動態(tài)壁紙顏色支持時可以輕松交換它們。

整合動態(tài)色彩

Material 庫中的DynamicColors類利用 Activity Lifecycle Callbacks 來確定何時以及如何應(yīng)用顏色疊加。使用提供的 API 調(diào)用，可以將動態(tài)顏色應(yīng)用于子集或整個應(yīng)用程序，除此之外還可以確定應(yīng)在何時何地應(yīng)用動態(tài)顏色。

為避免意外影響，需要確認應(yīng)用程序代碼引用主題屬性不是任何硬編碼顏色(HEX 代碼或@color/)。

給定一個使用帶有 MDC 組件的 Material3 主題的應(yī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 中，每個分類都有更規(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 刷新過以更好地與顏色對齊。在 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 進行了視覺刷新并獲得了一些新功能。目前， Bottom Navigation View 中的每個菜單項都由一個圖標(biāo)和文本標(biāo)簽組成。選擇目的地后，圖標(biāo)和標(biāo)簽都將被染成與非活動狀態(tài)不同的顏色。

在 Material Design 3 中，不活動的目的地由圖標(biāo)的 OutLined 版本(如果可用)指示。活動目的地由一個填充在藥丸狀容器中的圖標(biāo)表示。

如果圖標(biāo)的不同填充和 OutLined 變體不可用，就可能需要考慮其他提示來幫助指示活動狀態(tài)，例如僅在活動目的地上顯示目的地標(biāo)簽。

Floating Action Button

FloatingActionButton 經(jīng)歷了一些重新設(shè)計。沒有明確主題或遺留 Widget.Design.FloatingActionButton 主題的 FAB 將在主題中繼承此新設(shè)計 Theme.Material3.*。

新的 FAB 的角半徑更小，現(xiàn)在類似于圓角矩形，而不是現(xiàn)有 FAB 的圓形。有預(yù)設(shè)樣式可以使用來自主色、輔助色或表面顏色的色調(diào)來為 FAB 設(shè)置主題。要保留以前的浮動操作按鈕設(shè)計，請確保將 FAB 的樣式設(shè)置為@style/Widget.MaterialComponents.FloatingActionButton. 還有一個新的大型 FAB 變體。

Button

Material Design 3 中的填充和輪廓按鈕具有完全圓角，包含在派生自 Theme.Material3.*.

Chips

在 Material Design 2 中，芯片具有完全圓角，在 Material Design 3 中，它們發(fā)生了視覺變化，現(xiàn)在有 8 個 dp 角。它們在材料 3 中都有 8 個 dp 角。

Badges

Bottom Navigation View 現(xiàn)在能夠?qū)㈥P(guān)聯(lián)的 Badges 顯示為填充形狀或帶有標(biāo)簽。通過將其重力設(shè)置為以下聲明的常量之一，可以將 Badges 錨定到圖標(biāo)的四個角之一 Badge Drawable.BadgeGravity：

TOP_START

TOP_END

BOTTOM_START

BOTTOM_END

下面是一些代碼，展示了如何將 Badges 添加到 BottomNavigationView 菜單項：

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體驗!

網(wǎng)頁標(biāo)題：MaterialDesign3全新的進階版本UI庫！
網(wǎng)站地址：http://m.fisionsoft.com.cn/article/cocdspg.html