Material Design（一）

Material Design（一）

本来想一次性将对应的UI控件也在这一个篇幅中整理完，整理到一部分的时候发现字数已经很多了。所以将整理的一部分已经 剪切出来了。在之后会整理对应的UI篇。

需要引用的包：
compile ‘com.android.support:design:23.2.0’

1. ## Material Design 主题样式

参考：https://www.jianshu.com/p/4a7cc9898b06

今天这篇文章应该算是Material
Design系列的补充篇，因为这篇文章本来应该放到前面讲的，因为讲的是主题嘛，对于一些状态和颜色的介绍，因为我们一新建一个项目时，系统自带了三个属性的颜色，现在就重点介绍这三个颜色属性的意义和作用。讲明白这个，留着以后讲别的用。

最常用的三个颜色属性

• colorPrimary
• colorPrimaryDark
• colorAccent
  这三个分别代表什么意思呢？

colorPrimaryDark 是状态栏底色
colorPrimary 如果你不手动自己去修改toolbar背景色的话，它就是默认的toolbar背景色
colorAccent 各控制元件(比如：checkbox、switch 或是 radio) 被勾选 (checked) 或是选定 (selected) 的颜色

全局设置的内容包括按钮字体颜色、输入框光标颜色、以及状态栏颜色等。
文字描述可能还不是很直观，来看张图，如下：

其他属性相关介绍

navigationBarColor 导航栏的背景色，但只能用在 API Level 21 以上的版本，也就是5.0以上才可以

windowBackground App 的背景色

colorControlNormal 这个也只能在API21以上才能用各控制元件的预设颜色和colorAccent正好对应

在Style上设置

以上的颜色属性均是在 style 的属性中设置。如下：

关于这些颜色的属性介绍就到这里了，相信大家应该都明白了。要是光讲这些文章有点短，不太充实，所以今天我们再补充两个非常简单的 Material Design 风格的控件，可能大家都知道了，知道的就不用看了哈，略过就好。

TextInputLayout

TextInputLayout继承LinearLayout，因此我们需要将EditView包含在TextInputLayout之内才可以使用，言外之意：TextInputLayout不能单独使用。里面可以包含一个且只能有一个EditText,与传统的EditText不同，在输入时EditText的hint提示文字会滑到上方，在用户输入的同时提示用户当前要输入的是什么，同时还可以设置输入错误的提示信息。

• setHint()：设置提示语。
• getEditText()：得到TextInputLayout中的EditView控件。
• setErrorEnabled():设置是否可以显示错误信息。
• setError()：设置当用户输入错误时弹出的错误信息。

特别注意：TextInputLayout不能单独使用，必须包裹EditView组件，
且只能一个,设置错误提示信息时一定要先setErrorEnabled(true);再设置setError()。

TextInputEditText

TextInputEditText和TextInputLayout类似，Design包还有一个组件TextInputEditText,它继承了AppCompatEditText,可以在右侧显示出错误信息的小弹窗提示。用法和TextInputEditText类似，而且不用设置错误信息消除，重新在TextInputEditText输出会自动取消，非常的灵活和人性化。

用法很简单：

 <android.support.design.widget.TextInputEditText
        android:id="@+id/pwd_et"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:hint="请输入密码"
        android:inputType="textEmailAddress"
        android:textColor="@color/text_color"/>

Palette 取色板使用：

Palette 是一个类似调色板的工具类，根据传入的 Bitmap，提取出主体颜色，使得图片和颜色更加搭配，界面更协调。 Palette
可以从一张图片中提取颜色，我们可以把提取的颜色融入到 App UI 中，可以使 UI 风格更加美观融洽。比如，我们可以从图片中提取颜色设置给
ActionBar 做背景颜色，这样 ActionBar 的颜色就会随着显示图片的变化而变化。

3，预设可选类型
Palette可以提取的颜色如下：
Vibrant （有活力的）
Vibrant dark（有活力的 暗色）
Vibrant light（有活力的 亮色）
Muted （柔和的）
Muted dark（柔和的 暗色）
Muted light（柔和的 亮色）

swatch对象对应的颜色方法
getPopulation(): 像素的数量
getRgb(): RGB颜色
getHsl(): HSL颜色
getBodyTextColor(): 用于内容文本的颜色

这个比较简单，直接上 demo 看使用和效果。

