美文网首页
SVG在项目中使用

SVG在项目中使用

作者: tesla1984 | 来源:发表于2018-12-04 19:25 被阅读0次

官方文档-添加多密度矢量图形

Android 4.4(API 级别 20)及更低版本不支持矢量图

如果在低版本上使用有两个选择:

  1. 生成png(默认)
  2. 使用支持库

生成PNG

如果最低 API 级别为 Android 4.4(API 级别 20)及更低版本,且您未启用支持库技术,则 Vector Asset Studio 将生成 PNG 文件。在 Project 窗口的 Project Files 视图中,您可以在 app/build/generated/res/pngs/debug/ 文件夹中查看生成的 PNG 和 XML 文件。

支持库

此技术需要 Android 支持库 23.2 或更高版本、适用于 Gradle 的 Android 插件 2.0 或更高版本,且仅使用矢量图。利用支持库中的 VectorDrawableCompat 类,可实现在 Android 2.1(API 级别 7)及更高版本中支持 VectorDrawable

android {
  defaultConfig {
    vectorDrawables.useSupportLibrary = true
  }
}

dependencies {
  compile 'com.android.support:appcompat-v7:23.2.0'
}

您还必须使用与支持库兼容的编码技术,例如对矢量图使用 app:srcCompat 属性,而不是 android:src 属性。如需了解详细信息,请参阅 Android 支持库 23.2

As of Android Support Library 23.3.0, support vector drawables can only be loaded via app:srcCompat or setImageResource()..

关于setCompatVectorFromResourcesEnabled

在网上有的地方看到在继承AppCompatActivity中添加如下代码:

    static {
        AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
    }

该方法说明:
https://developer.android.com/reference/android/support/v7/app/AppCompatDelegate.html#setCompatVectorFromResourcesEnabled(boolean)

setCompatVectorFromResourcesEnabled

added in [version 24.1.0]
(https://developer.android.com/topic/libraries/support-library/revisions.html)

Sets whether vector drawables on older platforms (< API 21) can be used within DrawableContainer resources.

When enabled, AppCompat can intercept some drawable inflation from the framework, which enables implicit inflation of vector drawables within DrawableContainer resources. You can then use those drawables in places such as android:src on ImageView, or android:drawableLeft on TextView.
Example usage:

 <selector xmlns:android="...">
     <item android:state_checked="true"
           android:drawable="@drawable/vector_checked_icon" />
     <item android:drawable="@drawable/vector_icon" />
 </selector>

 <TextView
         ...
         android:drawableLeft="@drawable/vector_state_list_icon" />

This feature defaults to disabled, since enabling it can cause issues with memory usage, and problems updating Configuration instances. If you update the configuration manually, then you probably do not want to enable this. You have been warned.

Even with this disabled, you can still use vector resources through setImageResource(int) and its app:srcCompatattribute. They can also be used in anything which AppCompat inflates for you, such as menu resources.

Please note: this only takes effect in Activities created after this call.

AppCompatDelegate.setCompatVectorFromResourcesEnabled该方法就是在xml中我们可以更方便的时候vector drawable,比如在imageview中直接使用src,在textview中使用drawableleft(低版本中textview的drawable使用svg会有问题),但是会有问题,所以还是不要使用。上面android-support-library引用中已经说明,使用srcCompat或者setImageResource就可以了

textview设置compoundDrawable问题

5.0以下某些机型可能会崩溃的,原因是AppCompatTextView是没有对CompoundDrawable进行适配的,所以我们要判断系统版本如果小于5.0,就用ContextCompat.getDrawable获取到Drawable实例,再setCompoundDrawablesWithIntrinsicBounds。
GitHub - woxingxiao/VectorCompatTextView

总结

  1. 使用支持库
  2. ImageViewxml中使用app:srcCompat
  3. ImageView代码中使用setImageResource
  4. textview中xml的compoundDrawable问题(参考上面github)
  5. vector drawable通过AppCompatResource获得(即要通过该类去获得svg的drawable),不然会报Resource$NotFoundException
  6. svg最好只使用在icon中,使用在background或者selector中还有一些问题需要考虑(比方说xml中不支持background使用svg)

在代码中设置ImageViewbackground,设置TextView的compundDrawable

imageView2.setBackgroundDrawable(AppCompatResources
.getDrawable(this,R.drawable.ic_icon_loading/));

textView2.setCompoundDrawablesWithIntrinsicBounds(null,null,AppCompatResources.getDrawable(this,R.drawable.ic_icon_loading),null);

Tint使用

  1. xml中直接使用
  2. 代码中使用
        Drawable drawable = AppCompatResources.getDrawable(this, R.drawable.ic_icon_loading);
        //Drawable drawable = imageView3.getDrawable();
        if (drawable != null) {
            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
                drawable = DrawableCompat.wrap(drawable).mutate();
            }
            DrawableCompat.setTint(drawable, ContextCompat.getColor(this, R.color.colorAccent));
            imageView3.setImageDrawable(drawable);
        }

参考

相关文章

  • vue 使用svg图标

    之前做项目中,使用的小图标都是使用字体图标,现在这个项目因为毕竟小,就想使用svg来展示svg。因为在学习的过程中...

  • iOS SVG及相关使用

    近日,发现安卓同学在项目中使用的都是SVG(矢量图)的图片。 那么,什么是svg呢?svg在放大或者缩小的情况下,...

  • vue使用svg

    vue使用svg 做的一个可视化大屏项目中需要引入svg, 直接绑定svg元素的某些值,在ui给的svg中出现了s...

  • 封装svg组件

    svg图标的使用基于这次项目的图标使用本地的svg图片。普通的使用方式 避免每次写这三行代码,封装一个svg组件 ...

  • 2018-11-15

    svg SVG 在HTML页面中怎样使用? (1)使用 标签 : 优势:所有主要浏览器都支持,并允许使用脚本 ...

  • SVG在项目中使用

    官方文档-添加多密度矢量图形 Android 4.4(API 级别 20)及更低版本不支持矢量图 如果在低版本上使...

  • 碎片化时间(1)----tagName

    tagName svg 在XML中有一个 svg ,所以 使用 qieryselect 得到的是XMO 中的 ...

  • 项目使用svg图标

    vue-element-admin基础模板中,已经封装好了使用svg图标的组件,此组件在vue-ssr项目中也同样...

  • AI导出svg图片位置改变

    在AI中导出svg格式时,使用存储为svg,不使用导出为svg(注:导出为svg会使图片出现位置改变等)

  • 在vue项目中配置使用svg

    日常使用svg作为图标使用已经很常见了,以下为几种使用方式 . file-loader 解析资源文件 最原始的无非...

网友评论

      本文标题:SVG在项目中使用

      本文链接:https://www.haomeiwen.com/subject/ctdvcqtx.html