UIButton 不显示按钮内的完整图像答案

【问题标题】：UIButton doesn't show the full image inside the buttonUIButton 不显示按钮内的完整图像
【发布时间】：2017-07-13 03:07:04
【问题描述】：

我尝试将 UIButton（宽度：55，高度：55）设置为图像大小 55*55。但是我设置好图片后，按钮变成了这个样子

小于图像大小。我不知道如何使图像填充按钮。谁能给我一个提示？或者我应该改为 UIImageview 吗？

【问题讨论】：

尝试将 内容模式设置为宽高比填充或缩放以适应 UIBUtton 图像
图像是 1x 还是 2x 还是 3x？
@Bilal 是 2x。
图片文件的名称是不是后缀为“@1x”、“@2x”、“@3x”？
在 iOS 中，不可缩放的图形以像素为单位定义，而屏幕尺寸以磅为单位定义。 1 点 * 屏幕比例 = 像素。屏幕比例取决于设备。使任何图形填充其空间的最简单方法是将内容模式设置为方面填充。这意味着它将完全填充空间并将保留资产的纵横比。为确保正确显示所有资产，请为每个比例提供图像（实际上不需要 1x，因为这些设备已过时）。或者，提供 PDF 格式的可缩放矢量图形。

标签： ios xcode

【解决方案1】：

您的图像是 2 倍，所以它看起来很小。

选项 1 要么你把它移到你的 xcassets 中的 1x 。

选项 2 如果您想将其保持为 2x。您需要 110 x 110 的高分辨率图像。

【讨论】：

这不准确。
您应提供每个比例因子的图像，或使用矢量图形以确保正确显示。
我认为我的回答试图解释为什么它没有正确显示。而且肯定不是不准确的。
对不起，它没有完全解释为什么会发生。选项是使按钮大小减半，或使源图像大两倍。除非在非视网膜设备上运行源图像，否则将源图像置于 1x 点会导致屏幕渲染不佳。

【解决方案2】：

像这样填充图像：

myButton.contentHorizontalAlignment = .fill
myButton.contentVerticalAlignment = .fill

【讨论】：

【解决方案3】：

您可以更改内容模式，然后查看。

【讨论】：

我尝试更改此设置，但它不起作用。似乎问题在于我将图像放入 2x 而不是 1x。谢谢！
yourbutton.imageView.contentMode = .ScaleAspectFill // 替代方案：.ScaleAspectFit

【解决方案4】：

来自Apple

iOS 使用坐标系统将内容放置在屏幕上。此坐标系基于点的测量值，这些测量值映射到显示中的像素。

更多来自Apple

一个点不一定对应一个物理像素。

所有图像格式（PNG、JPG 等）都使用像素来调整大小。您的图像是 (55px, 55px) 并且您已将其放置在资产目录中的 2x 比例因子位置。这告诉系统将图像解释为好像它注定要用于比例因子为 2x 的屏幕，这意味着它是 (27.5pt, 27.5pt)。

您以点为单位指定按钮大小。因此，您将 27.5x27.5 的图像放入 55x55 的按钮中。

将图像移动到资产目录中的 1x 插槽可以解决您的问题，但会牺牲质量。您的设计师的意图是使该图像以特定分辨率显示。通过在具有 2x 比例因子的设备上的 1x 插槽中使用 (55px, 55px) 资源，您将图像的预期分辨率减半。

生产 iOS 开发的正确解决方案：

设计团队（可能是其他人，也可能是您）应以 1x、2x 和 3x 比例因子渲染所有资产。（对于Android，它们分别称为hdpi、xhdpi、xxhdpi，并且Android支持更多的缩放因子）

作为开发人员，您在布置 UI 时应该专注于工作。如果图像应该是 55x55，你应该得到 3 张图像，55x55px、110x110px 和 165x165px。这将确保图像在所有 iOS 设备上看起来相同。

新方式

在 Xcode 7 中添加了一个 more convenient way 来处理不同内容比例因子的噩梦。您可以提供一个 PDF 格式的矢量图形，Xcode 将为您完成剩下的工作。这有很多好处，包括需要管理的文件更少。这也意味着，如果 Apple 推出 4 倍比例因子的设备，您需要做的就是重新编译您的应用程序。

【讨论】：

【解决方案5】：

你可以使用图片按钮

enter image description here

【讨论】：

我确实使用这个设置来设置图像。但是图片的大小不是我所期望的。