public class MainActivity extends AppCompatActivity {
    TextView t1;
    TextView t2;
    TextView t3;
    TextView t4;
    TextView t5;
    TextView t6;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        t1 = (TextView) findViewById(R.id.t1);
        t2 = (TextView) findViewById(R.id.t2);
        t3 = (TextView) findViewById(R.id.t3);
        t4 = (TextView) findViewById(R.id.t4);
        t5 = (TextView) findViewById(R.id.t5);
        t6 = (TextView) findViewById(R.id.t6);

        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.f);
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            //发生主线程    Palette调色板   总共六种颜色
            @Override
            public void onGenerated(Palette palette) {
                //柔和而暗的颜色
                int darkMutedColor = palette.getDarkMutedColor(Color.BLUE);
                //鲜艳和暗的颜色
                int darkVibrantColor = palette.getDarkVibrantColor(Color.BLUE);
                //亮和鲜艳的颜色
                int lightVibrantColor = palette.getLightVibrantColor(Color.BLUE);
                //亮和柔和的颜色
                int lightMutedColor = palette.getLightMutedColor(Color.BLUE);
                //柔和颜色
                int mutedColor = palette.getMutedColor(Color.BLUE);
                //鲜艳颜色
                int vibrantColor = palette.getVibrantColor(Color.BLUE);

                t1.setBackgroundColor(darkMutedColor);
                t2.setBackgroundColor(darkVibrantColor);
                t3.setBackgroundColor(lightVibrantColor);
                t4.setBackgroundColor(lightMutedColor);
                t5.setBackgroundColor(mutedColor);
                t6.setBackgroundColor(vibrantColor);
            }
        });
    }
}

获取 Palette 的六种颜色，分别给不同 TextView 设置背景颜色。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
        <TextView
            android:id="@+id/t1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="darkMutedColor"
            android:minHeight="40dp"
            android:gravity="center"
            android:layout_marginTop="10dp"
            android:layout_alignParentTop="true"
            />
        <TextView
            android:id="@+id/t2"
            android:layout_below="@+id/t1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="darkVibrantColor"
            android:minHeight="40dp"
            android:gravity="center"
            android:layout_marginTop="10dp"
            />
        <TextView
            android:id="@+id/t3"
            android:layout_below="@+id/t2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="lightVibrantColor"
            android:minHeight="40dp"
            android:gravity="center"
            android:layout_marginTop="10dp"
            />
        <TextView
            android:layout_below="@+id/t3"
            android:id="@+id/t4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="lightMutedColor"
            android:minHeight="40dp"
            android:gravity="center"
            android:layout_marginTop="10dp"
            />
        <TextView
            android:layout_below="@+id/t4"
            android:id="@+id/t5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="mutedColor"
            android:minHeight="40dp"
            android:gravity="center"
            android:layout_marginTop="10dp"
            />
        <TextView
            android:layout_below="@+id/t5"
            android:id="@+id/t6"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="vibrantColor"
            android:minHeight="40dp"
            android:gravity="center"
            android:layout_marginTop="10dp"
            />
    </RelativeLayout>

</ScrollView>

效果：

原图 f（即提取颜色的来源）：

三、详解

1.构造方法
我们需要通过一个 Bitmap 对象来生成一个对应的 Palette 对象。 Palette 提供了四个静态方法用来生成对象。

 Palette generate(Bitmap bitmap)
  Palette generate(Bitmap bitmap, int numColors)
  generateAsync(Bitmap bitmap, PaletteAsyncListener listener)
  generateAsync(Bitmap bitmap, int numColors, final PaletteAsyncListener listener)

不难看出，生成方法分为 generate (同步)和 generateAsync (异步)两种，如果图片过大使用 generate 方法，可能会阻塞主线程，我们更倾向于使用 generateAsync 的方法，其实内部就是创建了一个AsyncTask。generateAsync 方法需要一个 PaletteAsyncListener 对象用于监听生成完毕的回调。除了必须的 Bitmap 参数外，还可以传入一个 numColors 参数指定颜色数，默认是 16。

2.获取颜色

得到Palette对象后，就可以拿到提取到的颜色值

 Palette.getVibrantSwatch()
  Palette.getDarkVibrantSwatch()
  Palette.getLightVibrantSwatch()
  Palette.getMutedSwatch()
  Palette.getDarkMutedSwatch()
  Palette.getLightMutedSwatch()

3.使用颜色
上面get方法中返回的是一个 Swatch 样本对象，这个样本对象是 Palette 的一个内部类，它提供了一些获取最终颜色的方法。

getPopulation(): 样本中的像素数量
  getRgb(): 颜色的RBG值
  getHsl(): 颜色的HSL值
  getBodyTextColor(): 主体文字的颜色值
  getTitleTextColor(): 标题文字的颜色值

通过 getRgb() 可以得到最终的颜色值并应用到 UI 中。getBodyTextColor() 和
getTitleTextColor() 可以得到此颜色下文字适合的颜色，这样很方便我们设置文字的颜色，使文字看起来更加舒服。

其中后面更新的Material Design2
以及Material Design3
https://www.jianshu.com/p/64ee4fc11af4

参考：
https://blog.csdn.net/q714093365/article/details/83511998
https://blog.csdn.net/Fly_li_sir/article/details/79704021
http://www.cnblogs.com/syjhsgcc/p/4771931.html