FSA全栈行动 FSA全栈行动
首页
  • 移动端文章

    • Android
    • iOS
    • Flutter
  • 学习笔记

    • 《Kotlin快速入门进阶》笔记
    • 《Flutter从入门到实战》笔记
    • 《Flutter复习》笔记
前端
后端
  • 学习笔记

    • 《深入浅出设计模式Java版》笔记
  • 逆向
  • 分类
  • 标签
  • 归档
  • LinXunFeng
  • GitLqr

公众号:FSA全栈行动

记录学习过程中的知识
首页
  • 移动端文章

    • Android
    • iOS
    • Flutter
  • 学习笔记

    • 《Kotlin快速入门进阶》笔记
    • 《Flutter从入门到实战》笔记
    • 《Flutter复习》笔记
前端
后端
  • 学习笔记

    • 《深入浅出设计模式Java版》笔记
  • 逆向
  • 分类
  • 标签
  • 归档
  • LinXunFeng
  • GitLqr
  • AndroidUI

  • Android第三方SDK

  • Android混淆

  • Android仓库

  • Android新闻

  • Android系统开发

  • Android源码

  • Android注解AOP

  • Android脚本

  • AndroidTv开发

  • AndroidNDK

  • Android音视频

  • Android热修复

  • Android性能优化

  • Android云游戏

  • Android插件化

  • iOSUI

    • iOS - Swift 仿微信小红点(无数字)
      • 代码
      • 使用
      • 效果
    • iOS - 实现UINavigation全屏滑动返回(一)
    • iOS - 实现UINavigation全屏滑动返回(二)
    • iOS - Swift UICollectionView横向分页滚动,cell左右排版
    • iOS - Swift-UICollectionView横向分页的问题
    • iOS - Swift仿微信聊天图片显示
    • iOS - Swift-UIButton中ImageView的animationImages动画执行完毕后,图标变暗
    • iOS - Swift UITableView的scrollToRow的坑
  • iOS工具

  • iOS底层原理与应用

  • iOS组件化

  • iOS音视频

  • iOS疑难杂症

  • iOS之Swift

  • iOS之RxSwift

  • iOS开源项目

  • iOS逆向

  • Flutter开发

  • 移动端
  • iOSUI
LinXunFeng
2017-01-17
目录

iOS - Swift 仿微信小红点(无数字)

欢迎关注微信公众号:[FSA全栈行动 👋]

OC版原文链接:关于如何在每个UITabBarItem上添加提示小红点 (opens new window)

  • 以分类的方式实现

# 代码

UITabBar+Extenstion.swift

fileprivate let lxfFlag: Int = 666

extension UITabBar {
    // MARK:- 显示小红点
    func showBadgOn(index itemIndex: Int, tabbarItemNums: CGFloat = 4.0) {
        // 移除之前的小红点
        self.removeBadgeOn(index: itemIndex)
        
        // 创建小红点
        let bageView = UIView()
        bageView.tag = itemIndex + lxfFlag
        bageView.layer.cornerRadius = 5
        bageView.backgroundColor = UIColor.red
        let tabFrame = self.frame
        
        // 确定小红点的位置
        let percentX: CGFloat = (CGFloat(itemIndex) + 0.59) / tabbarItemNums
        let x: CGFloat = CGFloat(ceilf(Float(percentX * tabFrame.size.width)))
        let y: CGFloat = CGFloat(ceilf(Float(0.115 * tabFrame.size.height)))
        bageView.frame = CGRect(x: x, y: y, width: 10, height: 10)
        self.addSubview(bageView)
    }
    
    // MARK:- 隐藏小红点
    func hideBadg(on itemIndex: Int) {
        // 移除小红点
        self.removeBadgeOn(index: itemIndex)
    }
    
    // MARK:- 移除小红点
    fileprivate func removeBadgeOn(index itemIndex: Int) {
        // 按照tag值进行移除
        _ = subviews.map {
            if $0.tag == itemIndex + lxfFlag {
                $0.removeFromSuperview()
            }
        }
    }
}

# 使用

// 默认4个tabbarItem
self.tabBarController?.tabBar.showBadgOn(index: 2)
// 如果不是则用这个方法
// self.tabBarController?.tabBar.showBadgOn(index: Int, tabbarItemNums: CGFloat)

# 效果

小红点

附上相关项目:Swift 3.0 高仿微信 (opens new window)

#iOS#Swift
RePluginX - 兼容AndroidX并加入新特性开发纪要
iOS - 实现UINavigation全屏滑动返回(一)

← RePluginX - 兼容AndroidX并加入新特性开发纪要 iOS - 实现UINavigation全屏滑动返回(一)→

最近更新
01
Flutter - Xcode16 还原编译速度
04-05
02
AI - 免费的 Cursor 平替方案
03-30
03
Android - 2025年安卓真的闭源了吗
03-28
更多文章>
Theme by Vdoing | Copyright © 2020-2025 FSA全栈行动
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×