Create scalable Three Line Menu Nav-icon for butto

问题:

How can I make my button scalable? Programmatically, using vector or something else? It is just a typical navigation icon with triple lines. Is there a simple way to create crisp, scalable icon without using images?

回答1:

Yes you can create the icons using Core Graphics. Please follow these simple 4 steps to draw 3 bar button icon.

1) Add UIButton to your storyboard and place it.

2) Create Cocoa Class of base class UIButton name it like 'NavButton' and paste following code

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) Assing NavButton class to your UIButton from Identity Inspector > Custom Class > Class field

4) Remove default title of your button from Attribute Inspector > Default Title (fourth one)

Done, Now build and run you can see your button with bars

回答2:

Updating @KamaalABOOTHALIB's response for 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()
    }

}