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,这里,如果想实现自己的效果,可以添加代码自定义。

     

    完毕。

    效果图:

     

     

     

  • 相关阅读:
    ASP.NET Web API 控制器执行过程(一)
    ASP.NET Web API 控制器创建过程(二)
    ASP.NET Web API 控制器创建过程(一)
    ASP.NET Web API WebHost宿主环境中管道、路由
    ASP.NET Web API Selfhost宿主环境中管道、路由
    ASP.NET Web API 管道模型
    ASP.NET Web API 路由对象介绍
    ASP.NET Web API 开篇示例介绍
    ASP.NET MVC 视图(五)
    ASP.NET MVC 视图(四)
  • 原文地址:https://www.cnblogs.com/yajunLi/p/5715388.html
Copyright © 2011-2022 走看看