Android5.0的Palette（调色板）、视图阴影、着色和裁剪介绍

Android5.0的Palette（调色板）、视图阴影、着色和裁剪介绍

           随着Android5.0的发布，google带来了Material Design，俗称：材料设计。并带来了一些新的东西，这里就一一介绍这些新的设计元素。

1、Palette（调色板）

      

        在5.0以后的android版本中可以使用调色板来提取颜色，让app的主题颜色动态的适应当前页面的色调，使得你的app整体看起来主题基调和谐统一；下面是官网的介绍和使用说明，先截个图，后面简单翻译下：

         

      翻译：

palette这是一个可以从image中提取颜色的类，它可以从image中提取及几种不同的色调，如下：

•      Vibrant              : 充满活力的，
•      Vibrant  dark    ：充满活力的黑
•      Vibrant  light     ：充满活力的亮
•      Muted               ：柔和的
•      Muted   dark       : 柔和的黑
•      Muted   light       :  柔和的亮

      使用Palette可以在Android studio中的gradle添加以下依赖：

compile 'com.android.support:palette-v7:23.4.0'

    从示例代码中，我们可以看到：通过传递一个bitmap对象给Palette，并调用他的Palette.generate()静态方法或者在静态方法中添加异步接口的方法来创建一个Palette，接下来就可以使用Palette的getter方法来检索相应的色调，就是是昂面那6中色调；下面显示一段代码，将通过背景图片的柔和色调来改变ActionBar和状态来的色调，使之能够统一，然而并不是所有6种颜色方案都可用，每种颜色方案都返回为Palette.Swatch，如果图片示例包含的颜色不足以产生兼容的方案，则对应的颜色方案可能为null。为了展示这个功能，我们将创建一个图片图块的背景和标题将通过Palette主题话。效果如下：

是不是给人很不一样的感觉了，接下来就介绍代码，如下:

点击打开链接下载demo，免积分

item_list.xml 如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/root"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:padding="16dp">    <ImageView        android:id="@+id/image"        android:layout_width="match_parent"        android:layout_height="110dp"        android:scaleType="centerCrop" />    <TextView        android:id="@+id/text"        android:layout_width="match_parent"        android:layout_height="70dp"        android:gravity="center"        android:textAppearance="?android:textAppearanceLarge" /></LinearLayout>

适配器中的调色板颜色

ColorfulAdapter.class

