Swift - 自定义 UIButton 标题未显示

问题描述

我想创建六边形按钮，如果它们以“蜂窝”方式显示，则不会重叠，并且只能选择正确的按钮。我找到了屏蔽 UIView here 的子类，并将它用于我的 UIButton 类来进行屏蔽。它工作正常！

当我在视图中生成按钮时，按钮标题不可见。研究表明我需要使用 super.layoutSubviews() 能够显示标题的文本。我的打印方法显示标题已正确填充并且它与另一个对象类对应，但无论如何，标题不会显示。预期标题为“H”，打印日志显示标题存在于第一个按钮中：

Getting category: Category(date: 2021-07-11 10:29:45 +0000,categoryID: "C1",categoryTitle: "Home",shortTitle: "H",categoryColor: UIExtendedSRGBColorSpace   0.403922 0.643137 0.921569 1,isDefault: false)
setupProperties short title: H
Short button title: H
Button Title: Optional("H")
Getting category: Category(date: 2021-07-11 10:15:50 +0000,categoryID: "C2",categoryTitle: "",shortTitle: "",categoryColor: UIExtendedSRGBColorSpace 0.960784 0.960784 0.960784 1,isDefault: true)
setupProperties short title: 
Short button title: 
Button Title: nil

我什至尝试向 UIButton 子视图添加另一个标签，并以相同的方法将此标签置于最前面，但它也不会显示。

是否有另一种方法可以强制自定义按钮显示标题文本，或者我是否必须在与按钮相同的位置创建带有标题的 UILabel 并将其放置在按钮上方的图层中？这种方法不是首选...

是不是因为UIButton被多边形遮住了？

六角按钮类：

class HexaButton: UIButton {

var path: UIBezierPath!
var category: Category!


init(cat: Category) {
    super.init(frame: CGRect())
    self.category = cat
    self.setupProperties()
    //self.layoutSubviews()
}

required init?(coder: NSCoder) {
    super.init(coder: coder)
    self.setupProperties()
    //self.layoutSubviews()
    fatalError("init(coder:) has not been implemented")
}

override func awakeFromNib() {
    addTarget(self,action: #selector(touchDown),for: .touchDown)
    self.setupProperties()
    //self.layoutSubviews()
}

private func setupProperties(){
    self.titleLabel?.font = UIFont.boldSystemFont(ofSize: 10)
    self.setTitleColor(UIColor.white,for: .normal)
    self.setTitle(category.shortTitle,for: .normal)
    
    print("setupProperties short title: \(category.shortTitle)")

}

override func layoutSubviews() {
    super.layoutSubviews()
    self.titleLabel?.font = UIFont.boldSystemFont(ofSize: 10)
    self.setTitleColor(UIColor.white,for: .normal)
}

override func draw(_ rect: CGRect) {
  
    let linewidth: CGFloat = 5
    path = self.roundedpolygonPath(rect: self.bounds,linewidth: linewidth,sides: 6,cornerRadius: 10,rotationOffset: CGFloat(.pi / 2.0))

    let shapeLayer = CAShapeLayer()
    shapeLayer.strokeColor = category.categoryColor.cgColor
    shapeLayer.fillColor = category.categoryColor.cgColor
    shapeLayer.path = path.cgPath
    layer.addSublayer(shapeLayer)
}

@objc func touchDown(button: HexaButton,event: UIEvent) {
    if let touch = event.touches(for: button)?.first {
        let location = touch.location(in: button)

        if path.contains(location) == false {
            button.cancelTracking(with: nil)
        }
    }
}

public func roundedpolygonPath(rect: CGRect,linewidth: CGFloat,sides: NSInteger,cornerRadius: CGFloat,rotationOffset: CGFloat = 0) -> UIBezierPath {
        let path = UIBezierPath()
        let theta: CGFloat = CGFloat(2.0 * .pi) / CGFloat(sides) // How much to turn at every corner
        let width = min(rect.size.width,rect.size.height)        // Width of the square
        
        let center = CGPoint(x: rect.origin.x + width / 2.0,y: rect.origin.y + width / 2.0)
        
        // Radius of the circle that encircles the polygon
        // Notice that the radius is adjusted for the corners,that way the largest outer
        // dimension of the resulting shape is always exactly the width - linewidth
        let radius = (width - linewidth + cornerRadius - (cos(theta) * cornerRadius)) / 2.0
        
        // Start drawing at a point,which by default is at the right hand edge
        // but can be offset
        var angle = CGFloat(rotationOffset)
        
        let corner = CGPoint(x: center.x + (radius - cornerRadius) * cos(angle),y: center.y + (radius - cornerRadius) * sin(angle))
        path.move(to: CGPoint(x: corner.x + cornerRadius * cos(angle + theta),y: corner.y + cornerRadius * sin(angle + theta)))
        
        for _ in 0..<sides {
            angle += theta
            
            let corner = CGPoint(x: center.x + (radius - cornerRadius) * cos(angle),y: center.y + (radius - cornerRadius) * sin(angle))
            let tip = CGPoint(x: center.x + radius * cos(angle),y: center.y + radius * sin(angle))
            let start = CGPoint(x: corner.x + cornerRadius * cos(angle - theta),y: corner.y + cornerRadius * sin(angle - theta))
            let end = CGPoint(x: corner.x + cornerRadius * cos(angle + theta),y: corner.y + cornerRadius * sin(angle + theta))
            
            path.addLine(to: start)
            path.addQuadCurve(to: end,controlPoint: tip)
        }
        
        path.close()
        
        // Move the path to the correct origins
        let bounds = path.bounds
        let transform = CGAffineTransform(translationX: -bounds.origin.x + rect.origin.x + linewidth / 2.0,y: -bounds.origin.y + rect.origin.y + linewidth / 2.0)
        path.apply(transform)
        
        return path
    }
}

有人能指出我正确的方向吗，我错过了什么？谢谢

解决方法

当你覆盖平局时 -

override func draw(_ rect: CGRect) {
}

和

您没有调用 super.draw(rect)，这意味着您不会得到任何 UIButton 的绘图。

您可以删除 draw(_ rect: CGRect) 实现并将形状层代码移到 layoutSubviews() 方法中。

此外，您不应该在每次调用时都添加一个新层。考虑以下之一 -

只添加一次形状图层并在每次调用时更新它的框架。
每次都添加新的形状图层（在添加新实例之前删除旧实例）。

这将使您恢复 UIButton 的内置绘图。

此外，当您添加图层时，您正在调用 addSublayer，它将在按钮的图层层次结构中的所有其他内容之上添加您的子图层，从而完全覆盖由按钮的默认绘图呈现的任何内容。

考虑使用 insertSublayer 变体 - at: index OR below: sublayer 等

custom-button ios ios swift swift swift swift