Question

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

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

渐变从：＃b1ffb1（浅绿色）到＃e7e7e7（白色/灰色色调）
笔划：宽度为2dp，颜色为＃999999（纯灰色）
左上角/右上角半径为20dp

按下此按钮将变为灰色渐变

按下渐变：＃717171（深灰色）到#acacac（浅灰色）
Same Stroke
相同的半径

我的尝试：

我的应用程序中有很多按钮，几个按钮的外观相同。所以我觉得为我的自定义按钮创建单独的类是最佳的。

这是我复制该按钮的原始尝试：

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

所以我的问题是：

如何合并十六进制颜色代码？
如何添加渐变？
我如何定制个别角落？
我怎样才能添加＆＃34; On Pressed＆＃34;查看此按钮？

我对这个话题做了很多研究，但没有运气。我尝试将代码示例粘贴到我的代码中，尝试操纵它以查看它是否适合，但我仍然会遇到错误。

非常感谢任何帮助！

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，但它可以正常工作。

在Swift 2.0中自定义UIButton外观

1 个答案: