如何根据屏幕大小调整按钮的图像和文本大小（自动布局）

Posted 2023-03-11

【中文标题】如何根据屏幕大小调整按钮的图像和文本大小（自动布局）

【英文标题】：How to resize the image and text of button based on screen size(autolayout)

【发布时间】：2016-01-13 04:28:38

【问题描述】：

假设我有多个垂直和水平对齐的按钮，如屏幕截图所示。将有三排等距离。在第一行和第三行中，将有两个高度和宽度相同的按钮，在第二行中，将有水平对齐的按钮。我已经在情节提要中设置了按钮图像和文本。控件对齐设置为水平 |按钮（查看交易）的垂直约束是： top space, bottom space equals to:8(New Launches Button) leading and trailing space equals to:8(superview) and 8(Place Request Button) respectively, and equal width and height for all buttons。我从结果中可以想到的是，按钮的图像和文本之间的空间没有根据屏幕进行调整。只有按钮的高度和宽度得到调整。我希望按钮的字体应该随着屏幕大小而缩小，以便按钮的图像能够正确呈现。 ios 8、9 是我项目的目标版本。我已经通过最小化字体大小进行了检查，但图像大小仍然没有改变。

【问题讨论】：

您可以为图像视图添加宽度和高度约束

没有图像视图 mayank。

移除底部空间限制并检查。否则在这种情况下，您可以使用滚动视图并将这些对象放入其中。然后根据设备大小增加滚动视图的内容大小。由于 iPhone 3.7 英寸很小，因此按钮尺寸被压缩。滚动视图效果很好..！

@Vidhyanand 是仅滚动视图选项吗？

YES..大多数情况下我们只使用滚动视图。图像和文本是一个对象还是不同的对象。如果不同，您需要为按钮图像和文本设置底部约束..！

【参考方案1】：

我使用普通的 UIView 来创建组。将大小问题分解成块更容易。 以你为例，我将使用 4 个 UIViews 跨越屏幕的宽度并与屏幕具有成比例的高度（包含它们的控制器视图）。

在每个视图中，您都可以放置更多 UIView 来包含您的图像/文本框对。将它们与父视图的顶部和底部对齐，使它们的纵横比为 1:1，并分别左右对齐。 （如果您不希望 while 矩形是正方形，您也可以使用比例宽度，但您需要正方形 UIViews 来管理您的图像。

在每个框（方形 UIView）中，将标签放在底部，并与包含 UIView 的左、右和底部对齐（不指定高度以允许自动调整大小）。图片的纵横比应为 1:1，在容器中水平居中，并在包含视图和文本的顶部/底部。

在您的要求中可能存在更多相对尺寸问题，但我认为您已大致了解：UIViews 中的 UIViews 使相对尺寸（比例/纵横比/中心）比使用固定边缘对齐距离更容易。

p>

【参考方案2】：

最后，我让它以某种方式工作，虽然它不是真正的解决方案，但它可以是一种解决方法。正如我在问题中所说，问题在于按钮图像和标题之间的空间。所以我所做的是选择按钮，并在属性检查器中设置left=0 and right=0 for the edge-title 并控制对齐vertical|horizontal，之后我的视图看起来很好，没有任何滚动视图。