带有圆形按钮的 3X4 键盘，如 iPhone Phone 应用程序响应所有屏幕尺寸

Question

谁能帮我破解 Apple 创建 phone app keypad screen 的方法？我曾尝试使用带有 1:1 按钮的 UIStackView 和许多其他方法创建它，但都是徒劳的。我想在自己的项目中使用这样的屏幕进行学习

This is what I want and this is what I have so far, Xcode view of storyboard

Answer 1

部分解决方案可能涉及自定义（圆形、绿色）按钮。为了创建一个红色背景的按钮（作为对关键操作的警告），我将 NSButton 子类化：

class ColorButton: NSButton

及其 draw(...) 方法。

这让我可以控制外表。所有其他行为都继承自 NSButton。

此外，@IBDesignable 和@IBInspectable 标记在 InterfaceBuilder 中公开了自定义控件。

这是最简单的部分。获得恰到好处的外观是一项非常重要的工作（对我来说），因为 Cocoa 按钮有一些微妙的行为（例如禁用，突出显示）。响应桌面颜色选项（例如深色模式）也是一个考虑因素。

这是我的 ColorButton 的代码，它再次改变了背景颜色而不是形状。

@IBDesignable
class ColorButton: NSButton {

    @IBInspectable var backgroundColor: NSColor = NSColor.controlBackgroundColor
    { didSet { needsDisplay = true } }

    @IBInspectable var textColor: NSColor = NSColor.controlTextColor

    override func draw(_ dirtyRect: NSRect)
    {   
        //  fill in background with regular or highlight color
        var backgroundColor = (isHighlighted ? self.backgroundColor.highlight(withLevel: 0.75) : isEnabled ? self.backgroundColor : NSColor.gray)!
        if  isEnabled == false      { backgroundColor = NSColor.lightGray }
        let textColor = (isEnabled ? self.textColor : NSColor.disabledControlTextColor )
        var rect: NSRect = NSRect(x: 7.0, y: 5.0, width: self.frame.width - 14.0, height: self.frame.height - 13.0) // self.frame//   dirtyRect
        var path = NSBezierPath(roundedRect: rect, xRadius: 4.0, yRadius: 4.0)
        backgroundColor.setFill()
        NSColor.darkGray.setStroke()
        path.lineWidth = 0
        path.fill()
        path.stroke()

        let font = NSFont(name: "Helvetica", size: (rect.height) * 0.66)
        let text = title as NSString
        let textFontAttributes = [convertFromNSAttributedStringKey(NSAttributedString.Key.font): font!, convertFromNSAttributedStringKey(NSAttributedString.Key.foregroundColor): textColor] as [String : Any]
        let size = text.size(withAttributes: convertToOptionalNSAttributedStringKeyDictionary(textFontAttributes))
        let location = NSPoint(x: ((self.frame.width - size.width) / 2.0), y: ((self.frame.height - size.height) / 2.0) - 3.0)
        text.draw(at: location, withAttributes: convertToOptionalNSAttributedStringKeyDictionary(textFontAttributes))
    }// draw
}

以上是在Swift 3下开发的。Swift 4 添加了迁移工具：

// Helper function inserted by Swift 4.2 migrator.
fileprivate func convertFromNSAttributedStringKey(_ input: NSAttributedString.Key) -> String {
    return input.rawValue
}

// Helper function inserted by Swift 4.2 migrator.
fileprivate func convertToOptionalNSAttributedStringKeyDictionary(_ input: [String: Any]?) -> [NSAttributedString.Key: Any]? {
    guard let input = input else { return nil }
    return Dictionary(uniqueKeysWithValues: input.map { key, value in (NSAttributedString.Key(rawValue: key), value)})
}

Answer 2

https://www.youtube.com/watch?v=vI7m5RTYNng

解释得很好，也有代码。

带有圆形按钮的 3X4 键盘，如 iPhone Phone 应用程序响应所有屏幕尺寸

3X4 keypad with round buttons as seen in iPhone Phone App responsive for all screen sizes

iphone

uikit

ios

autolayout

swift