定製的UIButton外觀在夫特2.0

Question

我想自定義一個UIButton在夫特2.0，看起來像下面的圖片：

http://i.imgur.com/P8nGdHd.png

• 梯度從雲：＃b1ffb1（淺綠色）到＃ e7e7e7（白色/灰色色調）
• 中風：2DP寬度，用＃999999（實心灰色）的彩色
• 左上/右角球的20dp

半徑

按壓

時，此按鈕將變成一個灰色梯度
• 壓梯度：＃717171（深灰色）到#acacac（淺灰色）
• 相同的行程
• 相同的半徑

---

我的嘗試：

我的應用程序中有很多按鈕，幾個按鈕將具有相同的外觀。所以我覺得爲我的自定義按鈕創建單獨的類是最佳選擇。

這是我複製該按鈕原始的嘗試：

import Foundation 
import UIKit 
import QuartzCore 

class CustomButtonTopGreen: UIButton { 


required init(coder aDecoder: NSCoder) { 
    super.init(coder: aDecoder)! 
    self.layer.cornerRadius = 20; 
    self.layer.borderColor = UIColor.grayColor().CGColor 
    self.layer.borderWidth = 2 
    self.backgroundColor = UIColor.greenColor() 
    self.tintColor = UIColor.whiteColor() 
    } 
} 

這將產生： http://i.imgur.com/iUdX81W.png

所以我的問題是：

• 我如何可以將十六進制顏色代碼？
• 如何添加漸變？
• 我該如何定製各個角落？
• 我該如何添加一個「On Pressed」視圖到這個按鈕？

我對這個話題做了很多研究，但沒有運氣。我嘗試將代碼示例粘貼到我的代碼中，嘗試操作它以查看它是否合適，但我仍然以錯誤結束。

任何幫助將不勝感激！

Answer 1

你也可以繼承的UIButton並繪製在drawRect中創建一個子類像這樣：

import UIKit 


class CustomButtonTopGreen: UIButton { 
    let cornerRadius:CGFloat = 20.0 
    let borderLineWidth:CGFloat = 2.0 
    var bezierPath:UIBezierPath = UIBezierPath() 
    var gradientLayer:CAGradientLayer = CAGradientLayer() 
    var bottomLayer:UInt32 = 0 

    override func drawRect(rect: CGRect) { 
     if self.state != UIControlState.Highlighted 
     { 
      self.drawBorder() 

      let gradient: CAGradientLayer = CAGradientLayer() 
      gradient.frame = self.bounds 
      gradient.colors = [self.UIColorFromRGB(0xb1ffb1).CGColor, self.UIColorFromRGB(0xe7e7e7).CGColor] 
      self.gradientLayer = gradient 

      let mask = CAShapeLayer(); 
      mask.frame = self.bounds; 

      mask.path = self.bezierPath.CGPath; 
      mask.fillColor = UIColor.blackColor().CGColor; 
      mask.strokeColor = UIColor.blackColor().CGColor; 
      gradient.mask = mask; 

      let shape = CAShapeLayer(); 
      shape.path = self.bezierPath.CGPath 
      shape.lineWidth = borderLineWidth 
      shape.strokeColor = UIColor.lightGrayColor().CGColor 
      shape.fillColor = UIColor.clearColor().CGColor 

      self.gradientLayer.removeFromSuperlayer() 
      self.layer.insertSublayer(gradient, atIndex: bottomLayer) 
      self.layer.addSublayer(shape) 
      self.bottomLayer++ 

     }else{ 
      self.drawBorder() 
      let gradient: CAGradientLayer = CAGradientLayer() 
      gradient.frame = self.bounds 
      gradient.colors = [self.UIColorFromRGB(0x717171).CGColor, self.UIColorFromRGB(0xacacac).CGColor] 
      self.gradientLayer = gradient 
      let mask = CAShapeLayer(); 
      mask.frame = self.bounds; 

      self.bezierPath.lineWidth = 4.0 
      mask.path = self.bezierPath.CGPath; 
      mask.fillColor = UIColor.blackColor().CGColor; 
      mask.strokeColor = UIColor.blackColor().CGColor; 
      gradient.mask = mask; 

      let shape = CAShapeLayer(); 
      shape.path = self.bezierPath.CGPath 
      shape.lineWidth = borderLineWidth 
      shape.strokeColor = UIColor.lightGrayColor().CGColor 
      shape.fillColor = UIColor.clearColor().CGColor 

      self.gradientLayer.removeFromSuperlayer() 
      self.layer.insertSublayer(gradient, atIndex: bottomLayer) 
      self.layer.addSublayer(shape) 
      self.bottomLayer++ 
     } 
    } 

    func drawBorder(){ 
    let path: UIBezierPath = UIBezierPath() 
    path.moveToPoint(CGPoint(x: borderLineWidth, y: self.bounds.size.height-borderLineWidth)) 
    path.addLineToPoint(CGPoint(x: borderLineWidth, y: cornerRadius+borderLineWidth)) 
    path.addQuadCurveToPoint(CGPoint(x: cornerRadius+borderLineWidth, y: borderLineWidth), controlPoint:CGPoint(x:borderLineWidth, y:borderLineWidth)) 
    path.addLineToPoint(CGPoint(x: self.bounds.size.width-cornerRadius-borderLineWidth, y: borderLineWidth)) 
    path.addQuadCurveToPoint(CGPoint(x: self.bounds.size.width-borderLineWidth, y: cornerRadius+borderLineWidth), controlPoint: CGPointMake(self.bounds.size.width-borderLineWidth, borderLineWidth)) 
    path.addLineToPoint(CGPoint(x: self.bounds.size.width-borderLineWidth, y: self.bounds.size.height-borderLineWidth)) 
    path.closePath() 
    path.lineWidth = borderLineWidth 
    self.bezierPath = path 
} 

    func UIColorFromRGB(rgbValue: UInt) -> UIColor { 
     return UIColor(
      red: CGFloat((rgbValue & 0xFF0000) >> 16)/255.0, 
      green: CGFloat((rgbValue & 0x00FF00) >> 8)/255.0, 
      blue: CGFloat(rgbValue & 0x0000FF)/255.0, 
      alpha: CGFloat(1.0) 
     ) 
    } 

    override var highlighted: Bool { 
     didSet { 

      self.setNeedsDisplay() 

     } 
    } 


} 

你應該找出與高亮gradientLayer代替正常gradientLayer一個更好的方式，但它的工作原理是是。