Creating a scalable three-line Nav-icon menu for a button in swift 2

Question

How to make my button scalable? Programmatically using a vector or something else? This is just a typical triple line navigation icon. Is there an easy way to create a clear, scalable icon without using images?

Answer 1

Yes, you can create icons using Core Graphics. Follow these simple 4 steps to draw a 3 bar button icon.

1) Add UIButtonto your storyboard and place it.

2) Create a Cocoa UIButton base class class name it as "NavButton" and paste the 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) NavButton UIButton Identity Inspector > Custom Class > Class field

4) Attribute Inspector > Default Title ()

, ,

Answer 2

@KamaalABOOTHALIB 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()
    }

}