1.简介

材料组件设计是为了让我们开发的程序有一个统一的样式、品牌效应、互动效果以及操作界面产生的动作，是在Android原生组件的基础上添加了更加丰富的功能和显示效果，遵循Android界面设计的规范，能够更方便的设计产品，缩短开发设计时间。

2.开发步骤

材料组件都包括那些东西？访问材料组件设计，

这次主要介绍组件中最基础的，如按钮，输入框，导航栏等。

1.添加依赖

api 'com.google.android.material:material:1.1.0-alpha06'

2.添加输入框

对于登陆界面，一般需要独特的设计风格，让人眼前一亮，尽管组件不多，但是对细节的设计是十分重要的，这关乎用户体验。

<com.google.android.material.textfield.TextInputLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="4dp"android:hint="@string/shr_hint_username"><com.google.android.material.textfield.TextInputEditTextandroid:layout_width="match_parent"android:layout_height="wrap_content"android:inputType="text"android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>

TextInputLayout布局包括了原生组件的TextView和EditText，也是这两种组件的组合形式，将这两个组合封装起来，适合添加一些动画，并统一样式。

TextInputLayout有两种样式，分别是FILLED和OUTLINE

Widget.MaterialComponents.TextInputLayout.FilledBox

Widget.MaterialComponents.TextInputLayout.OutlinedBox

可配置的功能：

在用app:counterEnabled和显示总字符数和最大字符数app:counterMaxLength
输入框中的前部分添加图标
支持使用切换密码可见性 app:passwordToggleEnabled
显示内置错误反馈app:errorEnabled="true"
使用以下命令提供内置的帮助器文本功能 app:helperText

3.添加按钮

按钮相对比较简单，主要有三种样式：

填充形状
轮廓形状
只保留文本

Widget.MaterialComponents.Button
Widget.MaterialComponents.Button.OutlinedButton
Widget.MaterialComponents.Button.TextButton

按钮的功能包括

默认情况下内置触摸反馈（称为MDC波纹）
默认标高
可自定义的拐角半径和行程

4.添加导航栏

原生的导航栏包括显示主题风格的样式，以及程序名。MDC顶部导航栏主要提供与当前屏幕相关的内容和操作。

 <com.google.android.material.appbar.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"app:elevation="0dp"><androidx.appcompat.widget.Toolbarandroid:id="@+id/app_bar"style="@style/Widget.Shrine.Toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:paddingStart="12dp"android:paddingLeft="12dp"android:paddingEnd="12dp"android:paddingRight="12dp"app:contentInsetStart="0dp"app:navigationIcon="@drawable/shr_branded_menu"app:title="@string/shr_app_name" /></com.google.android.material.appbar.AppBarLayout>

功能介绍：

添加导航图标app:navigationIcon
添加标题app:tittle
动作项目(action item)
溢出菜单app:popupTheme

