在 Swift 2.0 中自定义 UIButton 外观

Question

我想在 Swift 2.0 中自定义一个 UIButton，如下图所示：

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

所以我的问题是：

• 如何合并十六进制颜色代码？
• 如何添加渐变？
• 如何自定义各个角？
• 如何向此按钮添加“按下时”视图？

我对该主题进行了很多研究，但没有运气。我尝试将代码示例粘贴到我的代码中，尝试对其进行操作以查看它是否适合，但我仍然会遇到错误。

任何帮助将不胜感激！

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()

        }
    }


}

您应该想出一个更好的方法来用突出显示的渐变层替换普通的渐变层，但它可以按原样工作。