ios - 在 iOS 8 键盘扩展中实现键盘按键弹出动画

Question

请问iOS 8 keyboards extension 如何在按住键盘键时实现弹出动画。我知道如何在每个键上分配长按手势，但不知道如何为键设置动画以呈现该特定键中的其他字符。

编辑: 我看到有人问这个类似的问题 here但不同的是，他能够制作流行动画。

编辑 2: 我看到另一个类似的问题被问到 here但与标准键盘上的默认外观相比，它们的外观有所不同。

编辑 3: 我能够在点击键盘按键时实现我想要的行为。我只需要知道如何正确绘制扩展键 View 。附上图片供引用。第一个是我们迄今为止取得的成就。我想知道如何绘制字母 F 键，然后将其转换为 UIView。

编辑 4: 我能够创建弹出键 View ，但不是我想要的类似于标准键盘弹出键的所需形状或层。供引用:

编辑 5: 我尝试了 PaintCode 的演示版，它生成了下面的代码。这是在我的自定义 View 上的 drawRect 方法中。我的按键宽度通常为 26.0，高度为 39.0。顺便说一句，我也在使用 Objective-C。

    UIBezierPath* bezierPath = UIBezierPath.bezierPath;
    [bezierPath moveToPoint: CGPointMake(26, 5.12)];
    [bezierPath addLineToPoint: CGPointMake(26, 18.03)];
    [bezierPath addCurveToPoint: CGPointMake(23.05, 22.41) controlPoint1: CGPointMake(26, 19.88) controlPoint2: CGPointMake(24.82, 21.51)];
    [bezierPath addCurveToPoint: CGPointMake(19.62, 25.27) controlPoint1: CGPointMake(22.05, 23.24) controlPoint2: CGPointMake(20.79, 24.3)];
    [bezierPath addCurveToPoint: CGPointMake(19.62, 39.95) controlPoint1: CGPointMake(19.62, 30.82) controlPoint2: CGPointMake(19.62, 39.95)];
    [bezierPath addCurveToPoint: CGPointMake(17.17, 42) controlPoint1: CGPointMake(19.62, 41.08) controlPoint2: CGPointMake(18.52, 42)];
    [bezierPath addLineToPoint: CGPointMake(8.83, 42)];
    [bezierPath addCurveToPoint: CGPointMake(6.38, 39.95) controlPoint1: CGPointMake(7.48, 42) controlPoint2: CGPointMake(6.38, 41.08)];
    [bezierPath addCurveToPoint: CGPointMake(6.38, 25.33) controlPoint1: CGPointMake(6.38, 39.95) controlPoint2: CGPointMake(6.38, 30.89)];
    [bezierPath addCurveToPoint: CGPointMake(5.67, 24.74) controlPoint1: CGPointMake(6.15, 25.14) controlPoint2: CGPointMake(5.91, 24.94)];
    [bezierPath addCurveToPoint: CGPointMake(5.37, 24.49) controlPoint1: CGPointMake(5.57, 24.66) controlPoint2: CGPointMake(5.47, 24.57)];
    [bezierPath addLineToPoint: CGPointMake(5.32, 24.45)];
    [bezierPath addCurveToPoint: CGPointMake(2.75, 22.3) controlPoint1: CGPointMake(4.41, 23.69) controlPoint2: CGPointMake(3.5, 22.93)];
    [bezierPath addCurveToPoint: CGPointMake(1.02, 20.85) controlPoint1: CGPointMake(2.06, 21.92) controlPoint2: CGPointMake(1.47, 21.43)];
    [bezierPath addCurveToPoint: CGPointMake(0.98, 20.82) controlPoint1: CGPointMake(0.99, 20.83) controlPoint2: CGPointMake(0.98, 20.82)];
    [bezierPath addCurveToPoint: CGPointMake(0, 18.03) controlPoint1: CGPointMake(0.36, 20.02) controlPoint2: CGPointMake(-0, 19.06)];
    [bezierPath addLineToPoint: CGPointMake(0, 5.12)];
    [bezierPath addCurveToPoint: CGPointMake(2.48, 1.01) controlPoint1: CGPointMake(0, 3.44) controlPoint2: CGPointMake(0.97, 1.94)];
    [bezierPath addCurveToPoint: CGPointMake(6.05, 0) controlPoint1: CGPointMake(3.48, 0.39) controlPoint2: CGPointMake(4.71, 0.02)];
    [bezierPath addLineToPoint: CGPointMake(6.13, 0)];
    [bezierPath addLineToPoint: CGPointMake(19.87, 0)];
    [bezierPath addCurveToPoint: CGPointMake(26, 5.12) controlPoint1: CGPointMake(23.25, 0) controlPoint2: CGPointMake(26, 2.29)];
    [bezierPath closePath];
    [[UIColor redColor] setFill];
    [bezierPath fill];

问题是，它看起来像这样:

如果我能让它足够大，让它像默认键盘一样，那么它就可以工作了。

Answer 1

