调整图像大小以适合 xcode 故事板中的 Ui 图像视图

Posted 2023-03-23

【中文标题】调整图像大小以适合 xcode 故事板中的 Ui 图像视图

【英文标题】：Resizing image to fit Ui Image View in xcode storyboard

【发布时间】：2021-12-18 14:48:52

【问题描述】：

我正在尝试使图像适合整个 Ui 图像视图。我想这样做是因为我想对我的图像进行四舍五入，但它不起作用，因为图像小于整个视图。因此将其四舍五入会使图像的外部变圆并且不可见。我尝试添加约束，但似乎没有锻炼。

这是我正在尝试做的图片：

https://i.stack.imgur.com/mIGow.png

问题图片：

https://i.stack.imgur.com/LGDyx.png https://i.stack.imgur.com/K3RVZ.png

【问题讨论】：

您需要在UIImageView 中添加约束来填充视图。

@DonMag 很遗憾，这并没有解决它。

不太清楚你在展示什么。您是否使用自定义 @IBDesignable 图像视图来获得圆角？

"IBOutlet 弱变量商店：UIImageView！"我用这种方法来圆角。但由于某种原因，它似乎根本不起作用。取而代之的是图像是销售者，并且空白区域是四舍五入的，但图像本身不是四舍五入的。 @DonMag

你为图像视图的Content Mode 选择了什么？要让图像填充图像视图，应将其设置为 Scale To Fill 或 Aspect Fill

【参考方案1】：

好的 - 问题是你不了解 Xcode 界面。

当你添加了UIImageView，设置它的图片，然后选择它，你会看到：

如果再次单击图像视图，Xcode 会显示一个额外的“突出显示”轮廓：

这与您运行应用时的外观无关。

关于您正在观看的视频的屏幕截图...您没有注意到或忘记了两件事：

这是 SwiftUI 的教程 - 您发布的屏幕截图来自基于 UIKit 的应用程序。 在该系列第 1 部分的 17:20，作者解释了他如何设置拐角半径。

要使用 UIKit 获得您想要的效果，您需要编写一些代码来为图像视图提供圆角。要让它在设计时显示，您需要使用 @IBDesignable 图像视图子类。

这是一个非常基本示例：

@IBDesignable
class RoundedImageView: UIImageView 
    
    override func layoutSubviews() 
        layer.cornerRadius = 20
    
    

如果您将图像视图的自定义类设置为RoundedImageView，然后选择Editor -> Refresh All Views 或选中Editor -> Automatically Refresh Designable Views，您将看到：

【讨论】：

嘿，是的，我从一开始就注意到了，但我的布局是唯一受到启发的东西，这就是为什么在问题中给出了这张图片。我知道他没有使用故事板。

我也不太明白代码是如何工作的，因为它没有以任何方式指定图像。

@Kaushik - 您观看的教程视频使用 SwiftUI，并且视图具有 .cornerRadius(20) 属性。当不使用 SwiftUI 时，你的代码必须在某处设置圆角半径。使用自定义 @IBDesignable 类让您在 Storyboard 中查看该代码的结果。在@IBDesignable 上搜索一些教程以获得更好的理解——Stack Overflow 上的单一答案太多了。

@Kaushik - 我回答的要点是解释您在选择图像视图（圆形突出显示）时看到的想法。

对不起，我忘了说为什么我对突出显示感到困惑，并且还会出现诸如 setvalue 错误之类的错误。我使用了“@IBOutlet weak var SHOPS: UIImageView！SHOPS.layer.cornerRadius = 10.0 SHOPS.layer.masksToBounds = true”，因为它应该可以工作，但是当我运行并执行时，我很想得到像 set value undefined key 这样的错误不明白原因。我已经搜索了它，但仍然没有解决。