Android SVG

SVG 图像技术(Scalable Vector Graphics ,可缩放的矢量图形)是目前较为新颖的图像文件格式,基于 XML 框架,具有以下优势。

  • 无损的扩展分辨率
  • 文件体积小
  • 支持动画

在 Android 系统中, SVG 图像技术的实现方式是 Vector 图像,我们在写应用时用到的很多 .png 格式的图标通常都要准备两个高低分辨率的图片,这是使用 SVG 图像则可有效的缩小应用的体积。下面看看如何使用和生成 Vector 图像。

SVG 图片

  1. 获取 .svg 格式的图像文件,这里推荐一个图标网站 阿里巴巴矢量图标库
  2. 创建图像,在 Android Studio 中,依次选择:【 file 】/【 New 】/【 Vector Asset 】,勾选 Local file 并在电脑本地选择下载好的文件。
Android SVG_第1张图片
  1. 设置进布局代码中



    


Android SVG_第2张图片

可以看到图像文件被生成了 ic_milky.xml 代码


    
    
    
    
    
    
    


Vwctor 动画

使用动态图像需要最低支持库( Android Support Library )的版本达到 23.2 及以上。
Android 系统 5.0 及以上( minSdkVersion 21 )

播放 Vector 动态图像需要用到三个文件

Android SVG_第3张图片
  • 静态的图像文件 v_heard.xml


    
    

    
    
    
    
    
    
    
    

  • 动态图像资源文件 v_heard_animation.xml


    
    
    
    
    
    
    
    
    
    

  • 属性动画文件 heart_animator.xml


  1. 布局设置静态的图片



    
  1. 代码设置动画,将动态图片资源文件 v_heard_animation.xml 转化为动画向量图像类 AnimatedVectorDrawable ,将图像添加至图像控件 mIvImageView,调用动态图像的 start() 方法。
public class AnimationActivity extends AppCompatActivity {
    private ImageView mIvImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation);

        mIvImageView = findViewById(R.id.main_iv_image_view);

        animateImage();

        // 重绘动画
        findViewById(R.id.main_b_draw).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                animateImage();
            }
        });
    }

    /**
     * 动画播放图片
     * 只支持5.0以上.
     */
    private void animateImage() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            // 获取动画效果
            AnimatedVectorDrawable mAnimatedVectorDrawable = (AnimatedVectorDrawable)
                    ContextCompat.getDrawable(getApplication(), R.drawable.v_heard_animation);
            mIvImageView.setImageDrawable(mAnimatedVectorDrawable);
            if (mAnimatedVectorDrawable != null) {
                mAnimatedVectorDrawable.start();
            }
        }
    }
}

运行效果如下。

Android SVG_第4张图片

你可能感兴趣的:(Android SVG)