廢話(huà)不多說(shuō)開(kāi)始咯 !

一尿这、接入說(shuō)明

1汽抚、配置根目錄下的buid.gradle文件

allprojects {
    repositories {
      google()
      jcenter()
    }
  }

2苟翻、配置項(xiàng)目下的buid.gradle文件

dependencies {
    // ...
    implementation 'com.google.android.material:material:<最新版>'
    // ...
  }

點(diǎn)擊獲取最新版本
點(diǎn)擊訪問(wèn)官網(wǎng)地址

注意：

1衰倦、您不應(yīng)該同時(shí)使用com.android.support以及com.google.android.material花鹅。

2发侵、如果你不想切換到新的androidx和com.google.android.material 交掏，您可以依賴(lài)com.android.support:design:28.0.0。

3刃鳄、設(shè)置compileSdkVersion to 29

4盅弛、確保使用AppCompatActivity

5、更換應(yīng)用主題

Theme.MaterialComponents
Theme.MaterialComponents.NoActionBar
Theme.MaterialComponents.Light
Theme.MaterialComponents.Light.NoActionBar
Theme.MaterialComponents.Light.DarkActionBar
Theme.MaterialComponents.DayNight
Theme.MaterialComponents.DayNight.NoActionBar
Theme.MaterialComponents.DayNight.DarkActionBar

<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight">
    <!-- ... -->
</style>

6叔锐、添加Material component

可以通過(guò)這個(gè)網(wǎng)站https://material.io/develop/android挪鹏，去查找要使用的Material components，里邊都有使用接入說(shuō)明愉烙。

例如添加一個(gè)輸入框

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/textfield_label">

  <com.google.android.material.textfield.TextInputEditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>

還可以自定義樣式

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/textfield_label">

  <com.google.android.material.textfield.TextInputEditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>

二讨盒、Android Material組件1.2.0更新說(shuō)明

如果您尚未開(kāi)始使用 MDC 的 1.2.0 版本，現(xiàn)在可以更新了步责。

• MDC 1.1.0

A.gif

新UI框架視頻鏈接

三返顺、Material 動(dòng)效

Material 動(dòng)效系統(tǒng) 包含一套 (四種) 轉(zhuǎn)場(chǎng)動(dòng)畫(huà)模式禀苦。它們可以幫助用戶(hù)理解應(yīng)用并在其中導(dǎo)航瀏覽，還能增強(qiáng)組件之間或全屏視圖之間的聯(lián)系遂鹊。這些轉(zhuǎn)場(chǎng)模式包括:

• 容器變換
• 共享軸
• 淡入淡出
• 彈出

這些轉(zhuǎn)場(chǎng)模式可用于 Fragment (包括 Jetpack Navigation) 振乏、Activity 和 View 之間的過(guò)渡。

• Jetpack Navigation

Fragment 之間的容器變換 (使用 Jetpack Navigation)

<!-- fragment_a.xml -->
<View
    android:id="@+id/start_view"
    android:transitionName="start_container" />

<!-- fragment_b.xml -->
<View
    android:id="@+id/end_view"
    android:transitionName="end_container" />

// FragmentB.kt
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    ...
    sharedElementEnterTransition = MaterialContainerTransform()
}

// FragmentA.kt
fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    ...
    exitTransition = Hold()
}
...
val directions = FragmentADirections.actionFragmentAToFragmentB()
val extras = FragmentNavigatorExtras(startView to "end_container")
findNavController().navigate(directions, extras)

Fragment 之間的共享 Z 軸

// FragmentA.kt
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    ...
    reenterTransition = MaterialSharedAxis(
        MaterialSharedAxis.Z, /* forward = */ false)
    exitTransition = MaterialSharedAxis(
        MaterialSharedAxis.Z, /* forward = */ true)
}
// FragmentB.kt
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    ...
    enterTransition = MaterialSharedAxis(
        MaterialSharedAxis.Z, /* forward = */ true)
    returnTransition = MaterialSharedAxis(
        MaterialSharedAxis.Z, /* forward = */ false)
}

Fragment 之間的淡入淡出

// FragmentA.kt
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    ...
    exitTransition = MaterialFadeThrough()
}

// FragmentB.kt
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    ...
    enterTransition = MaterialFadeThrough()
}

彈出目標(biāo)視圖 (使用 TransitionManager)

val fade = MaterialFade()
TransitionManager.beginDelayedTransition(container, fade)
view.visibility = View.VISIBLE // Use View.GONE to fade out

• 詳細(xì)了解如何在 Android 上實(shí)現(xiàn)動(dòng)效

四秉扑、Slider

A.gif

利用 Slider (滑動(dòng)條)慧邮，用戶(hù)可以在一定的數(shù)值范圍內(nèi)進(jìn)行選擇，非常適合用于調(diào)整音量舟陆、亮度等設(shè)置數(shù)值或在應(yīng)用圖像濾鏡時(shí)調(diào)整其參數(shù)误澳。

