• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.title=使用图片
2
3@jd:body
4
5<div id="tb-wrapper">
6<div id="tb">
7<h2>本课程将向您展示如何</h2>
8<ol>
9  <li><a href="#DrawableTint">为图片资源着色</a></li>
10  <li><a href="#ColorExtract">从图像萃取突出颜色</a></li>
11  <li><a href="#VectorDrawables">创建矢量图片</a></li>
12</ol>
13<h2>您也应该阅读</h2>
14<ul>
15  <li><a href="http://www.google.com/design/spec">材料设计规范</a></li>
16  <li><a href="{@docRoot}design/material/index.html">Android 材料设计</a></li>
17</ul>
18</div>
19</div>
20
21<p>下列适用于图片的功能将协助您在您的应用中实现材料设计:</p>
22
23<ul>
24<li>图片着色</li>
25<li>突出颜色萃取</li>
26<li>矢量图片</li>
27</ul>
28
29<p>本课程将向您展示如何在您的应用中使用这些功能。</p>
30
31
32<h2 id="DrawableTint">为图片资源着色</h2>
33
34<p>利用 Android 5.0(API 级别 21)及更高版本,您可为位图以及定义为 Alpha 蒙版的点九图着色。
35您可使用颜色资源或分解为颜色资源(例如 <code>?android:attr/colorPrimary</code>)的主题属性为其着色。
36通常,您只有一次机会创建这些资产并自动为其上色以符合您的主题。
37</p>
38
39<p>您可利用 {@code setTint()} 方法为 {@link android.graphics.drawable.BitmapDrawable} 或 {@link
40android.graphics.drawable.NinePatchDrawable} 对象着色。您也可以利用 <code>android:tint</code> 以及
41<code>android:tintMode</code> 属性设置您的布局中的着色颜色和模式。
42</p>
43
44
45<h2 id="ColorExtract">从图像萃取突出颜色</h2>
46
47<p>Android 支持内容库 r21 及更高版本包括 {@link
48android.support.v7.graphics.Palette} 类别,可让您从图像萃取突出颜色。此类别将萃取下列突出颜色:
49</p>
50
51<ul>
52<li>鲜艳</li>
53<li>鲜艳深色</li>
54<li>鲜艳浅色</li>
55<li>低调</li>
56<li>低调深色</li>
57<li>低调浅色</li>
58</ul>
59
60<p>如果要萃取这些颜色,请将 {@link android.graphics.Bitmap} 对象传递给位于您上载图像的背景线程的
61{@link android.support.v7.graphics.Palette#generate Palette.generate()} 静态方法。
62如果您无法使用此线程,请调用
63{@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} 方法并提供一个侦听程序。
64</p>
65
66<p>您可使用
67<code>Palette</code> 类别(例如 <code>Palette.getVibrantColor</code>)中的 getter 方法从图像检索突出颜色。</p>
68
69<p>如果要在项目中使用 {@link android.support.v7.graphics.Palette} 类别,请将下列
70<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 依赖项</a>添加至您的应用模块:
71</p>
72
73<pre>
74dependencies {
75    ...
76    compile 'com.android.support:palette-v7:21.0.0'
77}
78</pre>
79
80<p>如果要了解更多信息,请参阅{@link android.support.v7.graphics.Palette}
81类别的 API 参考文档。</p>
82
83
84<h2 id="VectorDrawables">创建矢量图片</h2>
85
86<!-- video box -->
87<a class="notice-developers-video" href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
88<div>
89    <h3>视频</h3>
90    <p>Android 矢量图形</p>
91</div>
92</a>
93
94<p>在 Android 5.0(API 级别 21)及更高版本中,您可定义矢量图片,而且图片可在不损失清晰度的情况下缩放。
95您只需一个资产文件即可创建一个矢量图像,而位图图像则需要为每个屏幕密度提供一个资产文件。
96如果要创建一个矢量图像,请您在 <code>&lt;vector&gt;</code> XML 元素中定义形状的详情。
97</p>
98
99<p>下列示例以心形定义一个矢量图像:</p>
100
101<pre>
102&lt;!-- res/drawable/heart.xml -->
103&lt;vector xmlns:android="http://schemas.android.com/apk/res/android"
104    &lt;!-- intrinsic size of the drawable -->
105    android:height="256dp"
106    android:width="256dp"
107    &lt;!-- size of the virtual canvas -->
108    android:viewportWidth="32"
109    android:viewportHeight="32">
110
111  &lt;!-- draw a path -->
112  &lt;path android:fillColor="#8fff"
113      android:pathData="M20.5,9.5
114                        c-1.955,0,-3.83,1.268,-4.5,3
115                        c-0.67,-1.732,-2.547,-3,-4.5,-3
116                        C8.957,9.5,7,11.432,7,14
117                        c0,3.53,3.793,6.257,9,11.5
118                        c5.207,-5.242,9,-7.97,9,-11.5
119                        C25,11.432,23.043,9.5,20.5,9.5z" />
120&lt;/vector>
121</pre>
122
123<p>矢量图像在 Android 中以 {@link android.graphics.drawable.VectorDrawable}
124对象表示。如果要了解更多有关 <code>pathData</code> 语法的信息,请参阅 <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">SVG 路径参考</a>。如果要了解更多有关为矢量图片属性添加动画的信息,请参阅<a href="{@docRoot}training/material/animations.html#AnimVector">为矢量图片添加动画</a>。
125
126</p>
127