该按钮是否有任何特定名称，如何轻松制作？ [复制]答案

【问题标题】：Is there any specific name of that Button and How can I make it easily? [duplicate]该按钮是否有任何特定名称，如何轻松制作？ [复制]
【发布时间】：2020-11-12 15:48:12
【问题描述】：

我需要像图片一样的可点击按钮（有 4 个按钮显示填充和空状态）。它是一个特定的 ui 组件，还是我必须自己使用一种自定义圆形按钮或其他东西来制作它？我需要使用工具选项吗？

【问题讨论】：

这是一个单选按钮，在 Swift 中还没有做任何事情。最相似的（作为行为）是tableView左侧的“检查”。在原生应用中：Settings.app/WiFi/Confirm access，可以选择无、通知、询问。
@Larme 谢谢，单选按钮打开了我的方式，这里有类似的问题

标签： objective-c swift uikit

【解决方案1】：

我已经用 UIKit 的原生工具做了一个。

代码如下：

    import UIKit
    import Foundation
    @IBDesignable
    public class CustomRadioButton: UIButton {
    
    internal var outerCircleLayer = CAShapeLayer()
    internal var innerCircleLayer = CAShapeLayer()
    
    
    @IBInspectable public var outerCircleColor: UIColor = UIColor.yellow {
        didSet {
            outerCircleLayer.strokeColor = outerCircleColor.cgColor
        }
    }
    public var innerCircleCircleColor: UIColor = UIColor.black {
        didSet {
            setFillState()
        }
    }
    
    public var outerCircleLineWidth: CGFloat = 3.0
        
    public var innerCircleGap: CGFloat = 0.0
    
    override public init(frame: CGRect) {
        super.init(frame: frame)
        customInitialization()
    }
    // MARK: Initialization
    required public init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        customInitialization()
    }
   internal var setCircleRadius: CGFloat {
        let width = bounds.width
        let height = bounds.height
        
        let length = width > height ? height : width
        return (length - outerCircleLineWidth) / 2
    }
    


private var setCircleFrame: CGRect {
        let width = bounds.width
        let height = bounds.height
        
        let radius = setCircleRadius
        let x: CGFloat
        let y: CGFloat
        
        if width > height {
            y = outerCircleLineWidth / 2
            x = (width / 2) - radius
        } else {
            x = outerCircleLineWidth / 2
            y = (height / 2) - radius
        }
        
        let diameter = 2 * radius
        return CGRect(x: x, y: y, width: diameter, height: diameter)
    }
    
    private var circlePath: UIBezierPath {
        return UIBezierPath(roundedRect: setCircleFrame, cornerRadius: setCircleRadius)
    }
    
    private var fillCirclePath: UIBezierPath {
        let trueGap = innerCircleGap + (outerCircleLineWidth / 2)
        return UIBezierPath(roundedRect: setCircleFrame.insetBy(dx: trueGap, dy: trueGap), cornerRadius: setCircleRadius)
        
    }
    
    private func customInitialization() {
        outerCircleLayer.frame = bounds
        outerCircleLayer.lineWidth = outerCircleLineWidth
        outerCircleLayer.fillColor = UIColor.clear.cgColor
        outerCircleLayer.strokeColor = outerCircleColor.cgColor
        layer.addSublayer(outerCircleLayer)
        
        innerCircleLayer.frame = bounds
        innerCircleLayer.lineWidth = outerCircleLineWidth
        innerCircleLayer.fillColor = UIColor.clear.cgColor
        innerCircleLayer.strokeColor = UIColor.clear.cgColor
        layer.addSublayer(innerCircleLayer)
        
        setFillState()
    }
    
    private func setCircleLayouts() {
        outerCircleLayer.frame = bounds
        outerCircleLayer.lineWidth = outerCircleLineWidth
        outerCircleLayer.path = circlePath.cgPath
        
        innerCircleLayer.frame = bounds
        innerCircleLayer.lineWidth = outerCircleLineWidth
        innerCircleLayer.path = fillCirclePath.cgPath
    }
    
    // MARK: Custom
    private func setFillState() {
        if self.isSelected {
            innerCircleLayer.fillColor = UIColor.blue.cgColor
        } else {
            innerCircleLayer.fillColor = outerCircleColor.cgColor
        }
    }
// Overriden methods.
    override public func prepareForInterfaceBuilder() {
        customInitialization()
    }
    override public func layoutSubviews() {
        super.layoutSubviews()
        setCircleLayouts()
    }
    override public var isSelected: Bool {
        didSet {
            setFillState()
        }
    }
    
}

【讨论】：