iOS 不规则Button点击（二）

￡神魔★判官ぃ 2022-10-01 09:58 6阅读 0赞

## 前言 ##

在上一篇文章[iOS 不规则Button点击][iOS _Button]中，讲述了按钮在设置了不规则图片情况下的响应处理。

这篇文章讲述按钮不规则的另一种情况：**当按钮的形状是由我们自己绘制出来的时候。**

这里我们直接开始代码的编写了，关于事件传递机制可以在上一篇文章[iOS 不规则Button点击][iOS _Button]回顾一下。

关于不规则按钮的源码你们可以去[JTShapedButton][]中查看。

## 按钮定义 ##

这里创建了一个继承自UIButton的子类 IrregularButton。 并提供了三个方法供外界设置：

// 方法都返回了自身，使外界可以链式调用
    func path(type: BtnType) -> IrregularButton               // 设置要绘制的path
    func backgroundColor(color: UIColor) -> IrregularButton   // 设置背景颜色
    func text(text: String) -> IrregularBtn                   // 设置文字
    复制代码

// 这里定义了一个枚举，定义了我们这个例子中按钮绘制的类型
    enum BtnType {
        case leftUp
        case leftDown
        case rightUp
        case rightDown
        case center
    }
    
    class IrregularButton: UIButton {
        
        // 绘制出图形的path
        private var path = UIBezierPath()
        
        // 最终要呈现的图形
        private var drawLayer = CAShapeLayer()
        
        // 显示我们需要显示的文字
        private var textLayer = CATextLayer()
        
        override init(frame: CGRect) {
            super.init(frame: frame)
            
            // 将要显示的layer添加到自身的layer中
            self.layer.addSublayer(self.drawLayer)
            self.layer.addSublayer(self.textLayer)
        }
        
        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
        
        // 外部传入的path，供我们绘制
        func path(type: BtnType) -> IrregularButton {
            
            let path = UIBezierPath()
            
            switch type {
            case .leftUp:
                
                path.move(to: CGPoint(x: 60, y: 100))
                path.addLine(to: CGPoint(x: 0, y: 100))
                path.addArc(withCenter: CGPoint(x: 100, y: 100), radius: 100, startAngle: .pi, endAngle: .pi*1.5, clockwise: true)
                path.addLine(to: CGPoint(x: 100, y: 60))
                path.addArc(withCenter: CGPoint(x: 100, y: 100), radius: 40, startAngle: .pi*1.5, endAngle: .pi, clockwise: false)
                path.close()
                
                self.path = path
                
            case .leftDown:
                path.move(to: CGPoint(x: 60, y: 100))
                path.addLine(to: CGPoint(x: 0, y: 100))
                path.addArc(withCenter: CGPoint(x: 100, y: 100), radius: 100, startAngle: .pi, endAngle: .pi*0.5, clockwise: false)
                path.addLine(to: CGPoint(x: 100, y: 140))
                path.addArc(withCenter: CGPoint(x: 100, y: 100), radius: 40, startAngle: .pi*0.5, endAngle: .pi, clockwise: true)
                path.close()
                
                self.path = path
            case .rightUp:
                path.move(to: CGPoint(x: 100, y: 60))
                path.addLine(to: CGPoint(x: 100, y: 0))
                path.addArc(withCenter: CGPoint(x: 100, y: 100), radius: 100, startAngle: .pi*1.5, endAngle: 0, clockwise: true)
                path.addLine(to: CGPoint(x: 140, y: 100))
                path.addArc(withCenter: CGPoint(x: 100, y: 100), radius: 40, startAngle: 0, endAngle: .pi*1.5, clockwise: false)
                path.close()
                
                self.path = path
            case .rightDown:
                path.move(to: CGPoint(x: 140, y: 100))
                path.addLine(to: CGPoint(x: 200, y: 100))
                path.addArc(withCenter: CGPoint(x: 100, y: 100), radius: 100, startAngle: 0, endAngle: .pi*0.5, clockwise: true)
                path.addLine(to: CGPoint(x: 100, y: 140))
                path.addArc(withCenter: CGPoint(x: 100, y: 100), radius: 40, startAngle: .pi*0.5, endAngle: 0, clockwise: false)
                path.close()
                
                self.path = path
            case .center:
                path.move(to: CGPoint(x: 140, y: 100))
                path.addArc(withCenter: CGPoint(x: 100, y: 100), radius: 40, startAngle: 0, endAngle: .pi*2, clockwise: true)
                path.close()
                
                self.path = path
            }
            
            self.drawLayer.path = self.path.cgPath
    
            // 绘制完成，通知layer去刷新界面
            setNeedsDisplay()
            
            return self
        }
        
        // 设置需要显示的文字
        func text(text: String) {
            
            // 获取显示文字的size
            let stringSize = text.boundingRect(with: CGSize(width:100,height:CGFloat.greatestFiniteMagnitude), options: .usesLineFragmentOrigin, attributes: [NSAttributedString.Key.font:UIFont.systemFont(ofSize: 14)], context: nil).size
            
            // 设置textLayer的位置
            textLayer.frame = CGRect(x: self.path.bounds.origin.x+(self.path.bounds.size.width/2)-(stringSize.width/2), y: self.path.bounds.origin.y+(self.path.bounds.size.height/2)-(stringSize.height/2), width: stringSize.width, height: stringSize.height)
            
            textLayer.string = NSAttributedString(string: text, attributes: [NSAttributedString.Key.foregroundColor:UIColor.black,
                NSAttributedString.Key.font:UIFont.systemFont(ofSize: 14)])
            textLayer.backgroundColor = UIColor.clear.cgColor
            
            textLayer.isWrapped = false//设置是否自动换行
            textLayer.contentsScale = UIScreen.main.scale//寄宿图的像素尺寸和视图大小的比例,不设置为屏幕比例文字就会像素化
            
            setNeedsDisplay()
        }
        
        // 设置按钮的背景颜色
        func backgroundColor(color: UIColor) -> IrregularButton {
            
            self.drawLayer.fillColor = color.cgColor
            
            setNeedsDisplay()
            
            return self
        }
        
        // 重写此方法。判断点是否在自身path所包含的区域内。包含则返回true，代表自身处理；否则返回false。
        override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
            if self.path.contains(point) {
                return true
            } 
            return false
        }
    }
    复制代码

