Material Design Control 初涉 1

前言

小弟开发Android从没有系统的归纳一下个人的学习记录，在加上比较懒或者工作原因，也没认真思考过，每天都是修改UI，修改业务，我相信很多前辈或者比小弟入门还晚的伙伴们也遇到过此情况，最近看别人的APP各种特性用的很欢，因此小弟在这里算是现学现卖，写的不好的请大家尽情批评，吐槽。

初涉1将介绍以下控件

android.support.design.widget.TextInputLayout
android.support.design.widget.FloatingActionButton
android.support.design.widget.Snackbar

android.support.design.widget.TextInputLayout

一个拓展的EditText控件，具有错误提示，全新hint提示控件，相比与原始的EditText更具友好，但仅仅是一个EditText的包裹器。
- 是继承LinearLayout布局，默认布局VERTICAL（垂直方向），可以改变方向
- 其内部控件中必须有且仅有一个EditText控件，并且此控件不论被放在什么位置，都会被放到第一个，可以不需要设置android:id的属性

@Override    public void addView(View child, int index, ViewGroup.LayoutParams params) {        if (child instanceof EditText) {            setEditText((EditText) child);            super.addView(child, 0, updateEditTextMargin(params));        } else {            // Carry on adding the View...            super.addView(child, index, params);        }    }

• 常用方法
  
  1. setError(CharSequence) 设置错误提示语；
  2. setErrorEnabled(boolean) 设置错误提示是否可用，提示信息在控件的左下角与Counter是同一行，当设置false时不可见，再次设置true时可以见，但需要重新设置setError；
  3. setCounterEnabled(boolean) 简单的说就是是否计算输入的文本个数 【Whether the character counter functionality is enabled or not in this layout.】，这里需要注意的是他显示在右下角，如果布局中有多个控件，会显示在所有控件的下一行的右下角，这里均以VERTICAL说明；
  4. getEditText() 取得布局中唯一的EditText控件；

android.support.design.widget.FloatingActionButton

• 类结构

--View    --ImageView      --ImageButton        --VisibilityAwareImageButton          --FloatingActionButton

从结构上看FloatingActionButton (后面简称FAB) 基类是ImageView （这里忽略View的继承，大家都知道所有的控件都是继承与View），因此ImageView的属性都是可以使用的；
打开源码，可以看到class的头部有一个

@CoordinatorLayout.DefaultBehavior(FloatingActionButton.Behavior.class)

是的FAB可以使用在CoordinatorLayout布局内，相信大家对这个都比较熟悉，关于CoordinatorLayout后面在介绍，当然FAB也可以当作普通控件使用；
FAB默认是使用主题中colorAccent的颜色值显示，如果想改变其颜色可以使用背景着色器 setBackgroundTintList(ColorStateList) 的方式改变：

int[][] states = new int[][]{                {android.R.attr.state_enabled},                {android.R.attr.state_pressed}        };        int[] colors = new int[]{                android.R.color.darker_gray,                android.R.color.black        };        ColorStateList mColorStateList = new ColorStateList(states, colors);        FAB.setBackgroundTintList(mColorStateList);

• FAB 拓展属性

<declare-styleable name="FloatingActionButton"><attr name="backgroundTint"/><attr name="backgroundTintMode"/><attr format="color" name="rippleColor"/><attr name="fabSize">            <enum name="auto" value="-1"/>            <enum name="normal" value="0"/>            <enum name="mini" value="1"/></attr><attr name="elevation"/><attr format="dimension" name="pressedTranslationZ"/><attr format="dimension" name="borderWidth"/><attr format="boolean" name="useCompatPadding"/></declare-styleable>

android.support.design.widget.Snackbar

Android中的不影响用户操作的提示语Toast，大家都不陌生吧，但是Toast不可以进行交互操作，在design中出现了新的提示操作，Snackbar。

Snackbar.make(@NonNull View view, @NonNull CharSequence text, @Duration int duration).show();

params

1. View 这里的View我个人理解是一个显示Snackbar的容器布局，这个View从源码看还被要求使用android.support.design.widget.CoordinatorLayout布局，该布局位于什么位置Snackbar就显示在什么位置；
2. text 显示的文本内容；
3. duration 这个与Toast一致，显示的时间长短，相关设置以及结果与也同样与Toast无二；

改变Sanckbar背景色

Sanckbar弹出后的显示的颜色可能有视觉设计师要求修改，但是没有Sanckbar的背景色控制，这里通过源码可以看到一个重要的变量mView，获取的方法为Snackbar.getView()，这里我们可以看到得到的View是一个SnackbarLayout，查看其定义发现是一个Android的布局，这个布局是横向的LinearLayout，因此我们修改Sanckbar的背景可以用：

Snackbar.SnackbarLayout mView = (Snackbar.SnackbarLayout)snackbar.getView();mView.setBackgroundColor(Color.BLUE);

改变Sanckbar提示文字颜色，Action颜色

在改变Sanckbar背景色我们说到可以取到SnackbarLayout，这里我们看一下Sanckbar这个类中对这个布局的定义 * SnackbarLayout extends LinearLayout * 看的出，它是一个LinearLayout布局，在看看布局文件R.layout.design_layout_snackbar_include

<merge xmlns:android="http://schemas.android.com/apk/res/android">    <TextView            android:id="@+id/snackbar_text"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:paddingTop="@dimen/design_snackbar_padding_vertical"            android:paddingBottom="@dimen/design_snackbar_padding_vertical"            android:paddingLeft="@dimen/design_snackbar_padding_horizontal"            android:paddingRight="@dimen/design_snackbar_padding_horizontal"            android:textAppearance="@style/TextAppearance.Design.Snackbar.Message"            android:maxLines="@integer/design_snackbar_text_max_lines"            android:layout_gravity="center_vertical|left|start"            android:ellipsize="end"            android:textAlignment="viewStart"/>    <Button            android:id="@+id/snackbar_action"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="@dimen/design_snackbar_extra_spacing_horizontal"            android:layout_marginStart="@dimen/design_snackbar_extra_spacing_horizontal"            android:layout_gravity="center_vertical|right|end"            android:paddingTop="@dimen/design_snackbar_padding_vertical"            android:paddingBottom="@dimen/design_snackbar_padding_vertical"            android:paddingLeft="@dimen/design_snackbar_padding_horizontal"            android:paddingRight="@dimen/design_snackbar_padding_horizontal"            android:visibility="gone"            android:textColor="?attr/colorAccent"            style="?attr/borderlessButtonStyle"/></merge>

基础部分基本看完了，我们应该知道有了View，获取View中的控件不是一件困难的事情，这里大家就可以根据需要修改提示文字，按钮了。

TextView mTextView = (TextView) mView.findViewById(R.id.snackbar_text);mTextView.setTextColor(Color.RED);

初步Design的设计，感觉Android的UI越来越舒服了，用起来也越happy，真希望国内的APP尽快能普及这种设计，不要总是用iOS的那种风格，说真的很多时候感觉根本不适合Android的风格。
源码