Android应用的Material设计中图片的相关处理指南

可伸缩的矢量图片不会丢失清晰度,并且单一颜色的app-icon是完美的
可定义一个bitmap作为透明度(alpha)和运行时的颜色
可对一个bitmap image取色,会取出它比较显眼的颜色
官网地址:https://developer.android.com/training/material/drawables.html

以下图片的功能能帮助你在app中实现Material设计:

  • 图片着色
  • 颜色提取
  • 矢量图片

Tint Drawable Resources  为图片资源染色

在Android 5.0(API级别21)及以上,你可以将图片和9-patch定义为掩饰透明度。你能使用颜色资源(如,?android:attr/colorPrimary)或主题属性来给它们上色。通常,你只需创建这些资源一次,且自动匹配你的主题为它们上色。
可以为BitmapDrawable和NinePatchDrawable 的对象使用setTint(int tint)进行染色。也可以在xml中定义android:tint和android:tintMode属性。
·关于setTint(int tint)的参数,可以是一个@color/下的属性,也可以是一个xml的selector,selector中的item是使用了数字的,如:

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_focused="true" android:color="@color/testcolor1"/>
  <item android:state_pressed="true" android:state_enabled="false" android:color="@color/testcolor2" />
  <item android:state_enabled="false" android:color="@color/testcolor3" />
  <item android:color="@color/testcolor5"/>
 </selector>

·关于xml中定义属性,如:

<?xmlversion="1.0"encoding="utf-8"?>
<nine-patchxmlns:android="http://schemas.android.com/apk/res/android"
  android:tint="@color/abc_primary_text_material_light"
  android:tintMode="src_over"
  ... >
</nine-patch>

Extract Prominent Colors from an Image  从图片抽取明显的颜色
在api21上的support-v7库中有一个android-support-v7-palette.jar,它能够让你从图片中抽取一些显眼的颜色:

Palette p = Palette.generate(Bitmap bitmap);
  • 鲜艳的                p.getVibrantColor(int defaultColor);
  • 鲜艳的黑暗         p.getDarkVibrantColor(int defaultColor);
  • 鲜艳的明亮         p.getLightVibrantColor(int defaultColor);
  • 柔和的                p.getMutedColor(int defaultColor);
  • 柔和的黑暗         p.getDarkMutedColor(int defaultColor);
  • 柔和的明亮         p.getLightMutedColor(int defaultColor);

Palette.generate(),用于在后台线程中执行,如果在前台线程中创建Palette对象,那么可以使用Palette.generateAsync()。

Create Vector Drawables  创建矢量图片
在Android 5.0(API级别21)及以上 可以创建矢量图片,如下面的例子可以绘制一个心形的矢量图:

<!-- res/drawable/heart.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
  <!-- intrinsic size of the drawable -->
  android:height="256dp"
  android:width="256dp"
  <!-- size of the virtual canvas -->
  android:viewportWidth="32"
  android:viewportHeight="32">

 <!-- draw a path -->
 <path android:fillColor="#8fff"
   android:pathData="M20.5,9.5
            c-1.955,0,-3.83,1.268,-4.5,3
            c-0.67,-1.732,-2.547,-3,-4.5,-3
            C8.957,9.5,7,11.432,7,14
            c0,3.53,3.793,6.257,9,11.5
            c5.207,-5.242,9,-7.97,9,-11.5
            C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>

矢量图片在Android中使用VectorDrawble对象与之对应。path的更多信息请见:http://www.w3.org/TR/SVG11/paths.html#PathData。

设计标准样例

选用图片

描述具体事物,优先使用照片。然后可以考虑使用插画。
图片上的文字

图片上的文字,需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间,浅色的遮罩透明度在40%-60%之间。

对于带有文字的大幅图片,遮罩文字区域,不要遮住整张图片。

可以使用半透明的主色盖住图片。
提取颜色

Android L可以从图片中提取主色,运用在其他UI元素上。
图片加载过程

图片的加载过程非常讲究,透明度、曝光度、饱和度3个指标依次变化,效果相当细腻。

(0)

