使用svg步骤

最新推荐文章于 2025-02-26 13:48:49 发布
最新推荐文章于 2025-02-26 13:48:49 发布
阅读量279 收藏
点赞数
分类专栏： android 工具类 文章标签： svg Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaowu7130/article/details/86519951
版权

svg实际使用不多，不知道自己何时注意到的，也在项目中自己使用过。

svg是从Android5.0开始引入的一个drawable的子类VectorDrawable支持矢量图片的，同时还引入了 AnimatedVectorDrawable 来支持矢量图动画，向下兼容到4.0之上。

延续我的风格，先上代码中怎样使用

一、在主工程的build,.gradle中引用

android{
  ...
  defaultConfig {
    ...
    vectorDrawables.useSupportLibrary = true
   }
  ...
}

dependencies {
  ...
  compile "com.android.support:appcompat-v7:21+" // 至少Api21
//下面这句可以不使用
//    implementation 'com.android.support:animated-vector-drawable:27.0.2'
  ...
}

二、项目的Activity中都包含（通用做法是在BaseActivity中加）：

@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        /**
         * 加载svg图片使用，activity必须AppCompatActivity
         */
        AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
       ...
       ...

    }

三、使用svg图片

1.可以和加载一般图片时使用

2.不过和AppCompat系列控件更配吆，AppCompatImageView没有特别说明

   但是在5.0以下的AppCompatTextView可能存在问题的，AppCompatTextView是没有对CompoundDrawable进行适配的，所以需要自己动手才能丰衣足食。我们一般使用一个自定义的VectorCompatTextView加载svg图片


import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.support.annotation.ColorInt;
import android.support.v4.graphics.drawable.DrawableCompat;
import android.support.v7.content.res.AppCompatResources;
import android.support.v7.widget.AppCompatCheckedTextView;
import android.util.AttributeSet;
import android.view.ViewTreeObserver;

import com.demo.R;

/**
 * @author hahaliu
 * @version 1.0
 * @date 2018/8/16
 * @Description textview显示svg中，针对5.0以下有可能出现bug使用的
 *              应用tagSdk大于5.0一般的textview使用就可以
 */
public class VectorCompatTextView extends AppCompatCheckedTextView {

    private boolean isTintDrawableInTextColor;
    private int mDrawableCompatColor;
    private boolean isDrawableAdjustTextWidth;
    private boolean isDrawableAdjustTextHeight;
    private boolean isDrawableAdjustViewWidth;
    private boolean isDrawableAdjustViewHeight;
    private int mDrawableWidth;
    private int mDrawableHeight;

    public VectorCompatTextView(Context context) {
        this(context, null);
    }

