精华内容
下载资源
问答
  • 代表成功的图标
    2021-06-12 05:51:12

    本文概述

    网站图标是一个小文件, 其中包含一个或多个用于表示网站或博客的图标。也称为标签图标, 网站图标, URL图标或书签图标。

    此图标实际上显示在地址栏, 浏览器的选项卡, 浏览器历史记录, 书签栏等上。favicon的图像为.ico文件格式。有多种文件格式, 但是所有浏览器都支持.ico格式。

    如何创建一个图标

    以下是创建收藏夹图标的步骤:

    单击以下URL, 创建图标, 请执行以下操作:https://www.favicon.cc/

    成功创建网站图标后, 我们可以通过单击“下载网站图标”选项来下载网站图标。

    3下载后, 文件系统驱动器中提供了一个名为favicon.ico的图标。

    如何在HTML文件中插入Favicon

    1.以下是将favicon.ico图像插入HTML文件的步骤:

    打开HTML文件。然后, 使用以下语法在Windows文件中插入收藏夹图标。

    2.我们必须在html文件的标签中使用以上语法。然后保存文件。

    3.现在。在任何浏览器中打开HTML文件。我们可以在网页上看到该图标。

    Example of favicon

    download.jpg

    立即测试

    输出:

    html-favicon.png

    更多相关内容
  • 主要介绍了C#实现闪动托盘图标效果的方法,涉及C# ImageList控件的使用技巧,需要的朋友可以参考下
  • 今天小编就为大家分享一篇关于Android 8.0系统中应用图标的适配技巧,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
  • 主要给大家介绍了关于Android动态修改应用图标与名称的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 什么是字体图标?字体图标字体-Font字体的工作原理是是什么?字体图标的优缺点?怎么生成字体图标?怎么使用字体图标?本文将为你一一解答。

    什么是字体图标?

    说起字体图标,那就不得不提及 Font Awesome 了。相信大家都用过 Font Awesome 吧!只要我们在项目中引入 Font Awesome,通过给元素标签设置对应的class,就可以在页面上显示出图片来。是不是很神奇很方便呢!

    要想了解 Font Awesome 为什么能做到这样的效果,我们就需要去了解字体图标。实际上,Font Awesome 就是一个字体图标库。

    字体图标

    在讲字体图标前,我们要先看一下字体-Font

    字体-Font

    说到字体,我们优先想到的场景可能是在编写 word 文档时,通过设定不同的字体来让一个文字拥有不一样的“外观”。如下:

    在这里插入图片描述

    改变字体,就可以改变文字的外观。这是大家公认的。

    那字体是如何让文字表现出不同的“外观”的呢?这就需要进一步了解字体的工作原理了。

    字体的工作原理

    如果对《计算机原理》所了解,那你应该知道:在计算机中,所有的数据都是以二进制代码的形式表示。所以,文字在计算机中实际上是一串二进制的编码

    非常粗浅的概况计算机显示文字的流程:

    当计算机要显示文字时,就会拿着文字的编码字体(font)中查找对应的字形(glyph),然后在屏幕中输出查找出来的字形(glyph)

    通过对计算机文字显示流程的了解,我们可以推测出:字体实际是一个“编码-字形(glyph)”映射表。

    所以,只要我们为文字编码设计不同的**字形(glyph)**就可以让文字表现出来不同的外观了。

    字体图标的原理

    Font Awesome 官网对自己有这样一段描述:

    Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

    Font Awesome 通过这段话明确指出了自己本身也是一种字体(font)。

    其实字体图标是一种特殊字体

    前面我们已经明确了:字体是一个“编码-字形(glyph)”映射表,字形(glyph)是单个字符的外观形态。如果我们把**字形(glyph)**设计成想要图标。那么我们就可以像使用文字一样使用图标了。

    字体图标的本质:字体图标是一种特殊的字体,这种字体是一个“编码-图标字形(glyph)”的映射表

    字体图标的优缺点

    优点:

    • 借助字体图标,我们可以如同操作文字一样操作字体图标。如,颜色的切换、大小的改变。
    • 可以将多个图标整合到一个字体文件中,从而减少网页的请求次数。字体图标是“雪碧图”的良好替代品。相较于“雪碧图”,字体图标的使用更加方便、简单、快捷。
    • 对字体图标进行放大不会出现失真、缩小不会浪费掉像素点

    缺点:

    • 由于字体图标本质上就是文字,所以字体图标不能像图片那样有着丰富多彩的颜色,它只能是单色或者渐变色。

    • 字体图标不能像图片一样预览,只能在页面上渲染出来后才能看到具体的形状。

    怎么生成字体图标

    图片生成字体图标,只支持 svg 格式的图片。如果原图的格式不是svg,需要先将图片转为svg格式。

    第一步:其他图片转为 svg 格式图片

    将其他格式的图片转为 svg 图片的方法在有网上有许多网站提供这个功能。如

    此外,我们还可以借助 ps 实现格式的转换。

    第二步:svg 图片生成为字体图标

    这里推荐两个网站

    IcoMoon 使用介绍

    IcoMoon 是一个外国网站,可能速度有点慢,不过IcoMoon 有个好处就是不用注册也可以直接使用。

    1. 首先,进入 IcoMoon 首页,点击右上角的紫色按钮“IcoMoon App”,进入“项目管理”页面
      在这里插入图片描述

    2. 点击左上角的菜单按钮,选择“New Empty Set”,新建一个新的图标集合

      在这里插入图片描述

    3. 点击新建图标集合(Set)的右上角菜单,选择“Import to Set”,上传你的 svg 图片
      在这里插入图片描述

    4. 点击上传成功的图片进行选中操作,然后点击底部的浮动菜单栏中的“Generate Font”,进入字体图标生成页

      在这里插入图片描述

    5. 在字体图标生成页设置class等(也可以直接使用默认的)

    6. 点击底部的浮动菜单的“Download”按钮,即可生成字体图标并下载到本地。
      在这里插入图片描述

    Iconfont-阿里巴巴矢量图标库

    Iconfont 是我们国内的网站,是一个社区网站,在上面有许多优质好看的非商用免费图标。要想使用 IconFont,必须要注册一个账号。

    步骤如下:

    1. 进入 Iconfont 首页,登录注册。点击右上角的“上传”图标进入上传页面
      在这里插入图片描述

    2. 上传 svg 图片

      在这里插入图片描述

    3. 鼠标浮动到你上传成功的图片,在弹出的菜单中点击”购物车“图标选项

      在这里插入图片描述

    4. 打开右侧的”购物车“抽屉弹窗,点击底部的”下载代码“按钮,即可生成字体图标,并下载成功。

      在这里插入图片描述

    字体图标怎么用

    现在我们已经拿到了字体图标源码,接下来就是要在项目使用字体图标了。

    字体图标的使用只要四步即可:

    • 将字体添加到项目中
    • 通过 CSS 将字体导入项目,并配置相应的 CSS class,
    • 将 CSS 引用到项目中
    • 通过 class 在 html 中添加字体图标

    其实,在下载好的字体图标文件中已经替我们完成了二步,我们只需将主要的文件复制进项目中即可。这里的主要文件主要有两种,字体文件以及css。下面以 Iconfont 导出的字体图标为例:
    在这里插入图片描述

    我们只需要将iconfont.cssiconfont.ttf复制到项目即可。

    注意:尽管我们不需要在项目中添加Iconfont.json文件就可以正常使用字体图标了。但是为了便于以后的维护以及查找,建议一同将iconfont.json复制到项目中。

    接下来,我们只需要在 HTML 中引入iconfont.css就可以使用这个字体里面的字体图标了。

    字体的 CSS 代码的说明

    一般的,我们不需要对字体的 CSS 代码做任何改动。或者应该说,最好不要做改动。因为如果改动不对,就会造成字体图标的失效。但是了解里面的配置,以及哪些东西可以改动,也是很有必要的。

    下面,我们以iconfont.css 为例。看看里面到底长什么样子。

    /*
     * 通过 @font-face 指定字体,也就是注册字体
     */
    @font-face {
      font-family: "iconfont"; /* 设置字体名 */
      
      /* 
       * 字体文件的位置,如果你的字体文件和CSS相对位置发生改变,应该同步修正,format 用于指定字体文件的格式
       * src 可添加多个字体文件,这是为了保证兼容性。CSS 解析是从上往下解析的,如果前面的字体文件不被浏览器
       * 支持,就会往下解析另一个字体文件,直至找到可用的字体文件。
       * 写法如下:
       * src: url('iconfont.eot?#iefix') format('embedded-opentype'),
       *      url('iconfont.woff') format('woff'),
       *      url('iconfont.ttf') format('truetype'),
       *      url('iconfont.svg#defineName') format('svg');
       */
      src: url('iconfont.ttf?t=1627688108463') format('truetype'); 
    }
    
    /*
     * 字体的启用
     * 当标签含有类 iconfont 时,强制使用 iconfont 字体 
     */
    .iconfont {
      /*
       * font-family 用于声明使用 iconfont 字体,font-family 的值必须与 @font-face 属性 font-family 的值保持一致。如果对其中一
       * 个改动了另一个也要一并修改。一般的,不建议修改 
       */
      font-family: "iconfont" !important;  
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;  /* 字体锯齿优化属性,详见:https://www.jianshu.com/p/6f022c65775f */
      -moz-osx-font-smoothing: grayscale;
    }
    
    /*
     * 字体图标的启用
     * content 用于声明,要使用 iconfont 字体中,编码为 \ef67 的字形glyph(字体图标)。iconfont 字体中的字体图标编码可以再 iconfont.json 中查询。
     * 类名可以改变,不过不建议修改。因为它是与 iconfont.json 的值以及 Iconfont 网站中的图标名保持一致的。修改了将会导致一致性遭到破坏,不
     * 便于维护
     */
    .icon-aichong02:before {
      content: "\ef67";
    }
    

    通过上面的 CSS 说明,我们有了大致的理解。同时,我们也可以推断出如何在 HTML 中使用字体图标了

    字体图标在 HTML 中使用写法解析

    <!-- 添加 iconfont 类,表明 当前标签要使用 iconfont 字体 -->
    <!-- 添加 icon-aichong02 类,表明当前标签要使用 iconfont 字体的中编号为 \ef67 字形(字体图标)  -->
    <span class="iconfont icon-aichong02"></span>
    

    添加多个字体文件

    有些时候,我们可能需要在项目中添加多个字体文件。这时候有两种处理方法:

    1. 多套字体分别单独引入

    2. 将每套字体的css合并到一个文件中

      @font-face {
        font-family: "iconfont"; /* 设置字体名 */
        src: url('iconfont.ttf?t=1627688108463') format('truetype'); 
      }
      
      @font-face {
        font-family: "iconfont"; /* Project id  */
        src: url('iconfont2.ttf?t=1627691132980') format('truetype');
      }
      
      .iconfont {
        font-family: "iconfont" !important;  
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;  /* 字体锯齿优化属性,详见:https://www.jianshu.com/p/6f022c65775f */
        -moz-osx-font-smoothing: grayscale;
      }
      
      .icon-aichong02:before {
        content: "\ef67";
      }
      
      .icon-date:before {
        content: "\e609";
      }
      

    注意:尽管可以添加多个字体文件,不过不建议这样做。因为字体文件过多,就会增加静态资源的请求次数。应该将所有的字体图标合并生成为一个字体文件。

    结语

    以上就是关于字体图标的解析了。其实关于字体的图标的使用方法,在下载的文件中也有案例展示出来的。例如 Iconfont 的 demo_index.html 文件。在浏览器打开后,你就可以看到上面给出了当前字体文件的使用方法。而且还给出了三种使用方法:

    • Unicode
    • Font class
    • Symbol

    因为 Font class 方法是目前使用最为广泛的的,且大多数的UI组件框架也是使用这种方法,所以本文就只讲了 Font class 方法。如果对那两种比较感兴趣,可以自行了解。

    希望这篇文章能帮助你。其中可能存在错误点,见谅。

    在这里插入图片描述

    参考

    展开全文
  • Eclipse小图标释义

    2015-06-13 15:04:57
    Eclipse小图标的释义。Eclipse里的各种小图标的含义,有中文英文
  • Android应用图标微技巧,8.0系统中应用图标的适配

    万次阅读 多人点赞 2018-03-13 07:56:38
    很高兴告诉大家,Android Studio 3.0中已经内置了8.0系统应用图标适配的功能,如果你已经安装了Android Studio 3.0的话,那么恭喜你,你已经成功了百分之九十了。如果你还在用老版的Android Studio,那么赶快去升级...

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/79417483

    本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 郭霖 即可关注,每个工作日都有文章更新。

    大家好,2018年的第一篇文章到的稍微有点迟,也是因为在上一个Glide系列结束之后一直还没想到什么好的新题材。

    现在已经进入了2018年,Android 8.0系统也逐渐开始普及起来了。三星今年推出的最新旗舰机Galaxy S9已经搭载了Android 8.0系统,紧接着小米、华为、OV等国产手机厂商即将推出的新年旗舰机也会搭载Android 8.0系统。因此,现在已经是时候需要让我们的应用程序对Android 8.0系统进行适配了。

    其实在去年Android 8.0系统刚推出的时候,我就仔细翻阅过Google官方的功能变更文档。变更项着实不少,但是真正需要我们去进行功能适配的地方却并不多。总结了一下,最主要需要进行适配的地方有两处:应用图标和通知栏。那么我们就分为上下两篇来分别对这两处功能适配进行讲解,先从应用图标开始。

    为什么要进行应用图标适配?

    可能有些朋友觉得困惑,应用图标这种东西从Android远古时代就已经有了,而且功能格外的简单,就是放张图片而已,这有什么好适配的呢?但实际上,在当前Android环境下,应用图标功能是极其混乱的。

    如果说要讲一讲手机应用图标的历史,其实要从苹果开始讲起。在上世纪80年代,苹果还在设计Lisa和Macintosh电脑的时候,乔布斯就是个圆角矩形的狂热支持者。当时苹果的工程师写出了一套绝妙的算法,可以在电脑上绘制出圆和椭圆,所有观看者都被震惊了,除了乔布斯,因为乔布斯觉得圆和椭圆虽然也不错,但是如果能绘制出带圆角的矩形就更好了。当时那位工程师觉得这是不可能实现的,而且也完全用不着圆角矩形,能满足基本的绘图需求就可以了。乔布斯愤怒地拉着他走了3条街,指出大街上各种应用圆角矩形的例子,最后那位工程师第二天就做出了绘制圆角矩形的功能。

    因此,在2007年一代iPhone诞生的时候,所有应用程序的图标都毫不出乎意料地使用了圆角矩形图标,即使是第三方应用也被强制要求使用圆角矩形图标,并且这一规则一直延续到了今天的iOS 11当中,如下图所示:

    相反,Android系统在设计的时候就不喜欢苹果这样的封闭与强制,而是选择了自由与开放,对应用图标的形状不做任何强制要求,开发者们可以自由进行选择:

    可以看到,在Android上,应用图标可以是方形、圆形、圆角矩形、或者是其他任意不规则图形。

    本来就是两家公司不同的设计理念,也说不上孰高孰低。但由于Android操作系统是开源的,国内一些手机厂商在定制操作系统的时候就把这一特性给改了。比如小米手机,就选择了向苹果靠拢,强制要求应用图标圆角化。如果某些应用的图标不是圆角矩形的呢?小米系统会自动给它加上一个圆角的效果,如下图所示:

    小米的这种做法看上去是向苹果学习,但实际上是相当恶心的。因为谁都可以看出来,这种自动添加的圆角矩形非常丑,因此很多公司就索性直接将应用的图标都设计成圆角矩形的,正好Android和iOS都用同一套图标还省事了。

    但是这就让Google不开心了,这不是变向强制要求开发者必须将图标设计成圆角矩形吗?于是在去年的Google I/O大会上,Google点名批评了小米的这种做法,说其违反了Android自由和开放的理念。

    除了变向强制要求应用图标圆角化,小米的这种处理方式还有一个弊端,就是如果应用图标的圆角弧度和小米系统要求的不同,那么会出现异常丑陋的效果:

    看到这样的应用图标,真的是一脸尴尬症都要犯了。就因为这两款应用图标的圆角弧度设计得大于了小米系统要求的圆角弧度,就被自动添加上了这样丑陋的白边。

    问题是已经存在了,那么应该怎么解决呢?说实话,这确实是一个长期以来都让人头疼的问题,Google多年来对此也是睁一只眼闭一只眼。终于在Android 8.0系统中,Google下定决心要好好整治一下Android应用图标的规范性了,今天我们就来学习一下。

    8.0系统的应用图标适配

    这个问题对于Google来说还是挺难解决的。因为Google一直在强调自由与开放,那么小米强制要求所有应用图标都必须圆角化也是人家的自由呀,你不准人家这么干是不是本身就违背了自由和开放的理念呢?当然我们在这里讨论这个,有点像讨论先有鸡还是先有蛋的感觉,不过Google还是想出了一套完美的解决方案。

    从Android 8.0系统开始,应用程序的图标被分为了两层:前景层和背景层。也就是说,我们在设计应用图标的时候,需要将前景和背景部分分离,前景用来展示应用图标的Logo,背景用来衬托应用图标的Logo。需要注意的是,背景层在设计的时候只允许定义颜色和纹理,但是不能定义形状。

    那么应用图标的形状由谁来定义呢?Google将这个权利就交给手机厂商了。不是有些手机厂商喜欢学习苹果的圆角图标吗?没问题,由于应用图标的设计分为了两层,手机厂商只需要在这两层之上再盖上一层mask,这个mask可以是圆角矩形、圆形或者是方形等等,视具体手机厂商而定,就可以瞬间让手机上的所有应用图标都变成相同的规范。原理示意图如下:

    可以看到,这里背景层是一张蓝色的网格图,前景层是一张Android机器人Logo图,然后盖上一层圆形的mask,最终就裁剪出了一张圆形的应用图标。

    我一定要适配吗?

    有些朋友可能会觉得这种分成两层的应用图标设计太过于麻烦,不适配可以吗?也有些朋友可能会说,自己的APP并没有做过应用图标适配,在Android 8.0手机上也照样跑得好好的。

    事实上,这个新功能Google是准备让它慢慢过渡的,而不是一次性就强推给所有的开发者。如果你的APP中的targetSdkVersion是低于26的,那么就可以不用进行应用图标适配,Android 8.0系统仍然是向下兼容的。但是如果你将targetSdkVersion指定到了26或者更高,那么Android系统就会认为你的APP已经做好了8.0系统的适配工作,当然包括了应用图标的适配。

    如果你将targetSdkVersion指定到了26,但是却没有进行Android 8.0系统的应用图标适配,那么会出现什么样的效果呢?这里我举几个反面示例:

    这是Google Pixel手机上的截图,操作系统是Android 8.0。可以看到,这两个应用的图标都非常奇怪,本来设计的都是一个圆角矩形的图标,但是却又在外面套上了一个白色的圆圈。为什么会出现这种情况呢?就是因为这两个应用都将targetSdkVersion指定到了26以上,但是却又没有做8.0系统的应用图标适配,而Pixel手机设定的mask是圆形的,所以就自动在应用图标的外层套了一个白色的圆圈。

    由此可以看出,爱奇艺和饿了么这两款应用都是没有在Pixel上进行兼容性测试的。不过考虑到它们都是只在国内市场提供服务,因此也情有可原。

    当然了,国内的Android 8.0手机很快也要开始普及了,我相信没有任何人会希望自己的APP也出现上述的效果,因此下面我们就来开始具体学习,如何进行8.0系统的应用图标适配。

    新建一个项目

    如果有人问我8.0系统应用图标适配到底难不难?这里我会回答,一点都不难。相信所有看完这篇文章的人立马就能学会,但前提是你需要有一个好的工具——Android Studio 3.0或更高版本。

    很高兴告诉大家,Android Studio 3.0中已经内置了8.0系统应用图标适配的功能,如果你已经安装了Android Studio 3.0的话,那么恭喜你,你已经成功了百分之九十了。如果你还在用老版的Android Studio,那么赶快去升级一下,然后再接着看这篇文章。

    好的,那么现在我们就用Android Studio 3.0来新建一个项目,就叫它IconTest吧。

    创建好项目之后,打开app/build.gradle文件检查一下,确保targetSdkVersion已经指定到了26或者更高,如下所示:

    apply plugin: 'com.android.application'
    
    android {
        compileSdkVersion 26
        defaultConfig {
            applicationId "com.example.icontest"
            minSdkVersion 15
            targetSdkVersion 26
            versionCode 1
            versionName "1.0"
            testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        }
    }

    可以看到,这里我在创建新项目的时候默认targetSdkVersion就是26,如果你是低于26的话,说明你的Android SDK有些老了,最好还是更新一下。当然如果你懒得更新也没关系,手动把它改成26就可以了。

    接下来打开AndroidManifest.xml文件,代码如下所示:

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.example.icontest">
    
        <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
            <activity android:name=".MainActivity">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
        </application>
    
    </manifest>

    这里我们需要关注的点是android:icon这个属性,通过这个属性,我们将应用的图标指定为了mipmap目录下的ic_launcher文件。另外大家可能注意到还有一个android:roundIcon属性,这是一个只适用在Android 7.1系统上的过渡版本,很快就被8.0系统的应用图标适配所替代了,我们不用去管它。

    刚才说了,应用图标被指定为了mipmap目录下的ic_launcher文件,那么我们快去看下这个文件吧:

    这里虽然目录很多,但是相信任何只要是入了门的Android开发者都能看得懂。唯一需要我们留意的就是mipmap-anydpi-v26这个目录,这个目录表示什么意思呢?就是Android 8.0或以上系统的手机,都会使用这个目录下的ic_launcher来作为图标。

    你会发现,mipmap-anydpi-v26目录下的ic_launcher并不是一张图片,而是一个XML文件,我们打开这个文件看一下,代码如下所示:

    <?xml version="1.0" encoding="utf-8"?>
    <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
        <background android:drawable="@drawable/ic_launcher_background" />
        <foreground android:drawable="@drawable/ic_launcher_foreground" />
    </adaptive-icon>

    这是一个8.0系统应用图标适配的标准写法,在<adaptive-icon>标签中定义一个<background>标签用于指定图标的背景层,定义一个<foreground>标签用于指定图标的前景层。

    那么我们分别来看一下背景层和前景层分别都是些什么内容吧,首先打开ic_launcher_background文件,内容如下图所示:

    这是一个使用SVG格式绘制出来的带纹理的底图。当然如果你看不懂这里面的代码也没有关系,因为我也看不懂。SVG格式的图片都是使用AI、PS等图像编辑软件制作之后导出的,基本没有人可以手工编写SVG图片。

    当然,背景层并不是一定要用SVG格式的图片,你也可以使用普通的PNG、JPG等格式的图片,甚至是直接指定一个背景色都可以。

    看完了背景层接着我们来看前景层,打开ic_launcher_foreground文件,内容如下所示:

    类似地,这里也是使用SVG格式绘制出了一个Android机器人的Logo,并且这个机器人还是带投影效果的。当然了,前景层我们也是可以使用PNG、JPG等格式的图片的,待会儿会进行演示。

    好的,现在已经把应用图标相关部分的代码都解释完了,那么这样一个刚刚创建完成的空项目运行起来到底会是什么样的效果呢?我们跑一下看看就知道了,如下图所示:

    可以看到,这就是一个前景层盖在背景层上,然后再被圆形mask进行裁剪之后的效果。

    好的,那么现在剩下的问题就是,我们如何才能对自己的应用图标在Android 8.0系统上进行适配?

    开始适配

    看到爱奇艺的8.0系统应用图标适配工作做得这么差,我就准备拿爱奇艺来做为例子了,我们一起来帮爱奇艺的Android版做个漂亮的应用图标适配吧。

    那么很显然,根据8.0系统的应用图标设计,我们需要准备一个前景层和一个背景层才行。

    前景层也就是爱奇艺的Logo了,这里我通过Photoshop把爱奇艺的Logo图取了出来。

    由于这是一张背景透明的图片,如果直接贴到文章里面就一片白色,啥也看不见了,于是我只好在文章里贴了一张带灰色背景的图片。如果大家需要获取爱奇艺这张前景图的原图,可以点击 这里 获取。

    解决了前景层,接下来我们来看背景层。其实背景层比前景层就简单多了,一般如果没有什么特殊需求的话,背景层直接使用某种纯色就可以了。

    这里我用Photoshop吸取了一下爱奇艺原始应用图标的背景色,值是#04ca00。当然,爱奇艺的背景色并不是完全的纯色,而是有细微的颜色渐变的。不过这里我们只是举例讲解而已,就不追究这些细节了。

    那么现在前景层和背景层都准备好了,接下来我们正式开始进行8.0系统的应用图标适配。重新回到IconTest项目当中,然后按下Windows:Ctrl+Shift+A / Mac:command+shft+A 快捷键,并输入Image Asset,如下所示:

    点击回车键打开Asset Studio编辑器,在这里就可以进行应用图标适配了。

    这个Asset Studio编辑器非常简单好用,一学就会。左边是操作区域,右边是预览区域。

    先来看操作区域,第一行的Icon Type保持默认就可以了,表示同时创建兼容8.0系统以及老版本系统的应用图标。第二行的Name用于指定应用图标的名称,这里也保持默认即可。接下来的三个页签,Foreground Layer用于编辑前景层,Background Layer用于编辑背景层,Legacy用于编辑老版本系统的图标。

    再来看预览区域,这个就十分简单了,用于预览应用图标的最终效果。在预览区域中给出了可能生成的图标形状,包括圆形、圆角矩形、方形等等。注意每个预览图标中都有一个圆圈,这个圆圈叫作安全区域,必须要保证图标的前景层完全处于安全区域当中才行,否则可能会出现图标被手机厂商的mask裁剪掉的情况。

    为了让大家能够更加直观地看到操作,这里我使用一张GIF图来演示操作的过程:

    最终,Android Studio会自动帮我们生成适配8.0系统的应用图标,以及适配老版本系统的应用图标,我们甚至一行代码都不用写,一切工作就已经完成了。感兴趣的朋友可以自己到mipmap目录下面去观察一下Android Studio帮我们生成了哪些东西,这里就不带着大家一一去看了。

    最后,让我们来运行一下程序,并且和正版爱奇艺的应用图标放在一起对比一下吧:

    可以看到,做过8.0系统应用图标适配之后,效果明显要好看太多了,也希望爱奇艺的官方APP也能早日完成适配吧。

    好了,今天这篇文章就到这里,相信大家都已经轻松掌握了Android 8.0系统的应用图标适配,下篇文章会讲解Android 8.0系统的通知栏适配,感兴趣的朋友请继续阅读 Android通知栏微技巧,8.0系统中通知栏的适配

    关注我的技术公众号,每天都有优质技术文章推送。关注我的娱乐公众号,工作、学习累了的时候放松一下自己。

    微信扫一扫下方二维码即可关注:

            

    展开全文
  • 一般情况下,win10系统磁盘图标都是一样的,有些人觉得太单一了,为了让我们的电脑更具个性化,想要更换硬盘图标。那么win10系统硬盘图标怎么换?网上相关教程内容比较少,为满足大家需求,现在系统城小编分享一下...

    一般情况下,win10系统磁盘图标都是一样的,有些人觉得太单一了,为了让我们的电脑更具个性化,想要更换硬盘图标。那么win10系统硬盘图标怎么换?网上相关教程内容比较少,为满足大家需求,现在系统城小编分享一下Win10更换磁盘图标的详细步骤。

    具体操作步骤为:下载ico图标→创建文本文档→输入代码,完成。

    具体方法如下:

    1、从网上下载 .ico 后缀的图标文件;

    f8cb1fd445e51ec7447ad70001eb2ef8.png

    2、将需要替换图标复制到硬盘分区根目录下,比如要修改D。把ico图标复制到D盘即可;

    3、在需要修改图标的磁盘中新建一个文本文档并打开,输入:

    [autorun]

    X代表的是想要替换的图标名称

    bfc061ab4b4fd86665c7e3d2c096a4e2.png

    4、点击【文件】-【另存为】,在左侧点击当前磁盘路径,将【保存类型】修改为“所有文件”,将文件名修改为:autorun.inf 点击保存;

    1d35c9b49ee49cc191974e94a112f278.png

    5、C盘(系统分区下)是不能直接建立autorun.inf的文件,需要在其他地方做好了文本文档和命名好的图标文件,然后一块复制过去即可;

    6、完成后,重启电脑就能看到个性化的效果了,想要恢复Windows的默认图标,只要删除autorun.inf文件即可。

    参考上述教程设置后,windows10系统成功修改“本地磁盘”图标,想让自己电脑图标变得与众不同的小伙伴快去试试吧!

    展开全文
  • 然后发现程序运行页面的图标更改成功了,但是桌面上的应用程序图标还是原来的。 原因:手机中之前安装过这个软件,在手机中存有原来这个软件的图标,当我们换图标时,它直接调用原来版本的软件的图标。 解决办法:...
  • 1.找到桌面上的计算机图标,选择并...3.然后在计算机窗口的右边栏会弹出设备管理器的具体分支项,找到“网络适配器”并点击它前面的三角形图标来展开这个“网络适配器”。4.接下来会看到“网络适配器”下面有网卡的...
  • MFC中使用任务栏显示图标表示程序

    千次阅读 2017-09-29 05:58:47
    在任务栏中通过图标表示应用程序,就是当按下应用程序窗口的最小化按键时,隐藏窗口,并在任务栏中显示图标表示该应用程序;当鼠标点击了任务栏中的图标时,显示窗口,并删除任务栏中的图标。 1 在任务栏中显示图标...
  • 主要介绍了Android 8.0系统中应用图标的适配微技巧 ,需要的朋友可以参考下
  • WampServer图标橙色

    千次阅读 2018-12-26 14:19:00
    通过一篇文章 “Wampserver下载安装教程” 相信大家已经会自行安装Wampserver了,但是 安装完集成环境wampserver程序后的小图标为绿色表示安装成功,如果为橙色或者红色则表示安装出现问题。我之前在安装的过过程...
  • 最近苹果推出 App Store 产品页的新功能,其中在 app 产品页的不同版本上使用不同的图标,通过 A/B Test 找出效果最佳的版本。但是苹果文档并没有给出详细的教程,怎么在 Xcode 中集成多套图标呢?这就是本文要讲解...
  • 很容易更新或者插入不成功,导致报错。都快崩溃了,但是还好终于解决了这种鬼问题。资料显示原因是,MYSQL 5.5 之前, UTF8 编码只支持1-3个字节,只支持BMP这部分的unicode编码区,而emoji图标恰好是4个字节的编码...
  • zTree是一个依靠 jQuery 实现的多功能 “树...但是久而久之,我发现ztree的一个缺点,就是它的自定义图标只能用图片,不能支持字体图标。首先使用图片,修改很不灵活,其次也比较浪费资源。 也是由于项目需要,所...
  • 图标设计原则 重点 (Top highlight)More in the iconography series:• Foundations of Iconography• 5 Ways to Create a Settings Icon• Icon Grids & Keylines Demystified• Pixel-Snapping in Icon Design...
  • 微信小程序icon图标使用详解

    千次阅读 2021-12-03 14:48:04
    icon 在微信小程序中用来显示图标
  • 一、阿里文件图标 目前在阿里的网站上下载的字体文件自带有Unicode编码,可以直接在网页上查看。 Font Awesome网站下载的字体文件也带有编码http://www.bootcss.com/p/font-awesome/ ttf文件名称不重要,可以任意...
  • 在咱们使用 IntelliJ IDEA 创建文件的时候, 随着文件类型的不同,其显示的图标也不相同。例如,咱们分别创建 Java、Interface、Enum 和JavaScript文件,如下图所示: 如上图所示,显然不同的文件类型,其显示的...
  • 此外,为用户提供良好的整体体验对这些应用程序的成功起着重要作用。为了实现这一点,我们还需要更好的用户界面(UI)。 作为开发人员,我们必须确保应用程序的外观和视感符合更高的标准,以便吸引新用户并保留现有...
  • 我在做项目的时候恰巧又碰到了需要再加一个字体图标的情况,其实简单的方法有很多种,不一定是要像我之前的博文一样单独下载到本地又改这文件那文件的,其实直接复制svg代码,然后粘贴到项目中需要该字体图标的地方...
  • 本文主要介绍android应用程序安装后图标不显示的几个可能原因。   自己写的程序突然安装后图标不见了,在应用程序安装中能找到,但是桌面上就是没有图标,启动只能从最近列表中其中。。一般这种情况只会在...
  • thinkphp开发的一个项目,登录成功后又跳转到登录页面,在提交信息后输出session都是正常的,没有问题,但是页面跳转后,session出现丢失现象,无法正常完成登陆。通过查找资料,发现原来是bom头的原因。受COOKIE送...
  • XP操作系统怎样去除桌面图标下的底色 很多种解决方法,如果都不行的话,请新建一个用户名登陆,彻底解决问题
  • fiddler会话图标

    2020-01-19 10:14:25
    用了fiddler蛮久了,之前没有做过把postman代理到fiddler上,现在这家公司常用postman,就加了postman代理到fiddler上,但是出现过...注:fiddler会话图标含义如下: 会话条目的默认文本颜色来自HTTP状态(红色表示...
  • ubuntu为程序增加图标

    千次阅读 2021-12-15 14:21:50
    现在我要给它加一个图标: 首先: cd /usr/share/applications 然后: sudo gedit xxx.desktop 这里的xxx可以起任意名字,但不要跟已有的重复 然后在打开的文件中写道: [Desktop Entry] Name = JS #程序名称 ...
  • 点击“确定”按钮,如图所示:然后可以看到,刚才的图标以及变了样,我们只需要将刚才的步骤重新操作一遍,把图标换成原来的就可以了,如图所示:解决多个黑色方块图标 方法1这个方法是最简单,最省时...
  • ico图标制作的在线工具

    千次阅读 2022-05-17 17:46:05
    最近在网上发现一个ico图标制作的在线工具,它可以制作普通网站ico图标,也可以制作windows桌面专用的ico图标文件,非常方便快捷,一点点图片处理的专业知识都不需要了:智能压缩图片,ico图标制作,生成圆角图,制作...
  • Android 高德地图定位以及自定义定位图标的显示 由于高德地图中默认的定位图标是高德地图的logo,我这边想要换一种图标,就有了新的需求。 首先先设置定位相关信息 下面代码之前确认地图控件已经被初始化。 /** * ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 108,530
精华内容 43,412
关键字:

代表成功的图标