快捷導(dǎo)航

Android應(yīng)用的Material設(shè)計中圖片的相關(guān)處理指南

更新時間：2016年04月07日 14:39:29 作者：匆忙擁擠repeat

這篇文章主要介紹了Android應(yīng)用的Material設(shè)計中圖片的相關(guān)處理指南,除了介紹新的方法外文中還給出了一些設(shè)計標(biāo)準(zhǔn)樣例僅供參考,需要的朋友可以參考下

可伸縮的矢量圖片不會丟失清晰度，并且單一顏色的app-icon是完美的
可定義一個bitmap作為透明度(alpha)和運行時的顏色
可對一個bitmap image取色，會取出它比較顯眼的顏色
官網(wǎng)地址：https://developer.android.com/training/material/drawables.html

以下圖片的功能能幫助你在app中實現(xiàn)Material設(shè)計：

圖片著色
顏色提取
矢量圖片

Tint Drawable Resources 為圖片資源染色

在Android 5.0(API級別21)及以上，你可以將圖片和9-patch定義為掩飾透明度。你能使用顏色資源(如，?android:attr/colorPrimary)或主題屬性來給它們上色。通常，你只需創(chuàng)建這些資源一次，且自動匹配你的主題為它們上色。
可以為BitmapDrawable和NinePatchDrawable 的對象使用setTint(int tint)進行染色。也可以在xml中定義android:tint和android:tintMode屬性。
·關(guān)于setTint(int tint)的參數(shù)，可以是一個@color/下的屬性，也可以是一個xml的selector,selector中的item是使用了數(shù)字的，如：

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_focused="true" android:color="@color/testcolor1"/>
  <item android:state_pressed="true" android:state_enabled="false" android:color="@color/testcolor2" />
  <item android:state_enabled="false" android:color="@color/testcolor3" />
  <item android:color="@color/testcolor5"/>
 </selector>

·關(guān)于xml中定義屬性，如：

<?xmlversion="1.0"encoding="utf-8"?>
<nine-patchxmlns:android="http://schemas.android.com/apk/res/android" 
  android:tint="@color/abc_primary_text_material_light" 
  android:tintMode="src_over"
  ... >
</nine-patch>

Extract Prominent Colors from an Image 從圖片抽取明顯的顏色
在api21上的support-v7庫中有一個android-support-v7-palette.jar，它能夠讓你從圖片中抽取一些顯眼的顏色：

Palette p = Palette.generate(Bitmap bitmap);

鮮艷的 p.getVibrantColor(int defaultColor);
鮮艷的黑暗 p.getDarkVibrantColor(int defaultColor);
鮮艷的明亮 p.getLightVibrantColor(int defaultColor);
柔和的 p.getMutedColor(int defaultColor);
柔和的黑暗 p.getDarkMutedColor(int defaultColor);
柔和的明亮 p.getLightMutedColor(int defaultColor);

Palette.generate()，用于在后臺線程中執(zhí)行，如果在前臺線程中創(chuàng)建Palette對象，那么可以使用Palette.generateAsync()。

Create Vector Drawables 創(chuàng)建矢量圖片
在Android 5.0(API級別21)及以上可以創(chuàng)建矢量圖片，如下面的例子可以繪制一個心形的矢量圖：

<!-- 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>

矢量圖片在Android中使用VectorDrawble對象與之對應(yīng)。path的更多信息請見：http://www.w3.org/TR/SVG11/paths.html#PathData。

設(shè)計標(biāo)準(zhǔn)樣例

選用圖片

201647143812255.jpg (360×640)