我会使用 CAShapeLayer。

您可以随时重置形状图层的形状，甚至可以为形状的变化设置动画，以完成比 Apple 版本更精细的操作。

下面是 playground 的代码，它演示了完成此操作的类的简单版本:

import UIKit

class KeyPopView: UIView {

  static let widthPadding : CGFloat = 5.0
  static let leftOffset : CGFloat = -5.0

  init(frame: CGRect, letters: [String]) {
    super.init(frame: frame)
    addLetters(letters)
  }

  required init(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  override class func layerClass() -> AnyClass {
    return CAShapeLayer.self
  }

  override func layoutSubviews() {
    super.layoutSubviews()
    var run : CGFloat = KeyPopView.widthPadding
    for l in labels {
      let s = sizeForLabel(l)
      let mh = maxHeight(labels)
      l.frame = CGRectMake(run, -mh, s.width, s.height)
      run += s.width + KeyPopView.widthPadding
    }
  }

  var shapeLayer: CAShapeLayer {
    get {
      return layer as! CAShapeLayer
    }
  }

  var path: CGPathRef {
    get {
      return shapeLayer.path
    }
    set(nv) {
      shapeLayer.shadowPath = nv
      shapeLayer.path = nv
    }
  }

  var labels : [UILabel] = [] {
    willSet {
      for l in labels {
        l.removeFromSuperview()
      }
    }
    didSet {
      for l in labels {
        addSubview(l)
      }
      path = keyPopPath(labels, cornerRadius: cornerRadius).CGPath
    }
  }

  var cornerRadius : CGFloat = 4 {
    didSet {
      path = keyPopPath(labels, cornerRadius: cornerRadius).CGPath
    }
  }

  override var backgroundColor: UIColor? {
    set(newValue) {
      shapeLayer.fillColor = newValue?.CGColor
    }
    get {
      return UIColor(CGColor: shapeLayer.fillColor)
    }
  }

  func keyPopPath(ls : [UILabel], cornerRadius: CGFloat) -> UIBezierPath {
    let radius = CGSizeMake(cornerRadius, cornerRadius);
    let f = CGRectMake(0, 0, frame.width + KeyPopView.widthPadding * 2, frame.height)
    let mh = maxHeight(ls)
    var b = UIBezierPath(roundedRect: CGRectMake(KeyPopView.leftOffset, -mh, widthForLabels(ls) - KeyPopView.leftOffset + KeyPopView.widthPadding, mh), byRoundingCorners: UIRectCorner.AllCorners, cornerRadii: radius)
    b.appendPath(UIBezierPath(roundedRect: f, byRoundingCorners: UIRectCorner.BottomLeft | UIRectCorner.BottomRight, cornerRadii: radius))
    return b
  }

  func addLetters(letters : [String]) {
    labels = letters.map({(s: String) -> UILabel in
      var l = UILabel()
      l.text = s
      return l
    })
  }

  func widthForLabels(ls: [UILabel]) -> CGFloat {
    return ls.reduce(0, combine: {(t, l) in t + sizeForLabel(l).width + KeyPopView.widthPadding}) + KeyPopView.widthPadding
  }

  func sizeForLabel(l: UILabel) -> CGSize {
    return l.text!.sizeWithAttributes([NSFontAttributeName: l.font])
  }

  func maxHeight(ls: [UILabel]) -> CGFloat {
    var m : CGFloat = 0;
    for l in ls {
      let h = sizeForLabel(l).height
      m = m > h ? m : h
    }
    return m
  }
}

//start with a gray background view
var ba = UIView(frame: CGRectMake(0, 0, 300, 300))
ba.backgroundColor = UIColor.grayColor()
//add a mock "key"
let key = UILabel()
key.text = "a"
key.textAlignment = NSTextAlignment.Center
key.backgroundColor = UIColor.whiteColor()
let size = key.text!.sizeWithAttributes([NSFontAttributeName: key.font])
key.frame = CGRectMake(5, 0, size.width + 10, size.height)
key.layer.cornerRadius = 5
key.center = ba.center
ba.addSubview(key)
//add the initial keypop
key.hidden = true // the key's rounded corners aren't showing up correctly in my playground preview -- this shouldn't be necessary
var k = KeyPopView(frame: CGRectMake(0, 0, size.width, size.height), letters: ["a"])
k.backgroundColor = UIColor.whiteColor()
ba.addSubview(k)
k.center = CGPointMake(key.center.x - 5, key.center.y)
ba
//demonstrates resizing of the keypop view to accomdate more letters
k.addLetters(["a", "b", "c", "d", "e"])
ba

以目前的形式，这个类有很多问题:

• 字母稍微偏离中心
• View 的框架用作弹出开始的键的框架，而不是绘制内容的实际框架。
• 只支持左键弹出
• 强制展开多个可选
• 所用路径的“主干”没有像系统键盘那样的圆内角
• 变量的命名是为了简洁，而不是为了清晰

然而，这应该为实现您想要的目标提供良好的基础。