在app中往往会需要去显示一些通知的信息的个数,往往是在图标上面加一个红色的小圆圈,然后在上面动态的显示在消息的个数,就像微信中提示信息的个数一样。效果图如下:
现将如图红色圆圈的中的数字显示样式封装如下:
import UIKit
class Info: UILabel {
var defaultInsets = CGSize(width: 2, height: 2)
var actualInsets = CGSize()
convenience init() {
self.init(frame: CGRect())
}
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setup()
}
private func setup() {
translatesAutoresizingMaskIntoConstraints = false
layer.backgroundColor = UIColor.redColor().CGColor
textColor = UIColor.whiteColor()
// Shadow
layer.shadowOpacity = 0.5
layer.shadowOffset = CGSize(width: 0, height: 0)
layer.shadowRadius = 0.5
layer.shadowColor = UIColor.blackColor().CGColor
self.textAlignment = NSTextAlignment.Center
}
// Add custom insets
// --------------------
override func textRectForBounds(bounds: CGRect, limitedToNumberOfLines numberOfLines: Int) -> CGRect {
let rect = super.textRectForBounds(bounds, limitedToNumberOfLines: numberOfLines)
actualInsets = defaultInsets
let rectWithDefaultInsets = CGRectInset(rect, -actualInsets.width, -actualInsets.height)
// If width is less than height
// Adjust the width insets to make it look round
if rectWithDefaultInsets.width < rectWithDefaultInsets.height {
actualInsets.width = (rectWithDefaultInsets.height - rect.width) / 2
}
return CGRectInset(rect, -actualInsets.width, -actualInsets.height)
}
override func drawTextInRect(rect: CGRect) {
layer.cornerRadius = rect.height / 2
let insets = UIEdgeInsets(
top: actualInsets.height,
left: actualInsets.width,
bottom: actualInsets.height,
right: actualInsets.width)
let rectWithoutInsets = UIEdgeInsetsInsetRect(rect, insets)
super.drawTextInRect(rectWithoutInsets)
}
}
调用使用的代码如下:
例如:
var noticeNum:Info!
noticeNum = Info(frame: CGRect(x:100, y:100, width : 25, height : 25))
noticeNum.text = "31"
self.View.addSubview(noticeNum)