[swift] 自定义BadgeButton

APP中总会出现收到系统消息,按钮右上方出现带数字的小红点,特写一个demo以此记录

BadgeButton.gif

首先自定义一个UIButton,在UIButton中添加一个Label,存放消息数目

//
//  BadgeNumBtn.swift
//
//

import UIKit

class BadgeNumBtn: UIButton {
    private static let kInsets = UIEdgeInsets(top: 4, left: 3, bottom: 4, right: 3)
    private static let kFont = UIFont.systemFont(ofSize: 12)

    var badgeLabelNum = 0 {
        willSet {
            if newValue > 0 {
                badgeLabel.text = "\(newValue)"
                badgeLabel.backgroundColor = UIColor.red
                badgeLabel.textColor = UIColor.white
                badgeLabel.sizeToFit()
            } else {
                badgeLabel.text = ""
                badgeLabel.backgroundColor = UIColor.clear
                badgeLabel.textColor = UIColor.clear
            }
        }
    }
    
    
    private lazy var badgeLabel: UILabel = {
        let badgeLabel = UILabel()
        badgeLabel.textAlignment = .center
        badgeLabel.layer.masksToBounds = true
        badgeLabel.font = kFont
        return badgeLabel
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.addSubview(badgeLabel)
    }
    
    required init?(coder aDecoder: NSCoder) {fatalError("init(coder:) has not been implemented")}

    override func layoutSubviews() {
        super.layoutSubviews()
        badgeLabel.frame = CGRect(x: 0, y: 0, width:badgeLabel.bounds.size.width + BadgeNumBtn.kInsets.top , height:  badgeLabel.bounds.size.width + BadgeNumBtn.kInsets.top * 2)
        badgeLabel.center = CGPoint(x: self.bounds.size.width, y: 0)
        badgeLabel.layer.cornerRadius = badgeLabel.bounds.size.width * 0.5

    }
}

使用方法直接继承自定义的BadgeButton,将消息数设置即可

    
    override func viewDidLoad() {
        super.viewDidLoad()

        
        var badgeBtn = BadgeNumBtn()//初始化

        //不带参
        badgeBtn.addTarget(self, action: #selector(badgeBtnClick(_:)), for: .touchUpInside)
        view.addSubview(badgeBtn)
        badgeBtn.backgroundColor = UIColor.cyan
        badgeBtn.snp.makeConstraints { (make) in
            make.right.equalTo(self.view).offset(-20)
            make.top.equalTo(self.view).offset(80)
            make.width.equalTo(100)
            make.height.equalTo(40)
        }
        
        badgeBtn.badgeLabelNum = 10
        
        codeView.addSubview(randomCaptchaView)
        randomCaptchaView.snp.makeConstraints { (make) in
            make.edges.equalTo(self.codeView)
        }
    }
    
    func badgeBtnClick(_ sender: BadgeNumBtn){
        
        sender.badgeLabelNum -= 1
        
    }

534E3B71-C534-4C2C-9149-272E7ED55E58.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,241评论 4 61
  • 12点钟的灰姑娘 穿上了 不合脚的水晶鞋 她应该 遇到高大英俊的王子 将所有的美好都成全 城堡里的白雪公主 咽下了...
    哥窑阅读 315评论 0 2
  • 不自信,那就让自己变得更好
    另一面的自己阅读 215评论 0 0
  • 自我总结: 颜色没上好。下半部分太冷了,都带着绿色调,层次不够丰富。应该再掺杂一点暖色调比如橙色什么的,阴影用紫色...
    喵喵僧阅读 590评论 5 11
  • 武陵山区秋至冬,伐薪烧炭乐其中,火子闭炭打脱火,柔弱书生是英雄。在湘西山区的乡村里,冬季取暖是在厨房旁大大的火坑里...
    崖柏人生阅读 808评论 0 2