    public VectorCompatTextView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public VectorCompatTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        initAttrs(context, attrs);
    }

    private void initAttrs(Context context, AttributeSet attrs) {
        if (attrs != null) {
            TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.VectorCompatTextView);

            Drawable dl = null;
            Drawable dt = null;
            Drawable dr = null;
            Drawable db = null;
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                dl = a.getDrawable(R.styleable.VectorCompatTextView_drawableLeftCompat);
                dt = a.getDrawable(R.styleable.VectorCompatTextView_drawableTopCompat);
                dr = a.getDrawable(R.styleable.VectorCompatTextView_drawableRightCompat);
                db = a.getDrawable(R.styleable.VectorCompatTextView_drawableBottomCompat);
            } else {
                int dlId = a.getResourceId(R.styleable.VectorCompatTextView_drawableLeftCompat, -1);
                int dtId = a.getResourceId(R.styleable.VectorCompatTextView_drawableTopCompat, -1);
                int drId = a.getResourceId(R.styleable.VectorCompatTextView_drawableRightCompat, -1);
                int dbId = a.getResourceId(R.styleable.VectorCompatTextView_drawableBottomCompat, -1);

                if (dlId != -1) {
                    dl = AppCompatResources.getDrawable(context, dlId);
                }
                if (dtId != -1) {
                    dt = AppCompatResources.getDrawable(context, dtId);
                }
                if (drId != -1) {
                    dr = AppCompatResources.getDrawable(context, drId);
                }
                if (dbId != -1) {
                    db = AppCompatResources.getDrawable(context, dbId);
                }
            }

            isTintDrawableInTextColor = a.getBoolean(R.styleable.VectorCompatTextView_tintDrawableInTextColor, false);
            mDrawableCompatColor = a.getColor(R.styleable.VectorCompatTextView_drawableCompatColor, 0);
            isDrawableAdjustTextWidth = a.getBoolean(R.styleable.VectorCompatTextView_drawableAdjustTextWidth, false);
            isDrawableAdjustTextHeight = a.getBoolean(R.styleable.VectorCompatTextView_drawableAdjustTextHeight, false);
            isDrawableAdjustViewWidth = a.getBoolean(R.styleable.VectorCompatTextView_drawableAdjustViewWidth, false);
            isDrawableAdjustViewHeight = a.getBoolean(R.styleable.VectorCompatTextView_drawableAdjustViewHeight, false);
            mDrawableWidth = a.getDimensionPixelSize(R.styleable.VectorCompatTextView_drawableWidth, 0);
            mDrawableHeight = a.getDimensionPixelSize(R.styleable.VectorCompatTextView_drawableHeight, 0);
            a.recycle();

            if (mDrawableWidth < 0) {
                mDrawableWidth = 0;
            }
            if (mDrawableHeight < 0) {
                mDrawableHeight = 0;
            }
            if (isDrawableAdjustTextWidth) {
                isDrawableAdjustViewWidth = false;
            }
            if (isDrawableAdjustTextHeight) {
                isDrawableAdjustViewHeight = false;
            }

            initDrawables(dl, dt, dr, db);
        }
    }

    private void initDrawables(final Drawable... drawables) {
        for (Drawable drawable : drawables) {
            tintDrawable(drawable);
        }

        if (!isDrawableAdjustTextWidth && !isDrawableAdjustTextHeight && !isDrawableAdjustViewWidth &&
                !isDrawableAdjustViewHeight && mDrawableWidth == 0 && mDrawableHeight == 0) {
            setCompoundDrawablesWithIntrinsicBounds(drawables[0], drawables[1], drawables[2], drawables[3]);
        } else {
            if (isDrawableAdjustTextWidth || isDrawableAdjustTextHeight || isDrawableAdjustViewWidth ||
                    isDrawableAdjustViewHeight) {
                boolean invalid = (
                        (isDrawableAdjustTextWidth || isDrawableAdjustViewWidth) &&
                                (drawables[0] != null || drawables[2] != null))
                        ||
                        ((isDrawableAdjustTextHeight || isDrawableAdjustViewHeight)
                                && (drawables[1] != null || drawables[3] != null));
                if (invalid) {
                    if (mDrawableWidth > 0 || mDrawableHeight > 0) {
                        resizeDrawables(drawables[0], drawables[1], drawables[2], drawables[3]);
                    } else {
                        setCompoundDrawablesWithIntrinsicBounds(drawables[0], drawables[1], drawables[2], drawables[3]);
                    }
                } else {
                    getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                        @Override
                        public void onGlobalLayout() {
                            if (Build.VERSION.SDK_INT < 16) {
                                getViewTreeObserver().removeGlobalOnLayoutListener(this);
                            } else {
                                getViewTreeObserver().removeOnGlobalLayoutListener(this);
                            }

                            adjustDrawables(drawables[0], drawables[1], drawables[2], drawables[3]);
                        }
                    });
                }
            } else if (mDrawableWidth > 0 || mDrawableHeight > 0) {
                resizeDrawables(drawables[0], drawables[1], drawables[2], drawables[3]);
            }
        }
    }

    private void tintDrawable(Drawable drawable) {
        if (drawable != null) {
            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
                drawable = DrawableCompat.wrap(drawable).mutate();
            }
            if (isTintDrawableInTextColor) {
                DrawableCompat.setTint(drawable, getCurrentTextColor());
            } else if (mDrawableCompatColor != 0) {
                DrawableCompat.setTint(drawable, mDrawableCompatColor);
            }
        }
    }

    private void resizeDrawables(Drawable... drawables) {
        for (Drawable drawable : drawables) {
            if (drawable == null) {
                continue;
            }

            if (mDrawableWidth > 0 && mDrawableHeight > 0) {
                drawable.setBounds(0, 0, mDrawableWidth, mDrawableHeight);
            } else if (mDrawableWidth > 0) {
                int h = mDrawableWidth * drawable.getIntrinsicHeight() / drawable.getIntrinsicWidth();
                drawable.setBounds(0, 0, mDrawableWidth, h);
            } else {
                int w = mDrawableHeight * drawable.getIntrinsicWidth() / drawable.getIntrinsicHeight();
                drawable.setBounds(0, 0, w, mDrawableHeight);
            }
        }

        setCompoundDrawables(drawables[0], drawables[1], drawables[2], drawables[3]);
    }

    @Override
    public void setText(CharSequence text, BufferType type) {
        super.setText(text, type);

        if (isDrawableAdjustTextWidth || isDrawableAdjustTextHeight) {
            Drawable[] drawables = getCompoundDrawables();
            if (drawables[0] == null && drawables[1] == null && drawables[2] == null && drawables[3] == null) {
                return;
            }

            adjustDrawables(drawables[0], drawables[1], drawables[2], drawables[3]);
        }
    }

    private void adjustDrawables(Drawable dl, Drawable dt, Drawable dr, Drawable db) {
        int width = 0;
        int height = 0;

        if (isDrawableAdjustTextWidth) {
            Paint paint = new Paint();
            paint.setTextSize(getTextSize());
            CharSequence text = getText();
            Rect rect = new Rect();
            paint.getTextBounds(text.toString(), 0, text.length(), rect);

            width = rect.width();
        } else if (isDrawableAdjustViewWidth) {
            width = getMeasuredWidth();
        }
        if (isDrawableAdjustTextHeight) {
            Paint paint = new Paint();
            paint.setTextSize(getTextSize());
            CharSequence text = getText();
            Rect rect = new Rect();
            paint.getTextBounds(text.toString(), 0, text.length(), rect);

            height = rect.height();
        } else if (isDrawableAdjustViewHeight) {
            height = getMeasuredHeight();
        }

        int h = mDrawableHeight;
        int w = mDrawableWidth;

        if (dt != null) {
            if (h == 0) {
                h = width * dt.getIntrinsicHeight() / dt.getIntrinsicWidth();
            }
            dt.setBounds(0, 0, width, h);
        }
        if (db != null) {
            if (h == 0) {
                h = width * db.getIntrinsicHeight() / db.getIntrinsicWidth();
            }
            db.setBounds(0, 0, width, h);
        }

        if (dl != null) {
            if (w == 0) {
                w = height * dl.getIntrinsicWidth() / dl.getIntrinsicHeight();
            }
            dl.setBounds(0, 0, w, height);
        }
        if (dr != null) {
            if (w == 0) {
                w = height * dr.getIntrinsicWidth() / dr.getIntrinsicHeight();
            }
            dr.setBounds(0, 0, w, height);
        }

        setCompoundDrawables(dl, dt, dr, db);
    }

    @Override
    public void setTextColor(@ColorInt int color) {
        super.setTextColor(color);

        refreshCompoundDrawables();
    }

    private void refreshCompoundDrawables() {
        Drawable[] drawables = getCompoundDrawables();
        for (Drawable drawable : drawables) {
            tintDrawable(drawable);
        }

        setCompoundDrawables(drawables[0], drawables[1], drawables[2], drawables[3]);
    }

    public boolean isTintDrawableInTextColor() {
        return isTintDrawableInTextColor;
    }

    public void setTintDrawableInTextColor(boolean tintDrawableInTextColor) {
        if (isTintDrawableInTextColor == tintDrawableInTextColor) {
            return;
        }

        isTintDrawableInTextColor = tintDrawableInTextColor;
        refreshCompoundDrawables();
    }

    public int getDrawableCompatColor() {
        return mDrawableCompatColor;
    }

    public void setDrawableCompatColor(@ColorInt int drawableCompatColor) {
        if (mDrawableCompatColor == drawableCompatColor) {
            return;
        }

        mDrawableCompatColor = drawableCompatColor;
        refreshCompoundDrawables();
    }

    @Override
    public void setChecked(boolean checked) {
        super.setChecked(checked);

        Drawable[] drawables = getCompoundDrawables();
        initDrawables(drawables[0], drawables[1], drawables[2], drawables[3]);
    }

    @Override
    public void toggle() {
        super.toggle();

        Drawable[] drawables = getCompoundDrawables();
        initDrawables(drawables[0], drawables[1], drawables[2], drawables[3]);
    }

    @Override
    protected void drawableStateChanged() {
        super.drawableStateChanged();

        if (isTintDrawableInTextColor) {
            Drawable[] drawables = getCompoundDrawables();

            boolean needRefresh = false;
            for (Drawable drawable : drawables) {
                if (drawable != null) {
                    needRefresh = true;
                    break;
                }
            }

            if (needRefresh) {
                refreshCompoundDrawables();
            }
        }
    }
}

