लागू iOS 8 कीबोर्ड एक्सटेंशन

Question

में कीबोर्ड कुंजी पॉप एनीमेशन मैं जब iOS 8 कीबोर्ड विस्तार के लिए एक कुंजीपटल कुंजी दबाए रख पॉप एनीमेशन लागू करने के लिए कैसे पूछना चाहेंगे। मैं हर कुंजी को देर तक दबाए इशारा आवंटित करने के लिए कैसे, लेकिन कैसे कुंजी चेतन करने के लिए है कि विशिष्ट कुंजी में अन्य पात्रों पेश करने के लिए पता नहीं है पता है।

संपादित करें: मैंने इस समान प्रश्न को here से पूछा जा रहा है लेकिन अंतर यह है कि वह पॉप एनिमेशन बनाने में सक्षम था।

संपादित करें 2: मैं एक और इसी तरह सवाल देखा here कहा जा रहा है, लेकिन वे यह कैसे मानक कीबोर्ड पर डिफ़ॉल्ट रंग-रूप की तुलना में की तरह दिखता है पर भिन्न होते हैं।

संपादित करें 3: मैं जब कुंजीपटल कुंजी दोहन मेरी वांछित व्यवहार को प्राप्त करने में सक्षम था। मुझे बस विस्तारित कुंजी दृश्य को सही ढंग से आकर्षित करने के बारे में जानने की आवश्यकता है। संलग्न संदर्भ के लिए चित्र हैं। पहला वह है जिसे हमने अभी तक हासिल किया है। मुझे पता है कि पत्र एफ कुंजी आकर्षित और फिर करने के लिए कैसे एक UIView बाद में इसका अनुवाद करना चाहते हैं।

संपादित करें 4: मैं कुंजी पॉप दृश्य बनाने के लिए कर रहा था लेकिन नहीं वांछित आकार या परत में मैं करने के लिए है कि मानक कीबोर्ड कुंजी पॉप जैसा दिखता है चाहता था। यहाँ यह संदर्भ के लिए है:

संपादित 5: मैं PaintCode का डेमो संस्करण की कोशिश की और यह कोड नीचे बनाया गया। यह मेरे कस्टम दृश्य पर मेरे drawRect विधि के अंदर है। मेरी चाबियाँ चौड़ाई आमतौर पर 26.0 और 3 9 .0 की ऊंचाई है। मैं उद्देश्य-सी बीटीडब्ल्यू का भी उपयोग कर रहा हूं।

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 का प्रयोग करेंगे।

आप किसी भी समय आकार परत के आकार रीसेट कर सकते हैं, और यहां तक ​​कि आकार में बदलाव, चेतन एप्पल संस्करण की तुलना में अधिक व्यापक कुछ करने के लिए।

यहाँ है कि एक वर्ग है कि पूरा करता है की एक सरल संस्करण को दर्शाता है एक खेल का मैदान के लिए कोड है:

• पत्र थोड़ा बंद कर रहे हैं:

  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 
  

  अपने मौजूदा रूप में, इस वर्ग के कई मुद्दों है केंद्र

• देखने के फ्रेम महत्वपूर्ण यह है कि पॉप क्या तैयार की है की वास्तविक फ्रेम, से नहीं शुरू होता है के फ्रेम के रूप में प्रयोग किया जाता है।
• यह केवल छोड़ दिया समर्थन करता है कुंजी पॉप्स
• कई optionals बल unwrapped
• "स्टेम" का इस्तेमाल किया पथ सिस्टम कीबोर्ड
• चर संक्षिप्तता के लिए नामित कर रहे हैं, नहीं स्पष्टता की तरह भीतरी कोने गोल है नहीं करता है

हालांकि यह आपको प्राप्त करने के लिए एक अच्छा आधार प्रदान करना चाहिए।

Answer 2

फ़ोटोशॉप में एनीमेशन या कुछ अलग छवियों के रूप में एनीमेशन फ्रेम को आउटपुट करने के लिए सबसे आसान हो सकता है, फिर UIImageView (docs) को एनिमेट करें।

तो बस पॉपअप बात की पृष्ठभूमि ऊपर उल्लेख तरह से चेतन तो कर सकते हैं या तो पत्र एनीमेशन के साथ में फीका है, या ध्यान से पृष्ठभूमि एनीमेशन