在 Android 中使用 SVG矢量图 来替代传统的图片有很多好处，比如自适应，体积小，不失真等。但是在API21 以下版本使用时会有兼容性问题，在 Androi 5.0 以下的设备可能会报这样的错误：
......
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
......
那要怎么做呢？
一、配置。
详细请查看 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
}
}
二、使用。
配置好了可以开始使用,一般有两个场景，一个是 TextView、EditText 的 drawableLeft、Right、Top、Bottom，一个是作为 ImageView 背景 background。
- 用 srcCompat 代替 src.
- 设置背景 可以将你的 svg 资源用 selector 标签包裹起来调用。
<?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 时，有可能还会报错，这时你可以参照第二条使用。
<EditText
android:id="@+id/id_edit"
style="@style/inputNameEt"
android:drawableLeft="@drawable/drawable_home_selector"
android:drawableStart="@drawable/drawable_home_selector" />
4.有部分控件点击需要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>
使用的时候，如需更换样式可调用 （使用场景如首页导航栏切换样式）
public void setSelected(boolean selected)；
以上。
三、自定义控件
对于textview的drawableLeft，自己定义了一个可设置位置和大小的控件，有需要可以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>
- 然后像这样创建自定义的 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 CustomTextViewextends AppCompatTextView {
private Drawable mDrawable;//设置的图片
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;
}
}
- 现在，可以通过自定义属性在任何布局中轻松使用它：
<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 做类似的事情，因为它们是从 TextView 派生的。
如有错误请指出，谢谢。
注意事项：
在项目根目录的build.gradle文件中的gradle插件版本须高于1.5.0，现在一般3.x的Android Studio 新建的项目的Gradle版本都比这高，旧项目如需要升级，建议翻墙或者下载离线文件。
// 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
网友评论