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>アプリにマテリアル デザインを実装する際は、Drawable （ドローアブル）の次の機能を活用できます。</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）以降では、アルファ マスクとして定義されたビットマップや 9-patch に色を付けることができます。 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>Vibrant （鮮やか）</li> 53<li>Vibrant dark （鮮やかな暗色）</li> 54<li>Vibrant light （鮮やかな明色）</li> 55<li>Muted （控えめ）</li> 56<li>Muted dark （控えめな暗色）</li> 57<li>Muted light （控えめな明色）</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>詳細については、API リファレンスの {@link android.support.v7.graphics.Palette} クラスをご覧ください。 81</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ビットマップ画像では画面密度ごとにアセット ファイルが必要ですが、ベクター画像で必要なアセット ファイルは 1 つのみです。 96ベクター画像を作成するには、<code><vector></code> XML 要素で図形の詳細を定義します。 97</p> 98 99<p>次の例では、ハート型のベクター画像を定義しています。</p> 100 101<pre> 102<!-- res/drawable/heart.xml --> 103<vector xmlns:android="http://schemas.android.com/apk/res/android" 104 <!-- intrinsic size of the drawable --> 105 android:height="256dp" 106 android:width="256dp" 107 <!-- size of the virtual canvas --> 108 android:viewportWidth="32" 109 android:viewportHeight="32"> 110 111 <!-- draw a path --> 112 <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</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>をご覧ください。ベクター型ドローアブルのアニメーションの詳細については、 125<a href="{@docRoot}training/material/animations.html#AnimVector">ベクター ドローアブルのアニメーション</a>をご覧ください。 126</p> 127