为 swift 中的按钮创建可缩放的三行菜单导航图标 2

Question

如何使我的按钮可缩放？以编程方式，使用矢量或其他东西？它只是一个带有三重线的典型导航图标。有没有一种简单的方法可以在不使用图像的情况下创建清晰、可缩放的图标？

Answer 1

是的，您可以使用 Core Graphics 创建图标。请按照这些简单的 4 个步骤来绘制 3 栏按钮图标。

1) 添加 UIButton 到你的故事板并放置它。

2) 创建 Cocoa Class of base class UIButton 将其命名为 'NavButton' 并粘贴以下代码

import UIKit

class NavButton: UIButton {


    override func drawRect(rect: CGRect) {

    // thickness of your line
    let lineThick:CGFloat = 1.0

    // length of your line relative to your button
    let lineLenght:CGFloat = min(bounds.width, bounds.height) * 0.8

    // color of your line
    let lineColor: UIColor = UIColor.whiteColor()

    // this will add small padding from button border to your first line and other lines
    let marginGap: CGFloat = 5.0

    // we need three line
    for line in 0...2 {
        // create path
        let linePath = UIBezierPath()
        linePath.lineWidth = lineThick

        //start point of line
        linePath.moveToPoint(CGPoint(
            x: bounds.width/2 - lineLenght/2,
            y: 6.0 * CGFloat(line) + marginGap
            ))

        //end point of line
        linePath.addLineToPoint(CGPoint(
            x: bounds.width/2 + lineLenght/2,
            y: 6.0 * CGFloat(line) + marginGap
            ))
        //set line color
        lineColor.setStroke()

        //draw the line
        linePath.stroke()
    }


    }


}

3) 从 Identity Inspector > Custom Class > Class 字段将 NavButton class 分配给您的 UIButton

4) 从属性检查器 > 默认标题中删除按钮的默认标题（第四个）

完成，现在构建，运行您可以看到带条的按钮

Answer 2

正在为 Swift 更新 3:

import UIKit

class NavButton: UIButton {

override func draw(_ rect: CGRect) {

    // thickness of your line
    let lineThick:CGFloat = 1.0

    // length of your line relative to your button
    let lineLength:CGFloat = min(bounds.width, bounds.height) * 0.8

    // color of your line
    let lineColor: UIColor = UIColor.black

    // this will add small padding from button border to your first line and other lines
    let marginGap: CGFloat = 5.0

    // we need three line
    for line in 0...2 {
        // create path
        let linePath = UIBezierPath()
        linePath.lineWidth = lineThick

        //start point of line
        linePath.move(to: CGPoint(
            x: bounds.width/2 - lineLength/2,
            y: 6.0 * CGFloat(line) + marginGap
        ))

        //end point of line
        linePath.addLine(to: CGPoint(
            x: bounds.width/2 + lineLength/2,
            y: 6.0 * CGFloat(line) + marginGap
        ))
        //set line color
        lineColor.setStroke()

        //draw the line
        linePath.stroke()
    }

}

为 swift 中的按钮创建可缩放的三行菜单导航图标 2

Create scalable Three Line Menu Nav-icon for button in swift 2

icons

vector

uibutton

ios

swift