Skip to content

Instantly share code, notes, and snippets.

@johnbear724
Last active August 29, 2015 14:08
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johnbear724/c189782efd1eaa63ddea to your computer and use it in GitHub Desktop.
Save johnbear724/c189782efd1eaa63ddea to your computer and use it in GitHub Desktop.
使用Drawables

该文档翻译自 Android 5.0 文档中对 Material Design 的介绍,原文地址:http://developer.android.com/training/material/drawables.html

Drawables 的以下功能帮助你在你的应用中实现 Material Design:

  • 将图像染色
  • 提取图像中的显著颜色
  • 矢量图像(Vector Drawables)

该课程向你展示如何在你的应用中使用这些特性。

##将图像资源染色 在 Android5.0 (API level 21)或以上版本,你可以定义一个 Alpha 遮罩来对位图和 9-patches 染色。你可以使用颜色资源(color resources)或 用于解决颜色资源的主题属性(theme attributes)(例如,?android:attr/colorPrimary)来对它们染色。通常来说,会自动匹配你的主题。

你可以使用 setTint() 方法将染色应用到 BitmapDrawable 或 NinePatchDrawable 对象上。你还可以使用 android:tint 和 android:tintMode 属性在你的布局中设置染色的颜色和模式

##从一张图像中提取显著色彩

Android 支持库21版本及以上包含了 Palette 类,它可以让你从一张图像中提取出其中比较突出的色彩。该类会提取以下显著色彩:

  • 鲜艳的色彩 (Vibrant)
  • 鲜艳的深色 (Vibrant dark)
  • 鲜艳的浅色 (Vibrant light)
  • 柔和的色彩 (Muted)
  • 柔和的深色 (Muted dark)
  • 柔和的浅色 (Muted light)

要提取这些颜色,在你加载图片的后台线程中传递一个 Bitmap 对象到 Palette.generate() 静态方法中。如果你不能使用该线程,你可以调用 Palette.generateAsync() 方法并提供一个监听器作为替代。

你可以使用 Palette 类中的 getter 方法获得从图像中提取出的突出色彩,如使用 Palette.getVibrantColor 方法

要在你的项目中使用 Palette 类,在你的应用模块中使用下面的 Gradle 依赖项。

dependencies {
    ...
    compile 'com.android.support:palette-v7:+'
}

更多信息,请查看 Palette 类的 API 文档。

##创建矢量图形(Vector Drawables)

在 Android 5.0(API level 21)及以上版本,你可以定义矢量图形,其缩放后不会损失清晰度。你只需为一个矢量图形提供一个资源文件,而不是像位图那样为每种屏幕密度都提供一份资源文件。要创建一个矢量图像,你需要在一个 XML 元素 中定义其形状的详细参数。

下面的示例定义了一个心形的矢量图形:

<!-- res/drawable/heart.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    <!--  Drawable的实际尺寸  -->
    android:height="256dp"
    android:width="256dp"
    <!-- 虚拟画布(canvas)的尺寸 -->
    android:viewportWidth="32"
    android:viewportHeight="32">

  <!-- 绘制路径 -->
  <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 中用 VectorDrawable 对象代表。更多有关 pathData 语法的信息,请查看 SVG Path reference 。更多有关对矢量图形的属性执行动画的信息,查看 Animating Vector Drawables。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment