Material Design 是 Google 推出的一种新的设计语言，它强调简洁、直观、有层次感的设计风格，同时提供了一套丰富的控件来帮助开发者实现这种设计风格。本文将介绍 Material Design 的一些新控件，并提供示例代码，帮助大家更好的使用和理解这些控件。
1. AppBarLayout
AppBarLayout 是一个可以滚动的 Toolbar，它可以和 RecyclerView、NestedScrollView 等控件一起使用，当这些控件滚动时，AppBarLayout 会根据滚动距离进行相应的变化，比如透明度、高度等，从而实现一个流畅的界面效果。
示例代码：
// javascriptcn.com 代码示例
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/lorem_ipsum"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>2. TabLayout
TabLayout 是一个用于切换页面的控件，它可以和 ViewPager 一起使用，通过滑动或点击 Tab 来切换不同的页面。TabLayout 还支持自定义 Tab 样式和指示器样式。
示例代码：
// javascriptcn.com 代码示例
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab 1"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab 2"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab 3"/>
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>3. FloatingActionButton
FloatingActionButton 是一个浮动的圆形按钮，通常用于执行一些常用的操作，比如拍照、发送邮件等。FloatingActionButton 还支持设置阴影、背景色、图标等属性。
示例代码：
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:elevation="6dp"
app:fabSize="normal"
app:backgroundTint="@color/colorAccent"
app:srcCompat="@drawable/ic_add"/>4. TextInputLayout
TextInputLayout 是一个用于包装 EditText 的控件，它可以在 EditText 上方显示提示信息和错误信息，并支持设置提示和错误信息的颜色、字体等属性。TextInputLayout 还支持设置计数器、密码可见性等属性。
示例代码：
// javascriptcn.com 代码示例
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>5. Snackbar
Snackbar 是一个用于显示简短消息的控件，它通常会在底部弹出，比如提示用户操作成功或失败，Snackbar 支持设置文本、动作、持续时间等属性。
示例代码：
Snackbar.make(view, "操作成功", Snackbar.LENGTH_SHORT).show();
总结
本文介绍了 Material Design 的一些新控件，并提供了示例代码，希望能帮助大家更好的使用和理解这些控件。Material Design 提供了一种简洁、直观、有层次感的设计风格，通过使用这些控件，可以更好的实现这种设计风格。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651127cf95b1f8cacd985237