Material Design——控件大汇总(一)

最新推荐文章于 2024-08-15 21:07:38 发布

小龙surpass

最新推荐文章于 2024-08-15 21:07:38 发布

阅读量1.3w

点赞数 11

分类专栏： Android日常开发知识点文章标签： Android Material Design

本文链接：https://blog.csdn.net/Fly_li_sir/article/details/79704021

版权

Android日常开发知识点专栏收录该内容

17 篇文章 2 订阅

订阅专栏

我尽量不打错别字，用词准确，不造成阅读障碍。

最近打算整理一下Google的Material Design风格的控件，虽然这个东西已经出来很长时间了，之前也写过很多次MD的控件，但是一直涉入不深，感觉市面上的APP中，大量级的APP一般不用MD，网易系的用的多一些，小量级的APP中的部分，甚至是个人开发者，用的多一些。

关于Material Design的设计理念和规则，请参看官方文档，这里有一篇归纳，实际开发中很有指导作用。
http://www.cnblogs.com/syjhsgcc/p/4771931.html

本篇主要是讲解控件部分，布局部分的内容下一篇讲，本篇文章涉及：TextInputLayout、CardView、SwitchCompat、SnackBar、FloatingActionButton

TextInputLayout

从名字上看这个属于布局了，实际也的确是布局，继承自LinearLayout，但是使用中感觉知识点不多，当做控件理解也是可以的，也是我接触的第一个MD布局。

最简单的效果：
这里写图片描述
没什么好描述的，一眼就看明白了。
代码：

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="userName" />
</android.support.design.widget.TextInputLayout>

TextInputLayout包裹EditText，注意：TextInputLayout只能有一个子控件，要不然报错：
这里写图片描述

改变下划线颜色:
在当前布局的根布局处设置style:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    style="@style/text_inp"
    tools:context="com.clone.surpassli.mddemo.TextInputLayoutActivity">
  ......
</LinearLayout>

style中设置属性：

<style name="text_inp">
        <item name="android:colorAccent">#00ff00</item>
</style>

还可以在activity的布局style里设置这个属性，要不然就在AppTheme设置；

改变hint文字选中后的样式：
TextInputLayout设置属性：

app:hintTextAppearance="@style/text_input_layout"

<style name="text_input_layout" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#000000</item>
</style>

效果：
这里写图片描述
password选中时变成了黑色，大小为16sp。

加上字数统计及样式：
TextInputLayout设置属性：

app:counterEnabled="true"      //设置是否显示字数统计
app:counterMaxLength="15"      //设置字数统计的最大值
app:counterOverflowTextAppearance="@style/counterOverFlowAppearance"   //设置超出最大值后的样式
app:counterTextAppearance="@style/counterAppearance"                   //设置字数统计的样式

<style name="counterOverFlowAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#000</item>
</style>

<style name="counterAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#ff00</item>
</style>

效果：
这里写图片描述
正常字数统计是红色的，当超过字数的时候就变为黑色了，此时下划线也变为了黑色。

加上错误提示及样式：

app:errorEnabled="true"
app:errorTextAppearance="@style/errorAppearance"

<style name="errorAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#ff00</item>
</style>

til_til.setError("超出字数限制");

效果：
这里写图片描述
超出字数限制后提示文字会出来，此时下划线的颜色变为了红色，与错误提示文字颜色相同。
简化版
你可能觉得这样很麻烦，有相对简单的方法，在根布局的style设置以下属性：

<style name="text_inp">
        <item name="android:colorAccent">#00ff00</item>              //不起作用       
        <item name="android:textColorHint">#674ea7</item>            //默认hint颜色
        <item name="colorControlNormal">#000</item>                  //不起作用
        <item name="colorControlActivated">#ff0</item>               //获取焦点的时候的颜色
        <item name="textColorError">#0000ff</item>                   //错误提示的颜色
        <item name="colorControlHighlight">@color/colorAccent</item> //不起作用
    </style>

正如注释所写的，有些属性不起作用，而且下划线的颜色改变与错误提示、是否获取焦点等还有联系，所以总体感觉不如单独写方便理解、控制、修改，还可以只写一个style供所有属性调用。
设计要求：
TextInputLayout是有设计要求的，也许公司的设计与MD的要求不一样，但是你还是应该看一看，尽量按照Google来。

输入框点击区域高度至少48dp，但横线并不在点击区域底部，还有8dp距离。
右下角可以加入字数统计。字数统计不要默认显示，字数接近上限时在显示出来。
同时有多个错误提示时，屏幕顶部应有一个全局的错误提示通知。
输入框尽量带有自动补全功能。

CardView

我最喜欢的控件，很能提现MD风格。
这里写图片描述
可以设置圆角弧度，还可以设置z轴高度，显示阴影效果。CardView是个Group，继承自FrameLayout。

 <android.support.v7.widget.CardView
        android:layout_width="300dp"
        android:layout_height="200dp"
        app:cardBackgroundColor="@color/colorPrimaryDark"
        app:cardCornerRadius="10dp"
        app:contentPadding="20dp"
        app:cardElevation="23dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="感谢大家浏览我的博客,有什么问题请留言"
            android:textColor="#ffffff" />
 </android.support.v7.widget.CardView>

CardView的属性设置都是"app:"开头的，如果使用"android:"开头的是没有效果的。

app:cardBackgroundColor：设置背景色。
app:cardCornerRadius：设置角的弧度，MD设计要求统一为2dp，但是2dp感官上不太明显。
app:contentPadding：内容padding。
app:cardElevation：设置z轴高度。

设计要求：

圆角弧度统一要求2dp。
卡片最多包涵两块操作区域，辅助操作区至多包含两个操作项，更多操作需要使用下拉菜单。其余部分都是主操作区。

SwitchCompat

选项开关，这个是控件View。
switch_normal
一般代码设置的比较多：

mSwitchCompat.setError("错误");      //设置错误信息的显示
mSwitchCompat.setTextOff("off");     //设置关闭时的文字
mSwitchCompat.setTextOn("on");       //设置打开时的文字
mSwitchCompat.setShowText(true);     //设置是否显示文字
mSwitchCompat.setSwitchPadding(20);  //设置文字与开关的间隙
mSwitchCompat.setChecked(true);      //设置是否是选中(打开)状态
mSwitchCompat.setOnCheckedChangeListener();  //设置打开关闭监听

如果设置颜色，请在activity的style中设置"colorAccent"的颜色。

SnackBar

SnackBar类似于Toast，都是对用户的提醒和解释说明等等。
这里写图片描述
最普通的SnackBar，只有文字说明，复杂的SnackBar可以带按钮及事件。

Snackbar.make(v, "谢谢浏览我的博客", Snackbar.LENGTH_SHORT).show();  //和Toast很像

如果有FloatingActionButton之类的东西的话，SnackBar是不允许遮挡的，控件应随之上移和下移。
这里写图片描述
复杂一点的SnackBar，可以增加点击:

Snackbar.make(v, "谢谢浏览我的博客", Snackbar.LENGTH_SHORT).setAction("action", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(SwitchCompatActivity.this, "snack bar ", Toast.LENGTH_SHORT).show();
                    }
                }).show();

SnackBar的样式可以自定义，参考Toast的方法，规则如下：
这里写图片描述
设计要求：

SnackBar至多包含一个操作项，不能包含图标，不能出现一个以上的SnackBar。

FloatingActionButton

一般悬浮于手机屏幕右下角的一个按钮，当然也有放在屏幕中上位置的。
这里写图片描述

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />