iOS开发：如何为代码创建的UIButton添加UIBezierPath绘制的前进图标？

没问题！我来帮你在紫色圆形按钮里绘制那个前进图标，下面是具体的实现步骤和完整代码：

步骤1：完善圆形按钮的基础设置 #

首先确保按钮始终保持圆形，在viewDidLayoutSubviews里把cornerRadius设为按钮宽高的一半，这样按钮尺寸变化时也能维持圆形：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    forwardButton.layer.cornerRadius = forwardButton.bounds.width / 2
    forwardButton.layer.masksToBounds = true
    // 在这里调用图标绘制方法
    addForwardIcon(to: forwardButton)
}

步骤2：用UIBezierPath绘制前进箭头 #

创建一个专门的方法，通过UIBezierPath绘制前进箭头的路径，再把路径转换成CAShapeLayer添加到按钮上，这样图标能自适应按钮尺寸：

func addForwardIcon(to button: UIButton) {
    // 先移除旧的图标图层，避免重复添加
    button.layer.sublayers?.filter { $0.name == "forwardIcon" }.forEach { $0.removeFromSuperlayer() }
    
    let iconLayer = CAShapeLayer()
    iconLayer.name = "forwardIcon"
    iconLayer.fillColor = UIColor.white.cgColor // 图标设为白色，和紫色按钮搭配
    
    // 给图标留一点边距，避免贴满按钮
    let inset: CGFloat = button.bounds.width * 0.3
    let drawingRect = button.bounds.insetBy(dx: inset, dy: inset)
    
    // 绘制向右的三角形箭头路径
    let path = UIBezierPath()
    path.move(to: CGPoint(x: drawingRect.minX, y: drawingRect.midY)) // 起点：左侧中点
    path.addLine(to: CGPoint(x: drawingRect.maxX, y: drawingRect.minY)) // 右上点
    path.addLine(to: CGPoint(x: drawingRect.maxX, y: drawingRect.maxY)) // 右下点
    path.close() // 闭合路径形成三角形
    
    iconLayer.path = path.cgPath
    button.layer.addSublayer(iconLayer)
}

步骤3：整合完整代码 #

把你的现有代码和上面的方法整合，最终的ViewController代码如下：

import UIKit

class ViewController: UIViewController {
    
    let forwardButton: UIButton = {
        let fb = UIButton()
        fb.translatesAutoresizingMaskIntoConstraints = false
        fb.backgroundColor = UIColor(red: 0.56, green: 0.07, blue: 1.00, alpha: 1.0)
        // 按需添加点击事件
        fb.addTarget(self, action: #selector(forwardButtonTapped), for: .touchUpInside)
        return fb
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(forwardButton)
        
        // 设置按钮的尺寸约束，这里固定为50x50的圆形
        NSLayoutConstraint.activate([
            forwardButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            forwardButton.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            forwardButton.widthAnchor.constraint(equalToConstant: 50),
            forwardButton.heightAnchor.constraint(equalToConstant: 50)
        ])
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        forwardButton.layer.cornerRadius = forwardButton.bounds.width / 2
        forwardButton.layer.masksToBounds = true
        addForwardIcon(to: forwardButton)
    }
    
    func addForwardIcon(to button: UIButton) {
        button.layer.sublayers?.filter { $0.name == "forwardIcon" }.forEach { $0.removeFromSuperlayer() }
        
        let iconLayer = CAShapeLayer()
        iconLayer.name = "forwardIcon"
        iconLayer.fillColor = UIColor.white.cgColor
        
        let inset: CGFloat = button.bounds.width * 0.3
        let drawingRect = button.bounds.insetBy(dx: inset, dy: inset)
        
        let path = UIBezierPath()
        path.move(to: CGPoint(x: drawingRect.minX, y: drawingRect.midY))
        path.addLine(to: CGPoint(x: drawingRect.maxX, y: drawingRect.minY))
        path.addLine(to: CGPoint(x: drawingRect.maxX, y: drawingRect.maxY))
        path.close()
        
        iconLayer.path = path.cgPath
        button.layer.addSublayer(iconLayer)
    }
    
    @objc func forwardButtonTapped() {
        print("前进按钮被点击啦")
    }
}

小Tips #

• 调整inset的数值可以改变图标大小，比如把0.3改成0.25，图标会更饱满；
• 如果要换图标颜色，修改iconLayer.fillColor的颜色值即可；
• 用CAShapeLayer实现的图标会随按钮缩放自适应，不会出现模糊问题。

内容的提问来源于stack exchange，提问作者kamalakshi hegde