调整 UIButton 的图像大小

问题描述

我有一个带有文本和图像的 UIButton。我希望图片位于文字旁边。

我的图片是 100x100 像素。结果,当我使用...

scaleAspectFit
contentHorizo​​ntalAlignment
或 imageEdgeInsets

...图像在视觉上会改变大小,但不会更改图像在按钮中占用的空间的 100px 框架的大小(由灰色框表示)。这会将文本推到一边。 (图 1)

我可以通过弄乱 imageEdgeInsets 值来获得正确的结果,但一次只能用于一台设备,因为按钮的大小随屏幕大小而变化。

有没有更好的方法可以直接更改图像帧的大小而不使用分辨率较小的图像(这会导致图像质量大大降低)? (图 2)

我在 Photoshop 上创建了所需结果的视觉表示(图 3)。

image with UIView scaling/imageInsets,visually correct size but grey frame pushes

correct size and placement but poor image quality

desired result (created in photoshop)

解决方法

您可以使用如下自定义视图:

  1. 在故事板中添加视图
  2. 然后将cornerRadius添加到该视图
  3. 添加一个 imageView 并设置您想要的高度和宽度。
  4. 添加标签
  5. 将 imageView 和 Label 包裹在 StackView 中。
  6. 向 rootView 添加 StackView 约束。
  7. 最后将 TapGesture 添加到该 rootView,使其像按钮一样工作。

I have created this one

enter image description here

enter image description here