在swift 2中为按钮创建可缩放的三线菜单导航图标 [英] Create scalable Three Line Menu Nav-icon for button in swift 2

问题描述

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

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?

推荐答案

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

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

1）将 UIButton 添加到故事板和地方它。

1) Add UIButton to your storyboard and place it.

2）创建基类UIButton名称的Cocoa类，就像'NavButton'
和粘贴以下代码

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）将 NavButton 类分配给 UIButton 来自Identity Inspector>自定义类>类字段

3) Assing NavButton class to your UIButton from Identity Inspector > Custom Class > Class field

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

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

这篇关于在swift 2中为按钮创建可缩放的三线菜单导航图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！