如何使按钮可伸缩?以编程的方式使用向量还是其他什么的?它只是一个典型的三行导航图标。有没有一种简单的方法可以在不使用图像的情况下创建清晰、可伸缩的图标?
发布于 2015-12-22 08:47:02
是的,您可以使用核心图形创建图标。请遵循这些简单的4个步骤来绘制3巴按钮图标。
1)将UIButton
添加到您的故事板并放置它。
2)创建UIButton基类Cocoa类,将其命名为“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)从身份检查器>自定义类>类字段将NavButton
类释放到UIButton
4)从属性检查器>默认标题中删除按钮的默认标题(第四个)
完成,现在构建和运行您可以看到您的按钮与酒吧
发布于 2017-04-13 00:18:31
更新Swift 3的@KamaalABOOTHALIB's response:
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()
}
}
https://stackoverflow.com/questions/34411572
复制相似问题