android中使用SVG矢量图

535 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情

SVG是什么?

svg是图片的一种格式,是一种可以缩放的矢量图形,它是使用xml格式定义的图形,这种格式其实有很多的优点那就是不失真,放大缩小图片的质量是不会改变的,而且文件的大小,相对于我们平常使用jpg\jpeg格式的图片小很多。好了优点就先说那么多,前面我们提到svg是xml格式构成的,那就说明我们可以通过代码的方式进行xml的节点解析,来进行动态修改图片(此文暂时先不讨论动态修改svg)。

android中如何使用?

我们首先要得到一个svg格式图片,网上也是有很多的素材(此文图片来源iconfont),实在找不到可以问公司的ui小姐姐。在安卓5.0以上是不需要进行配置,可直接使用。 我们新建一个android project,然后在项目的res->drawable文件夹上右键new->Vector Asset

image.png

然后我们进入配置矢量资源选项卡,这里我们可以使用图标库中默认的一些官方提供的素材(风格比较单一),当然我们一般都是使用本地别人提供好的svg文件,如下图所示配置。

image.png

接着我们来到布局当中,给ImageView添加这个svg格式的src即可,这里我们使用了第三方的PhotoView,方便我们来进行缩放演示效果。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.github.chrisbanes.photoview.PhotoView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_bixin"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

下面附上一张运行效果图,可以看到我们放大来看图片依旧是清晰的,不失真,赶快在项目中用起来svg吧!

km5u5-2if10.gif