在 Android 中使用 SVG矢量圖 來替代傳統(tǒng)的圖片有很多好處搏屑，比如自適應(yīng)低缩，體積小堪旧，不失真等糠雨。但是在API21 以下版本使用時(shí)會(huì)有兼容性問題才睹，在 Androi 5.0 以下的設(shè)備可能會(huì)報(bào)這樣的錯(cuò)誤：
......
Binary XML file line #1: invalid drawable tag vector
......
Caused by: android.content.res.Resources$NotFoundException: File res/drawable/you_svg_name.xml from drawable resource ID #0x7f02004b
......
那要怎么做呢？
一、配置琅攘。
詳細(xì)請(qǐng)查看 vector-asset-studio
參看下面的代碼：
apply plugin: 'com.android.application'
android {
compileSdkVersion 27
defaultConfig {
applicationId "com.example.app"
minSdkVersion 16
targetSdkVersion 27
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
vectorDrawables.useSupportLibrary = true
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
buildToolsVersion '27.0.2'
}
androidExtensions {
experimental = true
}
dependencies {
implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation 'com.android.support:appcompat-v7:27.0.2'
implementation 'com.android.support:design:27.0.2'
implementation 'com.android.support:support-vector-drawable:27.0.2'
implementation 'com.android.support:support-v4:27.0.2'
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
implementation 'com.android.support:animated-vector-drawable:27.0.2'
}
1： 添加依賴
implementation 'com.android.support:animated-vector-drawable:27.0.2'
2：在 defaultConfig 下面添加聲明
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
3：在 Activity 的 oncreate 中加入如下代碼,建議在BaseActivity中添加
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
//......
}
二垮庐、使用。
配置好了可以開始使用,一般有兩個(gè)場景坞琴，一個(gè)是 TextView哨查、EditText 的 drawableLeft、Right剧辐、Top解恰、Bottom，一個(gè)是作為 ImageView 背景 background浙于。
- 用 srcCompat 代替 src.
- 設(shè)置背景 可以將你的 svg 資源用 selector 標(biāo)簽包裹起來調(diào)用护盈。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/your_svg_name"></item>
</selector>
- 在 EditText 中使用 android:drawableLeft 和 android:drawableStart 時(shí)，有可能還會(huì)報(bào)錯(cuò)羞酗，這時(shí)你可以參照第二條使用腐宋。
<EditText
android:id="@+id/id_edit"
style="@style/inputNameEt"
android:drawableLeft="@drawable/drawable_home_selector"
android:drawableStart="@drawable/drawable_home_selector" />
4.有部分控件點(diǎn)擊需要selector，我貼出自己使用的Image以及Color的selector：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:drawable="@drawable/home_search_norm" android:state_focused="false" android:state_pressed="false" android:state_selected="false" />
<item android:drawable="@drawable/home_search_sel" android:state_focused="false" android:state_pressed="false" android:state_selected="true" />
<!-- Focused states -->
<item android:drawable="@drawable/home_search_sel" android:state_focused="true" android:state_pressed="false" android:state_selected="false" />
<item android:drawable="@drawable/home_search_sel" android:state_focused="true" android:state_pressed="false" android:state_selected="true" />
<!-- Pressed -->
<item android:drawable="@drawable/home_search_sel" android:state_pressed="true" android:state_selected="true" />
<item android:drawable="@drawable/home_search_sel" android:state_pressed="true" />
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Selected -->
<item android:state_selected="true" android:color="@color/home_selected_color" />
<!-- Active -->
<item android:state_active="true" android:color="@color/home_selected_color"/>
<item android:state_selected="false" android:color="@color/home_normal_color" />
<item android:state_active="false" android:color="@color/home_normal_color"/>
</selector>
使用的時(shí)候檀轨，如需更換樣式可調(diào)用 （使用場景如首頁導(dǎo)航欄切換樣式）
public void setSelected(boolean selected)胸竞；
以上。
三参萄、自定義控件
對(duì)于textview的drawableLeft卫枝，自己定義了一個(gè)可設(shè)置位置和大小的控件，有需要可以copy讹挎。
下面貼出自定義過程和使用方法：
- 首先在 “res / values / attrs.xml” 的 attrs.xml 文件中添加自定義 TextView 屬性：
<declare-styleable name="CustomTextView">
<attr name="drawable" format="reference"/>
<attr name="drawableWidth" format="dimension"/>
<attr name="drawableHeight" format="dimension"/>
<attr name="position" format="integer"/>
</declare-styleable>
- 然后像這樣創(chuàng)建自定義的 TextView 類：
import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.support.v7.content.res.AppCompatResources;
import android.support.v7.widget.AppCompatTextView;
import android.util.AttributeSet;
import android.util.TypedValue;
public class CustomTextView extends AppCompatTextView {
private Drawable mDrawable;//設(shè)置的圖片
private int mScaleWidth; // 圖片的寬度
private int mScaleHeight;// 圖片的高度
private int mPosition;// 圖片的位置 1左2上3右4下
public CustomTextView(Context context) {
super(context);
}
public CustomTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
public CustomTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
public void init(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs,
R.styleable.CustomTextView);
if (null != typedArray) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
mDrawable = typedArray.getDrawable(R.styleable.CustomTextView_drawable);
} else {
int mDrawableId = typedArray.getResourceId(R.styleable.CustomTextView_drawable, -1);
if (mDrawableId != -1)
mDrawable = AppCompatResources.getDrawable(context, mDrawableId);
}
mScaleWidth = typedArray
.getDimensionPixelOffset(
R.styleable.CustomTextView_drawableWidth,
dip2px(context, 20));
mScaleHeight = typedArray.getDimensionPixelOffset(
R.styleable.CustomTextView_drawableHeight,
dip2px(context, 20));
mPosition = typedArray.getInt(R.styleable.CustomTextView_position, 3);
typedArray.recycle();
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (mDrawable != null) {
mDrawable.setBounds(0, 0, mScaleWidth, mScaleHeight);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
switch (mPosition) {
case 1:
this.setCompoundDrawables(mDrawable, null, null, null);
break;
case 2:
this.setCompoundDrawables(null, mDrawable, null, null);
break;
case 3:
this.setCompoundDrawables(null, null, mDrawable, null);
break;
case 4:
this.setCompoundDrawables(null, null, null, mDrawable);
break;
default:
break;
}
}
public static int dip2px(Context context, int dpValue) {
Resources r = context.getResources();
float px = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
dpValue, r.getDisplayMetrics());
return (int) px;
}
}
- 現(xiàn)在校赤，可以通過自定義屬性在任何布局中輕松使用它：
<YOUR_PACKAGE.CustomTextView
android:id="@+id/id_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:drawable="@drawable/drawable_home_selector"
app:drawableHeight="24dp"
app:drawableWidth="24dp"
app:position="1" />
你可以用 Button，EditText 和 RadioButton 做類似的事情筒溃，因?yàn)樗鼈兪菑?TextView 派生的马篮。
如有錯(cuò)誤請(qǐng)指出，謝謝怜奖。
注意事項(xiàng)：
在項(xiàng)目根目錄的build.gradle文件中的gradle插件版本須高于1.5.0浑测，現(xiàn)在一般3.x的Android Studio 新建的項(xiàng)目的Gradle版本都比這高，舊項(xiàng)目如需要升級(jí)歪玲，建議翻墻或者下載離線文件迁央。
// SVG：適用于 Gradle 的 Android 插件 1.5.0 或更高版本
buildscript {
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.1.2'
}
}
Android ：vector-asset-studio
stackoverflow ：Binary XML file line #1: invalid drawable tag vector
