zoukankan      html  css  js  c++  java
  • iOS tabbar 自定义小红点 消息显示,定制边框、颜色、高宽

    一般我们需要显示消息数,会利用到系统提供的api

    UIApplication.sharedApplication().applicationIconBadgeNumber = 10

     

    但如果我们不想显示个数、会想加一点自定义效果,如边框颜色、自定义背景等,这种情况下,还是自己自定义会更好。

    进入正题:

    1、新建iOS类别Category文件,如TabbarExtension.swift

     

    2、新建方法

    添加小红点:

    func showBadgeOnItemIndex(index:Int,corner:CGFloat = 4.0) {
            
            //移除之前的小红点
            removeBadgeOnItemIndex(index)
            
            //新建小红点
            let badgeView = UIView()
            badgeView.tag = 888 + index
            badgeView.layer.borderColor = UIColor.whiteColor().CGColor
            badgeView.layer.borderWidth = 1
            badgeView.layer.cornerRadius = corner
            badgeView.backgroundColor = UIColor.redColor()
            let tabFrame:CGRect = self.frame
            
            //确定小红点的位置
            let WH:CGFloat = corner*2
            let percentX = (CGFloat(index) + 0.6) / TabbarItemNums
            let x:CGFloat = percentX * tabFrame.size.width
            let y:CGFloat = 0.16 * tabFrame.size.height
            badgeView.frame = CGRectMake(x, y, WH, WH)
            self.addSubview(badgeView)
            print(badgeView.frame)
        }
    

      

    移除小红点:

     
        func removeBadgeOnItemIndex(index:Int) {
            for v in self.subviews {
                if v.tag == BasicTag+index {
                    v.removeFromSuperview()
                }
            }
        }
    

      

    控制器内使用:

      self.tabBarController?.tabBar.showBadgeOnItemIndex(1, corner: 4)
    

      

    上面会用到宏定义:

    let BasicTag:Int = 999

    let TabbarItemNums:CGFloat = 4.0

     

    红点默认半径4.0,这里,如果想实现自己的效果,可以添加代码自定义。

     

    完毕。

    效果图:

     

     

     

  • 相关阅读:
    『Python』装饰器
    『Yaml』配置文件读写包
    『Python CoolBook』数据结构和算法_字典比较&字典和集合
    『TensorFlow』滑动平均
    在ASP.NET 5中如何方便的添加前端库
    使用VS把ASP.NET 5的应用发布到Linux的Docker上
    CQRS及.NET中的参考资料
    ASP.NET Identity 3.0教程
    对ASP.NET 5和ASP.NET MVC 6应用程序进行集成测试
    Bootstrap看厌了?试试Metro UI CSS吧
  • 原文地址:https://www.cnblogs.com/yajunLi/p/5715388.html
Copyright © 2011-2022 走看看