对导航图标进行监听，并显示下拉菜单。

   private void setUpToolbar(View view) {Toolbar toolbar = view.findViewById(R.id.app_bar);AppCompatActivity activity = (AppCompatActivity) getActivity();if (activity != null) {activity.setSupportActionBar(toolbar);}toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(),view.findViewById(R.id.product_grid),new AccelerateDecelerateInterpolator(),getContext().getResources().getDrawable(R.drawable.shr_branded_menu), // Menu open icongetContext().getResources().getDrawable(R.drawable.shr_close_menu))); // Menu close icon}

监听类：

public class NavigationIconClickListener implements View.OnClickListener {private final AnimatorSet animatorSet = new AnimatorSet();private Context context;private View sheet;private Interpolator interpolator;private int height;private boolean backdropShown = false;private Drawable openIcon;private Drawable closeIcon;NavigationIconClickListener(Context context, View sheet) {this(context, sheet, null);}NavigationIconClickListener(Context context, View sheet, @Nullable Interpolator interpolator) {this(context, sheet, interpolator, null, null);}NavigationIconClickListener(Context context, View sheet, @Nullable Interpolator interpolator,@Nullable Drawable openIcon, @Nullable Drawable closeIcon) {this.context = context;this.sheet = sheet;this.interpolator = interpolator;this.openIcon = openIcon;this.closeIcon = closeIcon;DisplayMetrics displayMetrics = new DisplayMetrics();((Activity) context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);height = displayMetrics.heightPixels;}@Overridepublic void onClick(View view) {backdropShown = !backdropShown;// Cancel the existing animationsanimatorSet.removeAllListeners();animatorSet.end();animatorSet.cancel();updateIcon(view);final int translateY = height -context.getResources().getDimensionPixelSize(R.dimen.shr_product_grid_reveal_height);ObjectAnimator animator = ObjectAnimator.ofFloat(sheet, "translationY", backdropShown ? translateY : 0);animator.setDuration(500);if (interpolator != null) {animator.setInterpolator(interpolator);}animatorSet.play(animator);animator.start();}private void updateIcon(View view) {if (openIcon != null && closeIcon != null) {if (!(view instanceof ImageView)) {throw new IllegalArgumentException("updateIcon() must be called on an ImageView");}if (backdropShown) {((ImageView) view).setImageDrawable(closeIcon);} else {((ImageView) view).setImageDrawable(openIcon);}}}
}

通过这个监听类，很好的实现了对导航栏图标的动画效果以及下拉菜单的显示。

3.总结

总的来说，通过学习MDC，能够更加方便的设计出一些时尚的显示效果，并且对设计界面有了更加深入的了解，之后还要从整体考虑，将一个应用的风格体现出来，而不是杂乱的背景，或者堆叠起来的图标。这样才能设计出一个好的作品。

参考：1.https://material.io/components

2.https://codelabs.developers.google.com/codelabs/mdc-102-java

Material Components(MDC)简单使用介绍相关推荐

[译] MDC-101 Flutter：Material Components（MDC）基础（Flutter）
原文地址:MDC-101 Flutter: Material Components (MDC) Basics (Flutter) 原文作者:codelabs.developers.google.com ...
Flutter (四) 基础 Widgets、Material Components Widget 全面介绍
基础 Widgets 重要概念一切皆组件.Flutter 所有的元素都是由组件组成.比如一个布局元素.一个动画.一个装饰效果等. 容器 Container 容器组件 Container 包含一个子 ...
Material Components——Shape的处理
Material Components是Google官方对Material Deign的最佳实践,这个库试图在不同的Android版本中统一Material Design UI组件的外观和使用代码,当 ...
手势识别（一） - 项目概述与简单应用介绍
我公司的科室开始在公众号上规划一些对外的技术文章了,包括实战项目.模型优化.端侧部署和一些深度学习任务基础知识,而我负责人体图象相关技术这一系列文章,偶尔也会出一些应用/代码解读等相关的文章. 文章在 ...
GitHub 上排名前 100 的 Android 开源库进行简单的介绍
本文转载于:https://github.com/Freelander/Android_Data/blob/master/Android-Librarys-Top-100.md 本项目主要对目前 Gi ...
我的Android进阶之旅】GitHub 上排名前 100 的 Android 开源库进行简单的介绍
GitHub Android Libraries Top 100 简介本文转载于:https://github.com/Freelander/Android_Data/blob/master/And ...
UE4 Material 101学习笔记——01-07 介绍/PBR基础/UV扭曲/数据类型/翻页动画/材质混合/性能优化
UE4 Material 101学习笔记--01-07 介绍/PBR基础/UV扭曲/数据类型/翻页动画/材质混合/性能优化 Lec 01 什么是着色器 What Is A Shader? 1.1 介绍 ...
matlab整型和浮点的区别,技术帖 | 心理学MATLAB初学者教程--简单数据类型介绍（逻辑型数据，整型/浮点型数据，字符型）......
1.2.1 什么是变量和变量名变量这个词似乎在许多地方都有出现,在计算机中变量是指是一段有名字的连续存储空间(摘自百度百科),而这个所谓的名字就叫做变量名.举个例子说现在我们再MATLAB的命令窗口 ...
拨测工具_您可以拨多少钱？快速简单地介绍有用的工具。
拨测工具 by Miguel Bustamante 通过Miguel Bustamante 您可以卷曲多少? 快速简单地介绍有用的工具. (How much can you cURL? A quick ...
tcpdump的简单选项介绍
tcpdump采用命令行方式,它的命令格式为: tcpdump [ -AdDeflLnNOpqRStuUvxX ] [ -c count ] [ -C file_size ] [ -F file ] ...

Material Components(MDC)简单使用介绍