Material Design Control 初涉 1

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的风格。
源码