特别注意：自定义控件要在src的value文件中定义attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="VectorCompatTextView">
        <attr name="drawableLeftCompat" format="reference"/>
        <attr name="drawableRightCompat" format="reference"/>
        <attr name="drawableTopCompat" format="reference"/>
        <attr name="drawableBottomCompat" format="reference"/>
        <attr name="tintDrawableInTextColor" format="boolean"/>
        <attr name="drawableCompatColor" format="color|reference"/>
        <attr name="drawableAdjustTextWidth" format="boolean"/>
        <attr name="drawableAdjustTextHeight" format="boolean"/>
        <attr name="drawableAdjustViewWidth" format="boolean"/>
        <attr name="drawableAdjustViewHeight" format="boolean"/>
        <attr name="drawableWidth" format="dimension|reference"/>
        <attr name="drawableHeight" format="dimension|reference"/>
    </declare-styleable>

</resources>

   3.VectorDrawable转换Bitmap

 Bitmap bitmap;
    if (Build.VERSION.SDK_INT>Build.VERSION_CODES.LOLLIPOP){
        Drawable vectorDrawable = context.getDrawable(R.id.img_vector);
        bitmap = Bitmap.createBitmap(vectorDrawable.getIntrinsicWidth(), vectorDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        vectorDrawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        vectorDrawable.draw(canvas);
    }else {
        Drawable drawable = AppCompatDrawableManager.get().getDrawable(context, R.id.img_vector);
        bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        drawable.draw(canvas);
    }

 

四、svg图片引入到项目中

 1.svg图片可以在阿里矢量图中自己下载图标，也可以安装Android studio的插件、将一般图片转换为svg图片，还可以使用第三工具转换图片格式，这个自行百度，，，

 2.引入项目中得操作：res---drawable---new---Vector Asset，然后弹窗选择中选中svg图片

 

可以基本使用了，有时间的话，日后研究一下svg动画，这个毕竟还是挺嗨皮的、比一般动画居然好玩多了！

 

参考文章：https://blog.youkuaiyun.com/dick_zeng/article/details/72473591

                  https://www.jianshu.com/p/0555b8c1d26a

android中使用svg
海阔天空
10-10 1254
android中使用svg
uni-app 如何使用svg
BradenHan的专栏
04-27 1万+
在uni-app中使用SVG（Scalable Vector Graphics）可以采用多种方式，以下是几种常见的方法和步骤，包括直接引用、转换为base64编码、作为组件使用等。下面分别举例说明：虽然uni-app本身可能不直接支持标签，但可以通过以下方式间接使用：a. 作为Image组件的源将SVG文件作为静态资源放入项目中，然后通过组件的属性引用。这种方法适用于静态SVG图像。示例： 确保SVG文件（例如）已放置在项目的目录下。b. 作为Background Image如果需要将SVG作为背景图，可以
2. SVG的使用方式
一名全栈开发工程师
05-09 1314
本文将介绍SVG的几种使用方式，包括实例代码、应用场景以及各自的优缺点。
【HTML】SVG标签的使用方式
最新发布
qq_45687669的博客
02-26 1745
SVG 是一种强大的矢量图形格式，适用于图标、图表、动画等场景。通过掌握基本形状、路径、渐变、动画等特性，可以创建出丰富的图形效果。结合 CSS 和 JavaScript，SVG 的功能更加强大。
svg基本使用
m0_72791534的博客
07-31 2860
简介： 1、前言： 位图：放大会失真图像边缘有锯齿；是由像素点组成；前端的 Canvas 就是位图效果。 矢量图：放大不会失真；使用 XML 描述图形。 对于初学 SVG 的前端来说，可以简单的理解为 “SVG 是一套新标签”。所以可以使用 CSS 来设置样式，也可以使用 JS 对 SVG 进行操作。 在不设置宽高的情况下，默认为300 * 150，当内部元素大于300 * 150时，大于部分会被隐藏 2、viewBox 属性定义了SVG中可以显示的区域。 语法：viewBox=“x y w h”
svg学习
lth002的博客
09-30 1825
SVG（Scalable Vector Graphics）是一种描述二维图形的语言。作为独立格式或与其他XML混合使用时，它使用XML语法，它和pngjpg等位图不同，它是一种矢量图，就算放大任意倍数，也不会出现失真的情况。
svg 响应鼠标时间_使SVG响应
cungui5726的博客
08-21 235
svg 响应鼠标时间For an image format that features infinite scalability, SVG can be a surprisingly difficult format to make responsive: vector images do not adjust themselves to the size of the viewport by d...
如何使用vite-svg-loader
02-23
* 易于使用：使用 Vite-SVG-Loader 只需要几个简单的步骤，就可以轻松地引入 SVG 图像。 * 高性能：Vite-SVG-Loader 可以大大提高应用程序的性能，特别是在需要频繁地引入 SVG 图像的情况下。 Vite-SVG-Loader 是一...
HTML5 SVG分段步骤进度条加载特效
07-31
在实现这个特效时，开发者会使用HTML的`<svg>`元素作为容器，每个步骤则由SVG的 `<circle>` 或 `<path>` 元素表示。通过JavaScript或者CSS3的动画效果，可以控制这些元素的颜色变化、大小调整或其他视觉效果，以模拟...
在 React、Vue项目中使用SVG的方法
11-30
总结起来，要在React和Vue项目中使用SVG，可以采取以下步骤： 1. 学习SVG的基本语法，理解如何创建和编辑SVG图形。 2. 分离SVG代码到单独的文件，通常使用`<symbol>`标签封装图标。 3. 在Vue中，通过`<use>`标签...
Android - 最基础的控件TextView
小柴的回忆
12-25 4361
TextView TextView是一个十分简单和基础的控件，相信大家使用TextView主要就是用来显示文字的， 而创建一个项目的时候，页面显示的就一个内容为Hello World 的 TextView。 TextView的属性 1.android:id
SVG的基本使用方法
scc0413的博客
07-03 4328
SVG的使用方法
setCompoundDrawables不显示图片
qq_33128177的博客
03-17 569
当对textView直接用 tv.setCompoundDrawables(drawable, null, null, null); 设置图片时。图片不会显示出来。因为没有对Drawable设置Bounds。正确代码如下： Drawable drawable = getResources().getDrawable(R.drawable.ic_biyan_nor); drawable.
安卓ImageView显示SVG图片
urstar的专栏
01-07 4084
可能需要跳墙 http://stackoverflow.com/questions/18356098/having-issue-on-real-device-using-vector-image-in-android-svg-android
svg使用技巧
有图有真相
08-08 4095
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
SVG的使用
weixin_54443782的博客
07-16 848
第一个标签是绘制一个可以闭口的盒子，里面的值和最上面的差不多只不过多了一个回到原点的值，最下面的标签是绘制直线，值从左到右是x的初始值，y的初始值，x的重点值，y的终点值。这是一个格式效果如上图所示，rect这个标签是用来设置成正方形，里面的值,x和y是起始位置的xy坐标，width和height是控制正方形的宽和高，fill是填充的颜色，stroke是边的颜色，stroke-width是描边的宽度，rx是以多少为半径画圆，还有一个ry意思是相同的，这两个都加上就可以绘制出椭圆形。好可以绘制直线和折线。..
代码动态改变SVG矢量图颜色
热门推荐
NOT NULL
04-13 1万+
/** * 改变SVG图片着色 * @param imageView * @param iconResId svg资源id * @param color 期望的着色 */ public void changeSVGColor(ImageView imageView,int iconResId,int color){ Drawa
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值