美文网首页
阿里巴巴矢量图标库的简单使用

阿里巴巴矢量图标库的简单使用

作者: 瑟闻风倾 | 来源:发表于2018-10-15 14:40 被阅读5次

1. 从阿里巴巴矢量图标库中下载具体图标的svg文件

「阿里巴巴矢量图标库Iconfont」(http://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=5673)

image.png

2. 在Android Studio中将svg转为Vector Asset

(1)File—>New—>Vector Asset


image.png

(2)点击“Ok”


image.png
(3)点击“Next”后drawable文件夹下生成ic_user.xml
<vector android:height="24dp" android:viewportHeight="1024"
    android:viewportWidth="1024" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#1296db" android:pathData="M768,728.62v-7.88,-11.82c-11.82,-110.28 -122.09,-196.92 -256,-196.92s-244.18,86.65 -256,192.98v23.63c0,43.32 35.45,78.77 78.77,78.77h354.46c43.32,0 78.77,-35.45 78.77,-78.77zM512,1024C228.43,1024 0,795.57 0,512S228.43,0 512,0s512,228.43 512,512 -228.43,512 -512,512zM512,468.68c94.52,0 169.35,-74.83 169.35,-169.35S606.52,126.03 512,126.03s-169.35,78.77 -169.35,173.29 74.83,169.35 169.35,169.35z"/>
</vector>

3. 举例调用新生成的图标文件ic_user.xml

<Button
android:id="@+id/main_top_user"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
android:background="@drawable/ic_user"/>

扩展:

「在线 SVG 编辑器Method Draw」(http://editor.method.ac/)

相关文章

网友评论

      本文标题:阿里巴巴矢量图标库的简单使用

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