## 按钮添加 ##

在controller界面中，创建按钮组并添加到界面上。

class ViewController: UIViewController {
    
        private let BTN_TAG = 1001
        
        override func viewDidLoad() {
            super.viewDidLoad()
            
            let colorArr = [UIColor(red: 231/255, green: 15/255, blue: 0, alpha: 1),
                            UIColor(red: 237/255, green: 218/255, blue: 0, alpha: 1),
                            UIColor(red: 248/255, green: 160/255, blue: 0, alpha: 1),
                            UIColor(red: 103/255, green: 226/255, blue: 103/255, alpha: 1),
                            UIColor(red: 67/255, green: 196/255, blue: 242/255, alpha: 1)]
            
            let typeArr: [BtnType] = [.leftUp, .rightUp, .leftDown, .rightDown, .center]
            
            for index in 0..<colorArr.count {
                let color = colorArr[index]
                let type = typeArr[index]
                
                let btn = IrregularBtn(frame: CGRect(x: 80, y: 100, width: 200, height: 200))
                
                btn.path(type: type)
                    .backgroundColor(color: color)
                    .text(text: "功能\(index+1)")
                    .addTarget(self, action: #selector(btnClick(_:)), for: .touchUpInside)
                btn.tag = BTN_TAG + index
                
                self.view.addSubview(btn)
            }
        }
        
        @objc func btnClick(_ sender: UIButton) {
            var str: String
            switch sender.tag {
            case 1001:
                str = "LeftUp Button"
            case 1002:
                str = "RightUp Button"
            case 1003:
                str = "LeftDown Button"
            case 1004:
                str = "RightDown Button"
            default:
                str = "Center Button"
            }
            
            print("current click event is \(str)")
        }
    }
    复制代码

## 实现效果 ##

转载于:https://juejin.im/post/5cad816e6fb9a068b7489e62

[iOS _Button]: https://juejin.im/post/5caaeabf5188256347611818
[JTShapedButton]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FCoderJTao%2FJTShapedButton