Android SVG 兼容低版本API

在 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  }}

3：在 Activity 的 oncreate 中加入如下代码, 建议在 BaseActivity 中添加

@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    AppCompatDelegate.setCompatVectorFromResourcesEnabled(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 时，有可能还会报错，这时你可以参照第二条使用。

 "@+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"><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" /><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" /><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"><item android:state_selected="true" android:color="@color/home_selected_color" /><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 CustomTextView extends 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

一、配置。

二、使用。

三、自定义控件

更多相关文章

随机推荐