但是你可以在所有的设备上通过为每个图标提供多尺寸 来为你的图标提供更好的视觉效果。当你的app运行时，安卓检查设备屏幕的特性并且加载适当的指定密度的你app中的资源文件。...因为你将为每个图标实现多个尺寸以支持多个不同的密度，下面的设计指南使用 dp 作为图标尺寸的 计量单位 ，它是以中等密度（MDPI）屏幕作为 像素尺寸的基础。 ?...颜色: #FFFFFF启用时: 80% 不透明度禁用时: 30% 不透明度 小的/上下文关系 的图标 在你的app的内部，使用小图标去表现活动，或者为指定的项提供状态。...特别的，对于为每个图标类型使用公共的前缀来说，它是有帮助。例如： ? 注意： 你不需要为一些类型使用共享的前缀，仅在对你有便利时才这样做。...从最终的资源（资产asserts)中删除不需要的元数据 尽管安卓SDK工具将会自动的压缩 png图像资源（PNGs），当打包应用程序资源到二进制的应用程序时，一个好的实践是，从你的PNG资源中移除不必要的头
1.2 DP(device pixels) 设备像素（物理像素），顾名思义，显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了...一般将DPR为2的屏幕称为2倍屏，DPR为3的屏幕称为3倍屏。 iphoneX的DPR是3，也就是3倍屏幕 面对相同主屏尺寸，不同主屏分辨率的设备，同一张200*200px的图片为何显示的一样？...img，backgorund-image和canvas渲染方式有差异吗 内存观察方式：通过chrome的任务管理器，查看当前tab的内存占用情况 使用资源： ?...图片引起的内存占用情况，如果说有多张高性能的图片可以考虑通过canvas进行渲染，但是只有单张的话就没有那么大的必要了，更好的方式是通过设备的具体情况来做响应式的图片，比如使用img的src，根据设备情况来渲染不同的倍图.../image/oranges@3x.png 2x" /> 最后想要优化图片性能，还是要从压缩图片体积下手，通过减少请求等待时间的方式，提供更快的展示体验，而图片压缩都已有有许多完备方案，不同的图片格式有着不同的编码方式
因此，对于固定分辨率的位图，我们只了解每个像素的颜色，却不理解其中包含的内容。然而，矢量图像是通过在抽象大小的画布上定义一系列形状来描绘图像。 为什么使用矢量图？...矢量资源有三大好处，分别是： 好用 占用资源少 动态 好用 矢量图可以优雅的调整大小；这是因为它们将图像绘制在抽象大小的画布上，你可以放大或缩小画布，然后重新绘制对应尺寸的图像。...放大的位图（左）与放大的矢量图（右） 这就是为什么在 Android 上我们需要为不同密度的屏幕提供多个版本的位图资源： res/drawable-mdpi/foo.png res/drawable-hdpi...如果我们能够使用矢量，那么这将只有其大小的 30%，而且会取得更好的效果： Raster: Download Size = 53.9KB (Raw file size = 54.8KB) Vector:...我们将在以后的文章中深入讨论这个主题。 为什么不用 SVG？ 如果你曾经使用矢量图像格式，你可能会遇到网络上的行业标准 SVG 格式（可缩放矢量图形）。
支持每种密度的 位图可绘制对象的相对大小 适配方案 密度独立性 应用显示在密度不同的屏幕上时，如果它保持用户界面元素的物理尺寸（从 用户的视角），便可实现“密度独立性” 。...Android 系统可帮助您的应用以两种方式实现密度独立性： 系统根据当前屏幕密度扩展 dp 单位数 系统在必要时可根据当前屏幕密度将可绘制对象资源扩展到适当的大小 nodpi：它可用于您不希望缩放以匹配设备密度的位图资源...不要在应用代码中使用硬编码的像素值 不要使用 AbsoluteLayout（已弃用), 而是考虑线性布局使用权重分配宽高, support库中约束布局, 可以是布局更加扁平化 为不同屏幕密度提供替代位图可绘制对象...动态设置 有一些情况下，我们需要动态的设置控件大小或者是位置，比如说 popwindow 的显示位置和偏移量等，这个时候我们可以动态的获取当前的屏幕属性，然后设置合适的数值 使用官方百分比布局 dependencies...例如，如果要将用户界面设计成在手机上显示单面板，但在 7 英寸平板电脑、电视和其他较大的设备上显示多面板，那么我们就需要提供以下文件： res/values-large/layout.xml:
例如，为不同的尺寸和分辨率的屏幕提供不同的图片资源，这样可以让你的应用在不同的设备上显示最适合此设备分辨率/尺寸的不同大小的图片。...正如DIP它的名字，它表示一种逻辑单位，和实际pxiel之间存在着转换关系，系统会自动在不同设备像素密度时把以dp为单位的大小缩放为合适的具体像素值。...dp为单位的大小，或者为wrap_content时，在不同的像素密度的屏幕上其显示的像素大小是不一样的。...Android中提供两种方式在屏幕上绘制图像：Canvas、和Drawable。...如果不指定，那么系统以边长除去两边一像素的线段作为填充区域的线段。 ? 由于Nine-patch图片的特殊使用方式，应该注意它的最小尺寸，保证有一个点的可拉伸区域。
分给他们后还得为每个View排好在屏幕上的位置，难上加难。 停一停，想一想，如果是你，你怎么解决这个问题？...DecorView知道，不同的View为了完成自己的交互任务所需要的屏幕区域大小是不同的，所以DecorView在确定给每个View分配的屏幕区域大小时，是允许View参与进来，与它一起商量的。...至于怎么分，不同的ViewGroup有不同的分法，总体来看，可说是有总有分。...下面我们举例说明，假设Size是100dp， Mode的取值有三种，它们代表了ViewGroup的总体态度： EXACTLY 表示，ViewGroup对View说，你只能用100dp，这可是你的使用者要求的哦...准备图片时，使用了一个小技巧，就是时针和分针，你所看到的图像只是图片的一半，在图像的下方，还有同样大小的空白，这个是做什么用的呢？主要是为了绘制图片时的方便，待会儿就可以明白了。 材料齐全，开工！
在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、 PPI、 DPI、 DP、 DIP、 DPR、视口等等，你真的能分清这些概念的意义吗？...像素可以作为图片或电子屏幕的最小组成单位。 下面我们使用 sketch打开一张图片： ? 将这些图片放大即可看到这些像素点： ? 通常我们所说的分辨率有两种，屏幕分辨率和图像分辨率。...如果黑色手机使用了视网膜屏幕的技术，那么显示结果应该是下面的情况，比如列表的宽度为 300个像素，那么在一条水平线上，白色手机会用 300个物理像素去渲染它，而黑色手机实际上会用 600个物理像素去渲染它...4.7 获取浏览器大小 浏览器为我们提供的获取窗口大小的 API有很多，下面我们再来对比一下： ? window.innerHeight：获取浏览器视觉视口高度（包括垂直滚动条）。...如果视觉视口为 375px，那么 1vw=3.75px，这时 UI给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75/3.75=20vw。
- 具有可伸缩区域的PNG图片，以允许适当调整大小 ⑤ Vector Drawables - 定义复杂的基于XML的矢量图像 下面让我们一一介绍它们的使用方法 Shape Shape Drawable...Drawable List 状态集合 StateListDrawable是一个在XML中定义的可绘制对象，根据对象的状态，使用多个不同的图像来表示相同的图形。...例如，Button控件可以以几种不同的状态之一存在（按下，有焦点或不可点击），并且使用Drawable的状态列表，可以为每个状态提供不同的背景图像。...NinePatch是具有.9.png文件扩展名的图像，表示这是一个可伸缩的PNG图像。该文件与正常的PNG文件没有什么不同，除了您将添加细黑线以指示图像的垂直和水平“可拉伸”和“填充”区域。...这意味着使用基于矢量的图像，在位图图像的情况下，你只需要一个drawable file，而不是每个屏幕密度的drawable file。
1、布局优化 屏幕上的某个像素在同一帧的时间内被绘制了多次。在多层次的 UI 结构里 面，如果不可见的 UI 也在做绘制的操作，这就会导致某些像素区域被绘制了多 次。...这就浪费大量的 CPU 以及 GPU 资源。 1.0、防止过度绘制 如果父控件有颜色，也是自己需要的颜色，那么就不必在子控件加背景颜色 。...我们可以使用可绘制对象，某些图像不需要静态图像资源；框架可以在运行时动态绘制图像。...所有这些工具都可以减少 PNG 文 件的大小，同时保持感知的图像质量。...一个 100 字节的文件可以生成与 屏幕大小相关的清晰图像。 但是，系统渲染每个 VectorDrawable 对象需要花费大量时间 ，而较大的图像需要更长的时间才能显示在屏幕上。
会根据设备的屏幕密度，将这一数值转换为不同的像素数量，那么对图片来说是如何操作的呢？...我们肯定不希望出现这种情况，要解决该问题，我们可以针对每个密度类别，为同一图片提供不同尺寸的版本，这样会在所有设备上都能显示非常清晰的图片。...我们来举个例子： 对中密度设备来说 1 dp = 1 px，所以如果我们希望图片的尺寸是 48dp x 48dp，那么该图片的 mdpi 版本应该是 48px x 48px 对于高密度设备来说 1 dp...= 1.5 px，所以如果我们希望图片的尺寸为 48dp x 48dp，那么该图片的 hdpi 版本应该为 72px x 72px 我们可以根据提供的比例计算出高分辨率的尺寸，可以看出，图片的 xxxhdpi...dp和px之间的关系：1dp是屏幕密度为160dpi时的1px，也就是说在密度值为160dpi的情况下，1dp=1px。
，我们总要重新提供一份体积更大的高清png并且删掉可能不太多使用的小分辨率图片。...所以，我们可以将“加载”和“渲染”放在一起进行比较，就是因为只有第一次的加载和渲染上我们同PNG是不同的。...Hi，SVG 可能上面微信介绍大家有点懵，没关系，LZ也是一样懵，我们只需要了解如下几点即可： SVG的优势相比PNG，SVG有着更好的兼容性以及相比使用PNG，SVG体积更小； SVG并不是android...到现在我们了解甚少，不过，没关系，慢慢来呗~ SVG，即Scalable Vector Graphics 可伸缩矢量图形。...Vector Drawable，Hello Vector Drawable相对于普通的Drawable来说，有以下几个好处： （1）Vector图像可以自动进行适配，不需要通过分辨率来设置不同的图片
简单理解的话，px（像素）是我们UI设计师在PS里使用的，同时也是手机屏幕上所显示的，dp是开发写layout的时候使用的尺寸单位。 为什么要把sp和dp代替px？...app有通知，要提供一个有新通知时显示在状态栏的通知图标。...如果你设计的元素高和宽至少48dp，你就可以保证： （1）触摸目标绝不会比建议的最低目标（7mm）小，无论在什么屏幕上显示。 （2）在整体信息密度和触摸目标大小之间取得了一个很好的平衡。...另外，每个UI元素之间的空白通常是8dp 。...开发拿到设计稿时，将上面标注的以px为单位的字号大小、图像尺寸除以2，就是非retina屏上的pt值，这样在retina屏上也可以根据此pt值换算对应的px大小，以确保不同的分辨率下有合适的效果。
为什么每个app都需要一个图标？ app的图标是为每个移动应用程序添加的唯一图像。这是新用户在App Store和Google Play上找到应用时看到的内容。...在iOS中，可以找到不同大小的图标，从40px×40px到1024px×1024px。因为减小图像大小总是比较容易，所以我们将创建一个更大的画布。...导出iOS应用程序图标在导出之前，我们需要删除圆角和笔划，因为系统会自动添加它。别忘了隐藏网格。 ? 图标应导出为png并设置为没有透明度。但各种尺寸呢？我们真的需要手动完成吗？...例如每个交互模板不仅会导出各种大小的图标，还会显示它在主屏幕和App Store中的外观。它没有看起来那么难。接下来是Android应用程序图标！...在坚固的背景下无法看到视差效果，但如果您的构图复杂，它可以为您的设计带来动态效果。在这种情况下，您需要为两个图层提供两个png图像。请准备好并非所有用户都能看到效果。
已知公式 px = density * dp; density = dpi / 160; 屏幕尺寸、分辨率、像素密度三者关系 通常情况下，一部手机的分辨率是宽x高，屏幕大小是以寸为单位，那么三者的关系是...dp并不能做到适配 假设我们UI设计图是按屏幕宽度为360dp来设计的，如果屏幕宽度为1080/(440/160)=392.7dp，也就是屏幕是比设计图要宽的。...但是通常情况下，设计师并不会对不同屏幕提供不同的设计图，他们的需求仅仅是不同屏幕下控件对屏幕的相对大小一致，直接使用dp并不能满足这一点，而对各种屏幕适配一遍又显得略为繁琐，并且修改也较为麻烦。...pt作为长度单位，按照上述想法将其重定义为与屏幕大小相关的相对单位，不会对dp等常用单位的使用造成影响。...假如设计图宽度为200，一个控件在设计图上标注的长度为3，只需要在初始化时定义宽度为200，绘制该控件时长度写为3pt，那么在任何大小的屏幕上该控件所表现的长度都为屏幕宽度的3/200。
显示GPU过度绘制，分层如下如所示： 添加描述 通过颜色我们可以知道我们应用是否有多余层次的绘制，如果一路飘红，那么我们就要相应的处理了。...所以我们有了第一个优化版本： 优化 1.0 如果父控件有颜色，也是自己需要的颜色，那么就不必在子控件加背景颜色 如果每个自控件的颜色不太一样，而且可以完全覆盖父控件，那么就不需要再父控件上加背景颜色 尽量减少不必要的嵌套...2、我们可以使用可绘制对象，某些图像不需要静态图像资源; 框架可以在运行时动态绘制图像。Drawable对象（以XML格式）可以占用APK中的少量空间。...所有这些工具都可以减少PNG文件的大小，同时保持感知的图像质量。 5、使用WebP文件格式 可以使用图像的WebP文件格式，而不是使用PNG或JPEG文件。...使用这些图形可以大大减少APK大小。一个100字节的文件可以生成与屏幕大小相关的清晰图像。
也就是 长乘宽在乘4，至于为什么要乘以四，因为格式是 ARGB_8888，每个像素点有四个字节，后面四个8表示8个比特，8个比特就是一个字节。一共四个字节。 例2：上面图片，格式为 jpg。...图片内存体积优化 根文件存储格式无关 通过上面的分析我们可以知道图片占用内存的大小是和图片本身的大小没有关系的。...不使用图片 优先使用 VectorDrawable 时间和技术允许的前提下使用代码编写动画 总结 图片本身的大小和它占用内存的大小没有什么关系。...如果不对图片进行优化处理，那么 Android 系统就会根据图片不同来源决定是否需要对原图分辨率进行转换在加载进内存 其他图片如，assets，磁盘，流等图片都是按照原图分辨率来计算大小 基于上面的分析...，我们可以知道 在不同的 dpi 设备中，同个界面的相同图片所占用的内存大小可能不一样，同个图片在不同的资源文件中加载到内存后所占用的大小也可能不一样。
提问 阅读本篇之前，先来想一些问题： Q1：一张 png 格式的图片，图片文件大小为 55.8KB，那么它加载进内存时所占的大小是多少？...Q2：为什么有时候，同一个 app，app 内的同个界面，界面上同张图片，但在不同设备上所耗内存却不一样？ Q3：图片占用的内存大小公式：图片分辨率 * 每个像素点大小，这种说法正确吗，或者严谨吗？...png信息.png 图片的分辨率是 1080*452，而我们在电脑上看到的这张 png 图片大小仅有 55.8KB，那么问题来了： 我们看到的一张大小为 55.8KB 的 png 图片，它在内存中占有的大小也是...所以，我在图片内存大小这一章节中，才会说到，如果你使用了某个开源库图片，那么，那么理论就不适用了，因为系统开放了 inSampleSize 接口设置，允许我们对需要加载进内存的图片先进行一定比例的压缩，...同个 app，同一张图片，但图片放于不同的 res 内的资源目录里时，所占的内存大小有可能不一样。 以上场景之所说有可能，是因为，一旦使用某个热门的图片开源库，那么，以上理论基本就不适用了。
编写布局xml时，如果一个控件的长宽都使用dp来指定，那么能确保该控件在各种大小与分辨率的屏幕下的绝对大小都大致相当。...也就是说无论在pad下还是大小屏手机下，我们实际看到的该控件的大小是差不多的： 资源目录名。上图可见虽然使用dp确保了控件在不同屏幕中的绝对大小一致。...在res目录下可以给各资源目录都加上例如’-1920x1080’等后缀来适配不同的屏幕，具体规则可见官网文档。这样可以针对不同的屏幕提供不同的布局，甚至针对pad与手机提供两套完全不同的布局样式。...但是通常情况下，设计师并不会对不同屏幕提供不同的设计图，他们的需求仅仅是不同屏幕下控件对屏幕的相对大小一致，所以dp并不能满足这一点，而对各种屏幕适配一遍又显得略为繁琐，并且修改也较为麻烦。...该库的想法非常好：对照设计图，使用px编写布局，不影响预览;绘制阶段将对应设计图的px数值计算转换为当前屏幕下适配的大小;为简化接入，inflate时自动将各Layout转换为对应的AutoLayout
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
