ios - 在 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

所以我的问题是:

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

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

如有任何帮助，我们将不胜感激!

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，但它按原样工作。