1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
page.title=Làm việc với Nội dung vẽ được
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Bài học này hướng dẫn bạn cách</h2>
<ol>
<li><a href="#DrawableTint">Nhuộm màu Tài nguyên Vẽ được</a></li>
<li><a href="#ColorExtract">Trích xuất Màu Nổi bật từ một Hình ảnh</a></li>
<li><a href="#VectorDrawables">Tạo Nội dung vẽ được Véc-tơ</a></li>
</ol>
<h2>Bạn cũng nên đọc</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Đặc tả phong cách Material Design</a></li>
<li><a href="{@docRoot}design/material/index.html">Material Design trên Android</a></li>
</ul>
</div>
</div>
<p>Những khả năng sau của nội dung vẽ được giúp bạn triển khai phong cách material design trong các ứng dụng của mình:</p>
<ul>
<li>Nhuộm màu nội dung vẽ được</li>
<li>Trích xuất màu nổi bật</li>
<li>Nội dung vẽ được véc-tơ</li>
</ul>
<p>Bài học này cho bạn biết cách sử dụng những tính năng này trong ứng dụng của mình.</p>
<h2 id="DrawableTint">Nhuộm màu Tài nguyên Vẽ được</h2>
<p>Với Android 5.0 (API mức 21) và cao hơn, bạn có thể nhuộm màu ảnh bitmap và ảnh chín miếng được định nghĩa làm
mặt nạ alpha. Bạn có thể nhuộm chúng bằng tài nguyên màu hoặc những thuộc tính chủ đề nhằm phân giải thành các tài nguyên
màu (ví dụ, <code>?android:attr/colorPrimary</code>). Thông thường, bạn chỉ tạo những tài sản này
một lần và tô màu tự động cho chúng để khớp với chủ đề của mình.</p>
<p>Bạn có thể áp dụng một màu nhuộm cho đối tượng {@link android.graphics.drawable.BitmapDrawable} hoặc {@link
android.graphics.drawable.NinePatchDrawable} bằng phương thức {@code setTint()}. Bạn cũng có thể
đặt màu nhuộm và chế độ trong bố trí của mình bằng các thuộc tính <code>android:tint</code> và
<code>android:tintMode</code>.</p>
<h2 id="ColorExtract">Trích xuất Màu Nổi bật từ một Hình ảnh</h2>
<p>Thư viện Hỗ trợ Android r21 và cao hơn bao gồm lớp {@link
android.support.v7.graphics.Palette}, cho phép bạn trích xuất màu nổi bật từ một hình ảnh.
Lớp này trích xuất những màu nổi bật sau:</p>
<ul>
<li>Rực rỡ</li>
<li>Tối rực rỡ</li>
<li>Sáng rực rỡ</li>
<li>Lặng</li>
<li>Tối lặng</li>
<li>Sáng lặng</li>
</ul>
<p>Để trích xuất những màu này, hãy chuyển một đối tượng {@link android.graphics.Bitmap} cho phương thức tĩnh
{@link android.support.v7.graphics.Palette#generate Palette.generate()} trong
luồng chạy ngầm nơi bạn tải hình ảnh của mình. Nếu bạn không thể sử dụng luồng đó, hãy gọi phương thức
{@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} và
cung cấp một trình nghe.</p>
<p>Bạn có thể truy xuất màu nổi bật từ hình ảnh bằng cách sử dụng các phương thức getter trong lớp
<code>Palette</code> chẳng hạn như <code>Palette.getVibrantColor</code>.</p>
<p>Để sử dụng lớp {@link android.support.v7.graphics.Palette} trong dự án của mình, hãy thêm
<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Phần phụ thuộc Gradle</a> sau vào
mô-đun ứng dụng của bạn:</p>
<pre>
dependencies {
...
compile 'com.android.support:palette-v7:21.0.0'
}
</pre>
<p>Để biết thêm thông tin, hãy xem tài liệu tham khảo API cho lớp
{@link android.support.v7.graphics.Palette}.</p>
<h2 id="VectorDrawables">Tạo Nội dung vẽ được Véc-tơ</h2>
<!-- video box -->
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
<div>
<h3>Video</h3>
<p>Đồ họa Véc-tơ Android</p>
</div>
</a>
<p>Trong Android 5.0 (API mức 21) và cao hơn, bạn có thể định nghĩa nội dung vẽ được véc-tơ co giãn mà không làm mất
độ sắc nét. Bạn chỉ cần một tệp tài sản cho một hình ảnh véc-tơ, đối lập với tệp tài sản cho
từng mật độ màn hình trong trường hợp hình ảnh bitmap. Để tạo một hình ảnh véc-tơ, bạn định nghĩa chi tiết
của hình ảnh trong phần tử XML <code><vector></code>.</p>
<p>Ví dụ sau định nghĩa hình ảnh véc-tơ có hình một trái tim:</p>
<pre>
<!-- 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>
</pre>
<p>Hình ảnh véc-tơ được biểu diễn trong Android dưới dạng đối tượng {@link android.graphics.drawable.VectorDrawable}
. Để biết thêm thông tin về cú pháp <code>pathData</code>, hãy xem tham chiếu <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">Đường dẫn SVG</a>. Để biết thêm thông tin
về việc tạo hiệu ứng hoạt hình các thuộc tính của nội dung vẽ được véc-tơ, hãy xem
<a href="{@docRoot}training/material/animations.html#AnimVector">Tạo Hiệu ứng Hoạt hình Nội dung vẽ được Véc-tơ</a>.</p>
|
