美文网首页
Randall | 五、Vector Asset

Randall | 五、Vector Asset

作者: mrzhqiang | 来源:发表于2017-12-14 10:14 被阅读0次

启动图标

Android工程在第一次建立时,ic_launcher图标是一个Android小机器人,对于Demo来讲,用默认的图标就够了,但对于一些自己的应用,还是希望有不错的个性化启动图标。

AS创建启动图标

找到这个路径:工程 >>> app >>> src >>> main >>> res
资源路径
右击选中New,从右侧展开的列表中,点击Image Asset
形象资产
启动图标设计界面
image.png
简单说下各部分功能
  • Icon Type:选择一种图标类型

  • Name:将在res下的mipmap目录中,创建对应名称的图标文件

  • Foreground Layer:前景图层,通常就是图标本身

  • Background Layer:背景图层,就是图标底下的背景

  • Legacy:遗留,应该是低版本下的遗留图标样式

  • 没有UI,那就利用Text来创建启动图标

    1. 在Foreground Layer中选择Source Asset下Asset Type的Text
    2. 在Text输入框中输入:Randall
    3. 调整Color为ff6e40,这是工程中values目录下color的Accent值
    4. 切换到Background Layer,选中Asset Type的Color选项,跳转Color为ff9800,这是Primary值
    5. 最后开始选择Text输入框后面的字体,通常希望启动图标艺术一点


      自定义启动图标

可能颜色和字体还需要调整,但是总比默认的启动图标好看得多

  • 对于其他类型的图标,比如导航栏/标签栏/通知栏等,请自行探索

应用图标

应用图标是各种操作的简单图例,比如编辑/搜索/刷新等,都应该有一个符合规范的图标。5.0之后的Material Design给我们提供了大量的精美图标,这些已经包括在AS中了。

AS创建应用图标

在 res 的 drawable 目录上右键点击,鼠标移动到弹出来的New上,点击Vector Asset
点击Vector
目前有两种方式创建应用图标
应用图标创建界面
  • 一个是已经存在的Material Design库,点击Icon就可以有很多样式可供选择


    Material Design图标库
  • 一个是从SVG格式的矢量图,或PSD文件(不懂UI但猜测是PS的工程文件)创建

轻松地从Material Design图标库中选择一个返回箭头
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFFFF"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>
返回箭头

里面的很多属性都可以控制,想多大就多大,而且是dp单位,不怕适配不了屏幕,好过于让UI切很多套图,导致应用大小一直降不下来。

总结

事实上一个好的程序猿,可以兼职UI设计师的。

相关文章

网友评论

      本文标题:Randall | 五、Vector Asset

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