更改 UISwitch 宽度和高度答案

【问题标题】：Changing UISwitch width and height更改 UISwitch 宽度和高度
【发布时间】：2014-09-26 02:18:13
【问题描述】：

我正在尝试更改 iOS 中 UISwitch 元素的默认高度和宽度，但没有成功。

你能改变 UISwitch 元素的默认高度和宽度吗？
是否应该以编程方式创建元素？

【问题讨论】：

【解决方案1】：

import UIKit

extension UISwitch {

    static let standardHeight: CGFloat = 31
    static let standardWidth: CGFloat = 51
    
    @IBInspectable var width: CGFloat {
        set {
            set(width: newValue, height: height)
        }
        get {
            frame.width
        }
    }
    
    @IBInspectable var height: CGFloat {
        set {
            set(width: width, height: newValue)
        }
        get {
            frame.height
        }
    }
    
    func set(width: CGFloat, height: CGFloat) {

        let heightRatio = height / UISwitch.standardHeight
        let widthRatio = width / UISwitch.standardWidth

        transform = CGAffineTransform(scaleX: widthRatio, y: heightRatio)
    }
}

【讨论】：

【解决方案2】：

即使可以使 UISwitch 更小，这也会对用户体验产生负面影响。 Apple 的Human Interface Guidelines 建议触摸目标的最小尺寸为 44 点。

为交互元素提供充足的触摸目标。尽量保持所有控件的最小可点击区域为 44pt x 44pt

通过将其缩放到小于标准尺寸，用户点击将变得更加困难，并且还会引入可访问性问题。在缩小 UI 元素之前，请考虑视力或运动控制不够完美的用户。

最后，这里有一段精彩的 article about touch target sizes 的摘录，说明了当控件太小时会发生什么。

采访者——“我注意到，你在这个屏幕上提交你的电子邮件地址时遇到了一些问题，你能告诉我那是什么感觉吗？”

用户——“哦，是的，我不太擅长技术。”

采访者——“你认为是什么让你在那个时候挣扎？”

用户——“这些按钮很难点击，我一直在塞。”

【讨论】：

也许我弄错了，但如果他们建议可点击控件的默认最小尺寸为 44px x 44px - 为什么它们的默认开关尺寸是 51 x 31 ?
确实，Apple 在这里违反了他们自己的准则。但这更有理由不让它变得更小！

【解决方案3】：

斯威夫特 5：

import UIKit

extension UISwitch {

    func set(width: CGFloat, height: CGFloat) {

        let standardHeight: CGFloat = 31
        let standardWidth: CGFloat = 51

        let heightRatio = height / standardHeight
        let widthRatio = width / standardWidth

        transform = CGAffineTransform(scaleX: widthRatio, y: heightRatio)
    }
}

【讨论】：

不错的解决方案 :))

【解决方案4】：

斯威夫特 4

@IBOutlet weak var switchDemo: UISwitch!

override func viewDidLoad() {
    super.viewDidLoad()
   switchDemo.transform = CGAffineTransform(scaleX: 0.75, y: 0.75)
}

【讨论】：

【解决方案5】：

我测试了理论，看来您可以使用scale transform 来增加UISwitch 的大小

UISwitch *aSwitch = [[UISwitch alloc] initWithFrame:CGRectMake(120, 120, 51, 31)];
aSwitch.transform = CGAffineTransformMakeScale(2.0, 2.0);
[self.view addSubview:aSwitch];

【讨论】：

我想让 switch 的尺寸更小。你有其他方法吗？我该怎么做？
知道了。您的代码可以帮助我解决问题。谢谢。
此方法会导致像素化伪影。开关的外部渲染得很清晰（可能是因为它使用了CALayercornerRadius），但内部旋钮是位图，放大时会出现像素化。

【解决方案6】：

这是我为此目的编写的一个不错的 UISwitch 子类，它也是 IBDesignable，因此您可以从 Storyboard / xib 控制它

@IBDesignable class BigSwitch: UISwitch {

    @IBInspectable var scale : CGFloat = 1{
        didSet{
            setup()
        }
    }

    //from storyboard
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }
    //from code
    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    private func setup(){
        self.transform = CGAffineTransform(scaleX: scale, y: scale)
    }

    override func prepareForInterfaceBuilder() {
        setup()
        super.prepareForInterfaceBuilder()
    }


}

【讨论】：

由于某种原因，此代码不会更新情节提要中的 Switch。对运行应用仍然有效
我不确定您在故事板中看不到开关的原因是什么，我现在检查了它并且它工作正常。无论如何不要忘记，为了在情节提要中看到开关更大，您必须在属性检查器中设置比例。
这很奇怪......我完全复制了上面的代码，并导致检查器中的比例发生了变化。使用 Xcode 10.1
尝试在 setup 方法中写点别的，比如设置 onTint color 的值，看看 storyboard 是否显示新的颜色
我重新启动了 Xcode 并且 switch 开始缩放 =) 感谢您的帮助！

【解决方案7】：

不可能。 UISwitch 具有锁定的固有高度 51 x 31 。

您可以在设计时在 xib 中强制对开关进行约束...

但在运行时它会恢复到其固有大小。

您可以通过 .onImage / .offImage 属性提供另一张图片，但同样来自文档。

此图片的大小必须小于或等于 77 磅宽和27分高。如果您指定较大的图像，边缘可能是剪辑。

如果你想要另一种尺寸，你将不得不烘烤自己的定制。

【讨论】：

我想知道为什么 Apple 会限制 UISwitch 的宽度？扩展宽度有什么问题？看起来很奇怪，但还是谢谢你。