Material Components(MDC)简单使用介绍

1.简介

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

2.开发步骤

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

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

1.添加依赖

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

 2.添加输入框 

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

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

   <com.google.android.material.textfield.TextInputEditText
       android: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

1. Widget.MaterialComponents.TextInputLayout.FilledBox

2. Widget.MaterialComponents.TextInputLayout.OutlinedBox

可配置的功能：

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

 

 

3.添加按钮

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

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

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

按钮的功能包括

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

4.添加导航栏

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

 <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp">

        <androidx.appcompat.widget.Toolbar
            android: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 icon
                getContext().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;
    }

    @Override
    public void onClick(View view) {
        backdropShown = !backdropShown;

        // Cancel the existing animations
        animatorSet.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