Bigger touch zones for custom keyboard buttons

AutoCat/Assets.xcassets/Colors/DarkKeyBackground.colorset/Contents.json

@@ -15,8 +15,13 @@
         }
       ],
       "color" : {
-        "platform" : "ios",
+        "color-space" : "srgb",
-        "reference" : "systemGray3Color"
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0.290",
+          "green" : "0.282",
+          "red" : "0.282"
+        }
       },
       "idiom" : "universal"
     }

AutoCat/Views/PNKeyboard.swift

@@ -18,39 +18,39 @@ class PNButton: UIButton {
     private(set) var type: PNButtonType
     private var timer: Timer?
     private var waitCount = 0
+    private var rectLayer = CAShapeLayer()
+    private var bgColor = UIColor(named: "KeyBackground")
     
     weak var delegate: PNButtonDelegate?
     
     init(letter: Character) {
         self.type = .symbol(String(letter))
         super.init(frame: .zero)
+        self.setup()
         self.titleLabel?.font = UIFont(name: "RoadNumbers", size: 36)
         let title = String(Constants.pnLettersMap[letter] ?? letter)
         self.setTitle(title, for: .normal)
         self.setTitleColor(.label, for: .normal)
-        self.backgroundColor = UIColor(named: "KeyBackground")
-        self.setup()
     }
     
     init(digit: Int) {
         self.type = .symbol(String(digit))
         super.init(frame: .zero)
+        self.setup()
         self.titleLabel?.font = UIFont(name: "RoadNumbersCyr-Regular", size: 30)
         let character = Character(String(digit))
         let title = String(Constants.pnLettersMap[character] ?? character)
         self.setTitle(title, for: .normal)
         self.setTitleColor(.label, for: .normal)
-        self.backgroundColor = UIColor(named: "KeyBackground")
-        self.setup()
     }
     
     init(imageName: String, type: PNButtonType) {
         self.type = type
+        self.bgColor = UIColor(named: "DarkKeyBackground")
         super.init(frame: .zero)
-        self.setImage(UIImage(systemName: imageName), for: .normal)
-        self.backgroundColor = UIColor(named: "DarkKeyBackground")
-        self.tintColor = .label
         self.setup()
+        self.setImage(UIImage(systemName: imageName), for: .normal)
+        self.tintColor = .label
     }
     
     required init?(coder: NSCoder) {
@@ -58,17 +58,26 @@ class PNButton: UIButton {
     }
     
     func setup(_ radius: CGFloat = 0.5) {
-        self.layer.cornerRadius = 6
+        self.rectLayer.cornerRadius = 6
-        self.layer.shadowColor   = UIColor.black.cgColor
+        self.layer.addSublayer(self.rectLayer)
-        self.layer.shadowOpacity = 0.4
+        self.imageView?.layer.zPosition = 2
-        self.layer.shadowOffset  = CGSize(width: 0.0, height : 1.0)
+        
-        self.layer.shadowRadius  = radius
+        self.rectLayer.shadowColor   = UIColor.black.cgColor
+        self.rectLayer.shadowOpacity = 0.4
+        self.rectLayer.shadowOffset  = CGSize(width: 0.0, height : 1.0)
+        self.rectLayer.shadowRadius  = radius
         
         self.addTarget(self, action: #selector(buttonDown), for: .touchDown)
         self.addTarget(self, action: #selector(buttonUp), for: [.touchUpInside, .touchUpOutside])
         self.addTarget(self, action: #selector(touchUpInside), for: .touchUpInside)
     }
     
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        self.rectLayer.backgroundColor = self.bgColor?.cgColor
+        self.rectLayer.frame = self.layer.bounds.inset(by: UIEdgeInsets(top: 4, left: 4, bottom: 4, right: 4))
+    }
+    
     @objc func buttonDown(_ sender: PNButton) {
         print("buttonDown")
         sender.layer.opacity = 0.3
@@ -92,6 +101,11 @@ class PNButton: UIButton {
         print("touchUpInside")
         self.delegate?.buttonTapped(self)
     }
+    
+    func setBacgroundColor(color: UIColor) {
+        self.bgColor = color
+        self.setNeedsLayout()
+    }
 }
 
 class PNKeyboard: UIView, UIInputViewAudioFeedback, PNButtonDelegate {
@@ -130,7 +144,7 @@ class PNKeyboard: UIView, UIInputViewAudioFeedback, PNButtonDelegate {
         
         let done = PNButton(imageName: "arrow.turn.down.left", type: .done)
         done.delegate = self
-        done.backgroundColor = .systemBlue
+        done.setBacgroundColor(color: .systemBlue)
         done.tintColor = .white
         
         let letterRows = [
@@ -143,7 +157,7 @@ class PNKeyboard: UIView, UIInputViewAudioFeedback, PNButtonDelegate {
         let lettersStack = UIStackView(arrangedSubviews: letterRows)
         lettersStack.axis = .vertical
         lettersStack.distribution = .fillEqually
-        lettersStack.spacing = 8
+        //lettersStack.spacing = 8
         
         let digitRows = [
             self.createLetterStack([digits[0], digits[1], digits[2]]),
@@ -155,7 +169,7 @@ class PNKeyboard: UIView, UIInputViewAudioFeedback, PNButtonDelegate {
         let digitsStack = UIStackView(arrangedSubviews: digitRows)
         digitsStack.axis = .vertical
         digitsStack.distribution = .fillEqually
-        digitsStack.spacing = 8
+        //digitsStack.spacing = 8
         
         let mainStack = UIStackView(arrangedSubviews: [lettersStack, digitsStack])
         mainStack.spacing = 16
@@ -174,7 +188,7 @@ class PNKeyboard: UIView, UIInputViewAudioFeedback, PNButtonDelegate {
     func createLetterStack(_ views: [UIView]) -> UIStackView {
         let stack = UIStackView(arrangedSubviews: views)
         stack.distribution = .fillEqually
-        stack.spacing = 8
+        //stack.spacing = 8
         return stack
     }