调整图像视图大小的滑块

Question

我正在尝试制作一个滑块来调整我的图像大小并将它们置于视图的中心。我已经尝试了各种各样的东西，但在删除所有非工作代码后就只剩下这个了。我在情节提要中将图像水平和垂直排列并带有约束，但似乎无济于事。这是我的蹩脚代码。

@IBAction func sizeSlider(_ sender: UISlider) {
    
    let value = Int(sender.value)
    var sizeValue:Int = 200
    
    switch value {
    case 0...1:
        sizeLabel.text = "100x100"
        sizeValue = 100
    case 2:
        sizeLabel.text = "150x150"
        sizeValue = 150
    case 3:
        sizeLabel.text = "200x200"
        sizeValue = 200
    case 4:
        sizeLabel.text = "250x250"
        sizeValue = 250
    case 5:
        sizeLabel.text = "300x300"
        sizeValue = 300
    default:
        print("Error")
    }
    
    dartBoardImage.frame.size.width = CGFloat(sizeValue)
    dartBoardImage.frame.size.height = CGFloat(sizeValue)
}

Answer 1

“我在情节提要中将图像水平和垂直排列并带有约束”

您不能将自动布局（约束）与显式 frame 更改混合使用。

您（可能）想要做的是...

在情节提要中：

为您的 dartBoardImage 图像视图设置 100
也给它一个 1:1 的宽高比约束...这将保持它的高度等于它的宽度
将其限制在您的视图中心

现在，按住 Ctrl 键从宽度约束拖动到您的 class 代码，并为其创建一个出口：

@IBOutlet var imageWidthConstraint: NSLayoutConstraint!

您的滑块代码现在将更改约束的 .constant 属性以更新大小：

imageWidthConstraint.constant = CGFloat(sizeValue)

因此，您的完整 sizeSlider 函数变为：

@IBAction func sizeSlider(_ sender: UISlider) {
    
    let value = Int(sender.value)
    var sizeValue:Int = 200
    
    switch value {
    case 0...1:
        sizeLabel.text = "100x100"
        sizeValue = 100
    case 2:
        sizeLabel.text = "150x150"
        sizeValue = 150
    case 3:
        sizeLabel.text = "200x200"
        sizeValue = 200
    case 4:
        sizeLabel.text = "250x250"
        sizeValue = 250
    case 5:
        sizeLabel.text = "300x300"
        sizeValue = 300
    default:
        print("Error")
    }
    
    // change the image view's width constraint
    imageWidthConstraint.constant = CGFloat(sizeValue)
    
    // don't do this
    //dartBoardImage.frame.size.width = CGFloat(sizeValue)
    //dartBoardImage.frame.size.height = CGFloat(sizeValue)
}

调整图像视图大小的滑块

Slider resizing image view

frame

uiimageview

swift