相关推荐

  • Android编程之图片颜色处理方法

    本文实例讲述了Android编程之图片颜色处理方法.分享给大家供大家参考,具体如下: 你想做到跟美图秀秀一样可以处理自己的照片,美化自己的照片吗?其实你也可以自己做一个这样的软件,废话不多说了,直接上图,上代码了! 效果图如下: 没处理前: 处理之后: MainActivity.java的代码如下: package net.loonggg.test; import android.app.Activity; import android.graphics.Bitmap; import andro

  • Android图片处理:识别图像方向并显示实例教程

    在Android中使用ImageView显示图片的时候发现图片显示不正,方向偏了或者倒过来了. 解决这个问题很自然想到的分两步走: 1.自动识别图像方向,计算旋转角度: 2.对图像进行旋转并显示. 一.识别图像方向 首先在这里提一个概念EXIF(Exchangeable Image File Format,可交换图像文件),具体解释参见Wiki. 简而言之,Exif是一个标准,用于电子照相机(也包括手机.扫描器等)上,用来规范图片.声音.视屏以及它们的一些辅助标记格式. Exif支持的格式如下:

  • Android编程中图片特效处理方法小结

    本文实例总结了Android编程中图片特效处理方法.分享给大家供大家参考,具体如下: 这里介绍的Android图片处理方法包括: 转换 -  drawable To  bitmap 缩放 -  Zoom 圆角 -  Round Corner 倒影 -  Reflected bitmapPrcess  code: package com.learn.games; import android.graphics.Bitmap; import android.graphics.Canvas; impo

  • Android图片处理实例分析

    本文实例讲述了Android图片处理的方法.分享给大家供大家参考,具体如下: package cn.szbw.util; import Android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Matrix; import android.graphic

  • Android 异步获取网络图片并处理导致内存溢出问题解决方法

    测试环境为Adnroid 2.1以上. 1.AndroidManifest.xml 权限配置: 添加互联网访问权限: 复制代码 代码如下: <uses-permission android:name="android.permission.INTERNET" /> 2.异步图片类 ImageDownloadTask 复制代码 代码如下: import java.io.ByteArrayOutputStream; import java.io.IOException; imp

  • Android 图片特效处理的方法实例

    1. 图片放缩 复制代码 代码如下: // zoom 放缩  public static Bitmap zoomBitmap(Bitmap bitmap, int w, int h) {      int width = bitmap.getWidth();      int height = bitmap.getHeight();      Matrix matrix = new Matrix(); float scaleWidth = w / (float) width;      floa

  • Android中3种图片压缩处理方法

    Android中图片的存在形式: 1:文件形式:二进制形式存在与硬盘中. 2:流的形式:二进制形式存在与内存中. 3:Bitmap的形式 三种形式的区别: 文件形式和流的形式:对图片体积大小并没有影响.也就是说,如果你手机SD卡上的图片通过流的形式读到内存中,在内存中的大小也是原图的大小. 注意:不是Bitmap的形式. Bitmap的形式:图片占用的内存会瞬间变大. 以下是代码的形式: /** * 图片压缩的方法总结 */ /* * 图片压缩的方法01:质量压缩方法 */ private Bi

  • Android模糊处理实现图片毛玻璃效果

    本文实例讲解了Android 虚化图片.模糊图片.图片毛玻璃效果的实现方法,具体内容如下 效果如图: 在Android可以用RenderScript方便的实现这个方法: private void blur(Bitmap bkg, View view, float radius) { Bitmap overlay = Bitmap.createBitmap(view.getMeasuredWidth(), view.getMeasuredHeight(), Bitmap.Config.ARGB_8

  • android图片圆角、图片去色处理示例

    Android中图片处理 用来对Android中的项目图片进行处理 复制代码 代码如下: package com.zhanggeng.contact.tools; import java.io.ByteArrayOutputStream;import java.io.File;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException; import android

  • Android图片处理实例介绍(图)

    1.图片处理 1.圆角图片 复制代码 代码如下: /**     * 转换成圆角     *      * @param bmp     * @param roundPx     * @return     */    public static Bitmap convertToRoundedCorner(Bitmap bmp, float roundPx) { Bitmap newBmp = Bitmap.createBitmap(bmp.getWidth(), bmp.getHeight()

随机推荐