Material Design中控件简单使用（CoordinatorLayout，FloatingActionButton、TextInputEditText、Snackbar、CardView..）

最新推荐文章于 2022-08-04 23:20:33 发布

CCstar1

最新推荐文章于 2022-08-04 23:20:33 发布

阅读量327

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/CCstar1/article/details/81364876

版权

Android 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

Google I/O 2014 就发布的 Material Design ，今天就强烈推荐一下还没有用的猿友们，真的很好用。

Material Design中文版链接：http://design.1sters.com/#

首先在Module下中的bulid.gradle添加依赖：

compile 'com.android.support:appcompat-v7:25.3.1'

同步之后就可以使用了。

先将简单使用的代码粘贴出来，相信大家就可以看出如何使用了，后面结合代码讲点我自己的学习发现的一些注意点。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.material_design.MDtestActivity">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/text_layout"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="30dp">

        <EditText
            android:id="@+id/et_name"
            android:layout_width="300dp"
            android:layout_height="50dp"
            android:hint="name" />
    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputEditText
        android:id="@+id/et_password"
        android:layout_gravity="center_horizontal"
        android:layout_width="300dp"
        android:hint="password"
        android:layout_height="50dp"
        android:layout_marginTop="150dp" />
    <android.support.v7.widget.CardView
        android:layout_width="200dp"
        android:layout_marginTop="250dp"
        android:layout_gravity="center_horizontal"
        app:cardElevation="@dimen/distance_5"
        app:cardCornerRadius="@dimen/distance_10"
        android:layout_height="100dp">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:src="@mipmap/vodio"
                android:scaleType="centerCrop"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
            <TextView
                android:layout_weight="0"
                android:gravity="center"
                android:text="显示阴影和圆角"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>

    </android.support.v7.widget.CardView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_button"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="30dp"
        android:layout_marginRight="30dp" />
</android.support.design.widget.CoordinatorLayout>

CoordinatorLayout

CoordinatorLayout又名协调者布局，是用来协调其子view并以触摸影响布局的形式产生动画效果的一个super-powered FrameLayout，其典型的子View包括：FloatingActionButton，SnackBar。注意：CoordinatorLayout是一个顶级父View。它继承FrameLayout所以在它其中的子布局都会默认现在在左上角，对于控制它的显示位置也只能使用FrameLayout中可以使用的layout_gravity与gravity。

这里有的人可能会想可以嵌套RelativeLayout去设置控件位置，这样CoordinatorLayout的动画效果就会失效，例如FloatingActionButton设置在底部当底部显示SnackBar时FloatingActionButton不会上移可能会被覆盖。

FloatingActionButton

FloatingActionButton就是一个漂亮的按钮，其本质是一个ImageVeiw。有一点要注意，Meterial Design引入了Z轴的概念，就是所有的view都有了高度，他们一层一层贴在手机屏幕上，而FloatingActionButton的Z轴高度最高，它贴在所有view的最上面，没有view能覆盖它。它自带阴影效果也可以在xml中设置阴影的大小以及一些其他样式。这里要注意的是一个页面最好只有一个FloatingActionButton，它是层级最高的也就代表它类似一个悬浮按钮大多是用来点击展示一些功能比如一个可滑动页面中的回到顶部的按钮。

TextInputEditText&TextInputLayout

TextInputEditText和TextInputLayout的效果主要是对于用户输入体验有很大的提升，extInputEditText是EditText的子类,说白了是为了填EditText的坑的,相对于EditText在软键盘弹出后出现的一些问题上有一些很好的改进。TextInputLayout需要包裹一个EditText方可显现出它的魅力，这里需要注意的是EditText需要指定hint，这样才可以在输入的时候在输入框的左上角显示hint中包含的提示。样式也可以自行去设置。

Snackbar

Snackbar类似我们常用的Toast，它用于显示简单消息并且提供和用户的一个简单操作的一种弹出式提醒。当使用Snackbar时，提示会出现在消息最底部，通常含有一段信息和一个可点击的按钮。可以修改背景颜色哦。它有三种显示时长：

①Snackbar.LENGTH_SHORT:与Toast.LENGHT_SHORT(大约1.x秒)一样显示较短时长后自动消失。

②Snackbar.LENGTH_LONG:与Toast.LENGHT_LONG(大约3秒)一样显示相对较长时间后自动消失。

③Snackbar.LENGTH_INDEFINITE:永不消失除非手动调用dismiss()方法去除Snackbar。

下面是它的简单使用有按钮的那种：


    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.fab_button:
                Snackbar.make(coordinatorLayout, "This is ok!", Snackbar.LENGTH_LONG).setAction("NavigationView", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MDtestActivity.this, "That is ok!", Toast.LENGTH_SHORT).show();
                    }
                }).show();
                break;
        }
    }

CardView

CardView适用于实现卡片式布局效果的重要控件，实际上CardView也是一个FrameLayout，只是额外提供了圆角和阴影效果，看上去有立体的感觉。一般CardView都用在ListView的item布局中。相对于上述的其他控件，我个人比较喜欢CardView，它省去了很多自己手动写圆角，阴影等一些样式的烦恼与工作量而且使用简单。以下是一些它的相关属性：

android:cardBackgroundColor 设置背景
android:cardCornerRadius 设置圆角
app:cardElevation 设置阴影大小
app:cardMaxElevation 设置阴影的最大高度
app:contentPadding 内容距离边界的距离
app:contentPaddingXXX 设置局部的内边距，替换Padding的，在CardView中设置Padding是不起作用的。
app:cardUseCompatPadding 如果您需要将CardView与其他视图对齐，可能在21以下，可以将此标志设置为true，CardView将在21之后的平台上添加相同的填充值。
app:cardPreventCornerOverlap 是否裁剪边界以防止重叠

大概就简单的讲到这里，对于它们功能的强大我这里只是些皮毛，Material Design中还有很多好用的控件，它们的组合起来可以轻松解决一些我们之前头疼的效果，大家可以去详细的学习一下。