サイトblog.stylingandroid.comの記事「 VectorDrawables-パート1 」の翻訳に注目してください。
当直には、どういうわけかベクターグラフィックスを扱う必要がありました。 検索中に、ブログhttps://blog.stylingandroid.com/で 「VectorDrawable」という一連の記事に出会いました。 もちろん、私が興味を持っているすべての質問に対する答えは見つかりませんでしたが、記事の一貫性と必要な資料の明確に検証された量のために、記事が本当に好きでした。 これらの記事の翻訳をHabrの住民と共有することにしました。
名前、アクティビティ、ビットマップなどを翻訳しませんでした。なぜなら、開発者は職業のおかげで、ロシア語版ではこれらの単語を実際に消費しないからです。 以下は翻訳です：
Lollipopの非常に興味深い新機能の1つは、VectorDrawableとその関連クラスを含めることです。これにより、複雑なベクターグラフィックスを追加するための非常に強力な新機能が提供されますいくつかの強力なアニメーションツールを提供します。 この一連の記事では、それらがもたらす利点のいくつかを見ていきます。 また、比較的少量のコードから本当に印象的な結果を得る方法についても説明します。
ベクトルグラフィックは、幾何学的図形を使用してグラフィック要素を記述する方法です。 Adobe IllustratorやInkscapeなどのアプリケーションで作成されたグラフィック要素に特に適しています。単純な幾何学的形状を組み合わせて、より複雑な要素にすることができます。 一方、ラスターグラフィックスを使用すると、各ピクセルの色の値が決定され、特に写真に適しています。 ベクトルグラフィックを使用する大きな利点（該当する場合）は、実行時に画像がレンダリングされ、ピクセル密度に応じてサイズが自動的に計算されることです。 したがって、デバイスの機能に関係なく、滑らかな線で鮮明な画像を取得できます。 原則として、ベクター画像は、対応するラスタ画像よりも大幅に少ないメモリを使用します。 ただし、ベクター画像のレンダリングにはより多くの処理能力が必要です。これは、多数の複雑なグラフィック要素の問題になる可能性があります。
Androidのベクターグラフィックスは、Lollipopで導入された新しいクラス-VectorDrawableを使用して実装されました。 これは、ベクター表現に適したグラフィック要素の場合、mdpi、hdpi、xhdpi、xxhdpi、およびxxxhdpiフォルダー内のビットマップをDrawableフォルダー内の1つのVectorDrawableに置き換えることができることを意味します。 mdpiのビットマップより。
これを示すために、次のsvgファイルを見てみましょう（ https://code.google.com/archive/p/svg-android/downloadsで見つけることができます ）：
このsvgファイルは2265バイトかかります。500x 500ピクセルのサイズのビットマップにそれを描画し、pngとして保存すると、すでに13272バイトが必要になります。これに加えて、さまざまな画面密度でこのような画像をいくつか使用する必要があります。 ただし、SVGはVectorDrawableと同じではないため、直接使用することはできません。 ただし、VectorDrawableはいくつかのSVG要素をサポートしています。 SVGから使用する主なコンポーネントはパスです。 SVGソースコードを見てみましょう。
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"> <g id="max_width__x2F__height" display="none"> <path display="inline" d="M499.001,1v498H1V1H499.001 M500.001,0H0v500h500.001V0L500.001,0z"/> </g> <g id="androd"> <path fill="#9FBF3B" d="M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104c-1.563-1.074-3.805-0.543-4.993,1.199 L294.863,80.53c-13.807-5.439-29.139-8.47-45.299-8.47c-16.16,0-31.496,3.028-45.302,8.47l-20.948-30.41 c-1.201-1.74-3.439-2.273-5.003-1.199c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272 c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298"/> <path fill="#FFFFFF" d="M203.956,129.438c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08 c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438"/> <path fill="#FFFFFF" d="M295.161,129.438c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08 c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438"/> <path fill="#9FBF3B" d="M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09 c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z"/> <path fill="#9FBF3B" d="M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744 c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354v-54.744h37.371v54.744 c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489 H140.396z"/> <path fill="#9FBF3B" d="M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09 c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z"/> </g> </svg>
少し理解します。 500x500のサイズを決定する親要素の属性がいくつかあります。境界を定義する要素（グループ）があります-それを無視します。 id =“ android”の要素がもう1つあります。 これが必要なロゴの画像です。 頭、右目、左目、左手、体と脚、右手を定義する6つの要素で構成されます。 属性「塗りつぶし」は塗りつぶしの色を定義し（目が白で塗りつぶされていることを除いて、すべて緑色であることがわかります）、属性「d」には要素が含まれる線のルートが含まれます。 要素をより詳細に理解したい場合は、 SVG Path Specificationを学習する必要がありますが、この記事では重要ではありません。そのまま使用してVectorDrawablesで使用できるためです。
それでは、VectorDrawableを作成しましょう。
<?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:viewportWidth="500" android:viewportHeight="500" android:width="500px" android:height="500px"> <group android:name="android"> <path android:name="head" android:fillColor="#9FBF3B" android:pathData="M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104c-1.563-1.074-3.805-0.543-4.993,1.199L294.863,80.53c-13.807-5.439-29.139-8.47-45.299-8.47c-16.16,0-31.496,3.028-45.302,8.47l-20.948-30.41c-1.201-1.74-3.439-2.273-5.003-1.199c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298" /> <path android:name="left_eye" android:fillColor="#FFFFFF" android:pathData="M203.956,129.438c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438" /> <path android:name="right_eye" android:fillColor="#FFFFFF" android:pathData="M295.161,129.438c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438" /> <path android:name="left_arm" android:fillColor="#9FBF3B" android:pathData="M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z" /> <path android:name="body" android:fillColor="#9FBF3B" android:pathData="M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354v-54.744h37.371v54.744c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489H140.396z" /> <path android:name="right_arm" android:fillColor="#9FBF3B" android:pathData="M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z" /> </group> </vector>
画像のサイズに関する情報を含む親要素を作成し、その中に、svgファイルと比較してわずかに変更された6つの要素を持つ要素を配置しました。 この記事では、「名前」フィールドは、どの要素がどこにあるかを理解しやすくするためのものです。 次の記事ではそれらが使用されます。 結果のファイルは2412バイトの控えめなサイズのままです。
これで、このファイルを他のドロアブルとして使用できます。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".VectorDrawablesActivity"> <ImageView android:id="@+id/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/android" android:contentDescription="@null" /> </RelativeLayout>
...そしてこれを実行すると、美しいレンダリングが表示されます：
そのため、必要に応じてVectorDrawableを使用すれば、APKのサイズを大幅に削減できます。 また、特に新しい画面密度のサポートを追加する必要がある場合は、アプリケーション開発を簡素化するのにも役立ちます。 ただし、これはVectorDrawableで可能なことのすべてではありません。 記事の次の部分では、アニメーション化の方法を見ていきます。
記事のこの部分のソースはここにあります 。