• Sliders

在 MDC 1.2.0 中，您可以通過(guò) Slider 和 RangeSlider widget 在 Android 應(yīng)用中使用滑動(dòng)條吨娜。這些 widget 類(lèi)似于 SeekBar脓匿，但包含更多功能并支持Material 主題。

<!-- In layout -->
<com.google.android.material.slider.Slider
    android:id=”@+id/slider”
    ...
    android:valueFrom="0.0"
    android:valueTo="100.0"
    android:stepSize="10.0" />
...
<com.google.android.material.slider.RangeSlider
    android:id=”@+id/rangeSlider”
    ...
    android:valueFrom="0.0"
    android:valueTo="100.0"
    android:stepSize="10.0"
    app:values="@array/initial_slider_values" />

<!-- In res/values/arrays.xml -->
<resources>
    ...
    <array name="initial_slider_values">
        <item>20.0</item>
        <item>70.0</item>
    </array>
</resources>

// In code
slider.addOnChangeListener { slider, value, fromUser ->
    // Respond to change in slider's value
}
...
val values = rangeSlider.values

在這里詳細(xì)了解如何實(shí)現(xiàn)滑動(dòng)條宦赠。

• Slider
• RangeSlider
• Material 主題
• 實(shí)現(xiàn)滑動(dòng)條

五、ShapeableImageView

全新的 ShapeableImageView widget 是 AppCompatImageView 的擴(kuò)展米母，用于處理形狀主題 (shape theming)勾扭。常見(jiàn)用例是對(duì)矩形源圖像進(jìn)行圓角遮罩。不過(guò)铁瞒，該 widget 也支持各種圓角尺寸妙色、切角以及不同的描邊寬度和顏色。

<!-- res/values/shape.xml -->
<style name=”ShapeAppearanceOverlay.App.CornerSize50Percent”
    parent=””>
    <!--
    Sets size of corners to be 50% of min(width, height) of widget
    -->
    <item name=”cornerSize”>50%</item>
</style>

<!-- res/values/styles.xml -->
<style name=”Widget.App.ShapeableImageView”
    parent=”Widget.MaterialComponents.ShapeableImageView”>
    <item name=”shapeAppearance”>
        ?attr/shapeAppearanceSmallComponent
    </item>
    <item name=”shapeAppearanceOverlay”>
        @style/ShapeAppearanceOverlay.App.CornerSize50Percent
    </item>
    <item name=”strokeWidth”>1dp</item>
    <item name=”strokeColor”>?attr/colorPrimary</item>
</style>

<!-- In layout -->
<com.google.android.material.imageview.ShapeableImageView
    ...
    style=”@style/Widget.App.ShapeableImageView”
    app:srcCompat=”@drawable/image” />

• ShapeableImageView

六慧耍、MaterialColors

MaterialColors 實(shí)用程序類(lèi)也已正式加入 MDC 1.2.0身辨。該類(lèi)提供了各種有用的靜態(tài)方法，可供您在應(yīng)用中以編程方式處理顏色時(shí)使用芍碧。

// Resolve color from theme attr
val primaryColor = MaterialColors.getColor(
    view, R.attr.colorPrimary)

// Layer background color with overlay color + alpha
val overlayedColor = MaterialColors.layer(
    view, R.attr.colorSurface, R.attr.colorPrimary, 0.38f)

• MaterialColors

七煌珊、MaterialButton 會(huì)遵循 android:background 的相應(yīng)設(shè)置

MaterialButton 此前會(huì)忽略通過(guò) android:background 應(yīng)用的自定義背景可繪制內(nèi)容 (drawable)。MDC 1.2.0 中已修復(fù)此問(wèn)題泌豆。如果未設(shè)置自定義背景定庵，則 MaterialShapeDrawable 仍將用作默認(rèn)背景。

• MaterialButton
• MaterialShapeDrawable

注意: MaterialButton 的默認(rèn)樣式包含 backgroundTint踪危，后者也將應(yīng)用于自定義背景可繪制內(nèi)容蔬浙。您可能需要將其更改為其他顏色或?qū)⑵湓O(shè)置為 @empty，從而移除此內(nèi)容贞远。

<!--
Note: Button is auto-inflated as
MaterialButton by MaterialComponentsViewInflater
-->
<Button
    ...
    android:background=”@drawable/custom_background”
    app:backgroundTint=”@empty” />

最后

如果最近準(zhǔn)備面試請(qǐng)看開(kāi)源項(xiàng)目：Note-Android 里面包含不同方向的自學(xué)編程路線畴博、面試題及解析集合/面經(jīng)、及系列技術(shù)文章等

i小灰github地址: https://github.com/dahui888