package com.world.hello.colorfullistactivity;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Color;import android.os.AsyncTask;import android.support.v7.graphics.Palette;import android.util.SparseArray;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ArrayAdapter;import android.widget.ImageView;import android.widget.TextView;/** * Created by chengguo on 2016/6/12. */public class ColorfulAdapter extends ArrayAdapter<String> {    private static final int[] IMAGES = {            R.drawable.bricks, R.drawable.flower,            R.drawable.grass, R.drawable.stones,            R.drawable.wood, R.drawable.dog    };    private static final String[] NAMES = {            "Bricks", "Flower",            "Grass", "Stones",            "Wood", "Dog"    };    private SparseArray<Bitmap> mImages;    private SparseArray<Palette.Swatch> mBackgroundClolors;    public ColorfulAdapter(Context context) {        super(context, R.layout.item_list, NAMES);        mImages = new SparseArray<Bitmap>(IMAGES.length);        mBackgroundClolors = new SparseArray<Palette.Swatch>(IMAGES.length);    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        if (convertView == null) {            convertView = LayoutInflater.from(getContext()).inflate(R.layout.item_list, parent, false);        }        View root = convertView.findViewById(R.id.root);        ImageView imageView = (ImageView) convertView.findViewById(R.id.image);        TextView textView = (TextView) convertView.findViewById(R.id.text);        int imageId = IMAGES[position];        if (mImages.get(imageId) == null) {            new ImageTask().execute(imageId);            textView.setTextColor(Color.BLACK);        } else {            imageView.setImageBitmap(mImages.get(imageId));            Palette.Swatch colors = mBackgroundClolors.get(imageId);            if (colors != null) {                root.setBackgroundColor(colors.getRgb());                textView.setTextColor(colors.getTitleTextColor());            }        }        textView.setText(NAMES[position]);        return convertView;    }    private class ImageResult {        public int imageId;        public Bitmap image;        public Palette.Swatch colors;        public ImageResult(int imageId, Bitmap image, Palette.Swatch colors) {            this.imageId = imageId;            this.image = image;            this.colors = colors;        }    }    /**     * 因为从磁盘加载图片和使用Palette分析这些图片的过程会花费一些时间，所以我们要在后台执行此工作，     * 以免阻塞主线程太长时间，因此放在AsyncTask中执行     */    private class ImageTask extends AsyncTask<Integer, Void, ImageResult> {        @Override        protected ImageResult doInBackground(Integer... params) {            int imageId = params[0];            //确保图片缩率图不会太大            BitmapFactory.Options options = new BitmapFactory.Options();            options.inSampleSize = 4;            Bitmap image = BitmapFactory.decodeResource(getContext().getResources(), imageId, options);            Palette colors = Palette.generate(image);            Palette.Swatch selected = colors.getVibrantSwatch();            if (selected == null) {                selected = colors.getMutedSwatch();            }                        return new ImageResult(imageId, image, selected);        }        @Override        protected void onPostExecute(ImageResult imageResult) {            updateImageItem(imageResult);            notifyDataSetChanged();        }    }    /**     * 更新一项的颜色     *     * @param imageResult     */    private void updateImageItem(ImageResult imageResult) {        mImages.put(imageResult.imageId, imageResult.image);        mBackgroundClolors.put(imageResult.imageId, imageResult.colors);    }}

activity.class

package com.world.hello.colorfullistactivity;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.widget.GridView;public class MainActivity extends AppCompatActivity {    private GridView mGridView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        mGridView = new GridView(this);        mGridView.setNumColumns(2);        mGridView.setAdapter(new ColorfulAdapter(this));        setContentView(mGridView);    }}

2、视图和阴影

      

        在Material Design中很重要的风格就是拟物扁平化，使用阴影和光线，在配合完美的动画，展示出现实生活中的效果，看起来就感觉非常的美丽

 以前的UI设计都只有X、Y轴这个两个方向，现在多出来一个垂直于手机屏幕的Z轴，那么设置Z轴的高度，然后配合光线，然后就在UI的下方看到阴影，这样就实现了拟物效果。

        View的Z轴由两部分组成，elevation和translationZ，这两个属性都是5.0以后才引入的。elevation是静态的成员，translationZ可以在代码中使用来实现动画效果，他们的关系是:

      Z = elevation + translationZ

elevation是在XML布局文件中使用，如果android版本小于5.0设置的elevation是不生效的，只有大于5.0的android系统设置elevation才行；下面是xm示例

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.example.chengguo.paletteexample.MainActivity"    android:background="@android:color/white">    <TextView        android:layout_width="100dp"        android:layout_height="100dp"         android:layout_margin="10dp"        android:background="@android:color/holo_blue_dark" />    <TextView        android:layout_width="100dp"        android:layout_height="100dp"        android:elevation="10dp"        android:layout_margin="10dp"        android:background="@android:color/holo_blue_dark" />    <TextView        android:layout_width="100dp"        android:layout_height="100dp"        android:layout_margin="10dp"        android:elevation="20dp"        android:background="@android:color/holo_blue_dark" /></LinearLayout>

效果图如下：

然而，在java代码中要使用setTranslationZ()来动态改变视图的高度

        通常是使用属性动画来为视图高改变的时候增加一个动画效果，例如：

<strong>    if (flag){            view.animate.translationZ(100);            flag = false;        }else {            view.animate.translationZ(0);            flag = true;        }</strong>

3、着色和裁剪

      在andorid5.0中还增加了两个非常实用的功能：Tinting（着色）和Clipping（裁剪）

        3.1  使用Tinting非常简单，只需要在XML文件中使用tint和tintMode就行了，有几种配合效果，t它的实质是通过修改图像的Alpha遮罩层来修改图像的颜色，从而达到重新着色的目的。对图像处理使用起来非常方便 如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@android:color/white"    android:gravity="center|center_horizontal"    android:orientation="vertical"    tools:context="com.example.chengguo.paletteexample.MainActivity">    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:elevation="10dp"        android:src="@mipmap/ic_launcher" />    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:elevation="10dp"        android:src="@mipmap/ic_launcher"        android:tint="@color/colorAccent" />    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:elevation="10dp"        android:src="@mipmap/ic_launcher"        android:tint="@color/colorAccent"        android:tintMode="add" />    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:elevation="10dp"        android:src="@mipmap/ic_launcher"        android:tint="@color/colorAccent"        android:tintMode="multiply" />    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:elevation="10dp"        android:src="@mipmap/ic_launcher"        android:tint="@color/colorAccent"        android:tintMode="screen" />    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:elevation="10dp"        android:src="@mipmap/ic_launcher"        android:tint="@color/colorAccent"        android:tintMode="src_atop" />    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:elevation="10dp"        android:src="@mipmap/ic_launcher"        android:tint="@color/colorAccent"        android:tintMode="src_in" />    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:elevation="10dp"        android:src="@mipmap/ic_launcher"        android:tint="@color/colorAccent"        android:tintMode="src_over" /></LinearLayout>

     3.2  Clipping裁剪，它可以改变一个视图的外观，首先，要使用ViewOutlineProvider来修改outline，然后再通过setOutlineProvider将outline作用给视图；下面使用IamgeView通过Clipping裁剪成圆角正方形和一个圆形；示例如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@android:color/white"    android:gravity="center|center_horizontal"    android:orientation="vertical"    tools:context="com.example.chengguo.paletteexample.MainActivity">    <ImageView        android:id="@+id/image_rect"        android:layout_width="100dp"        android:layout_height="100dp"        android:elevation="2dp" />    <ImageView        android:id="@+id/image_circle"        android:layout_width="100dp"        android:layout_height="100dp"        android:layout_marginTop="20dp"        android:elevation="2dp" /></LinearLayout>

package com.example.chengguo.paletteexample;import android.graphics.Outline;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.view.ViewOutlineProvider;import android.widget.ImageView;public class MainActivity extends AppCompatActivity {    private ImageView mRectView;    private ImageView mCircleView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mRectView = (ImageView) findViewById(R.id.image_rect);        mCircleView = (ImageView) findViewById(R.id.image_circle);        //获取outline        ViewOutlineProvider outLine1 = new ViewOutlineProvider() {            @Override            public void getOutline(View view, Outline outline) {                //修改outline为特定形状                outline.setRoundRect(0,0,view.getWidth(),view.getHeight(),10);            }        };        //获取outline        ViewOutlineProvider outline2 = new ViewOutlineProvider() {            @Override            public void getOutline(View view, Outline outline) {                outline.setOval(0,0,view.getWidth(),view.getHeight());            }        };        //重新为两个imageView设置外形        mRectView.setOutlineProvider(outLine1);        mCircleView.setOutlineProvider(outline2);    }}