一、前言
-
一次比较懒的想法,不想自定义UITabBar,也不想用第三方框架,于是想尝试修改苹果私有类来达到部分效果
-
效果如下
- 点击tabBar 上的按钮,图片有变大再变小的动画
- tabBar 上某个按钮(购物车按钮),点击弹出控制器是modal出来的,并不属于UITabBarController管理的
- 上述购物车按钮,是后面加到tabBar 上的自定义的按钮UIButton,本身没有右上角的badge的提示,懒得话,就用
系统UITabBarButton 的badge - 点击商品的加号按钮,实现tabBar上购物车按钮 显示的badge的数字的改变,并实现变大变小的动画
二、相关说明
-
在swift3及xcode8 beta2 环境下
-
运行时遍历出成员变量
var count:UInt32 = 0
let ivarlist = class_copyIvarList(NSClassFromString("UITabBarButton")!, &count)
for index in 0..<numericCast(count) {
let ivar = ivarlist![index]
let ivarStr = String.init(utf8String: ivar_getName(ivar!))
print("\(ivarStr)")
}
- 1、UITabBarButton
Optional("_hitRect")
Optional("_info")
Optional("_vibrancyEffectView")
Optional("_label")
Optional("_badge")
Optional("_selectedIndicator")
Optional("_selected")
Optional("_infoInsets")
Optional("_selectedInfoOffset")
Optional("_infoOffset")
Optional("_customSelectedIndicatorImage")
Optional("_labelOffset")
Optional("_buttonTintColorsForState")
Optional("_contentTintColorsForState")
Optional("_badgeColor")
Optional("_badgeTextAttributesForState")
Optional("_showsHighlightedState")
Optional("_centerAllContents")
Optional("_appearanceGuideClass")
Optional("_tabBar")
-
其中 "_info" ,"_label" ,"_badge" 这三个是我们需要的
- "_info"是 UIImageView 就是显示的图片,"_label"是UILabel 显示的文字
-
2、"_badge"是什么呢?它真实类型是什么,子控件及属性名是什么
let tab = window?.rootViewController as! TabBarViewController
for view in tab.tabBar.subviews {
if view.isKind(of: NSClassFromString("UITabBarButton")! ) {
let badgeView = view.value(forKeyPath: "_badge")
print("1\(badgeView!.self)")
let badge = badgeView as! UIView
print("2\(badge.subviews)")
}
}
}
1 <_UIBadgeView: 0x7fd671c336c0; frame = (33 2; 18 18); text = '1'; userInteractionEnabled = NO; layer = <CALayer: 0x608000031240>>
2 [<UIImageView: 0x7fd671c09570; frame = (0 0; 18 18); opaque = NO; userInteractionEnabled = NO; tintColor = UIExtendedSRGBColorSpace 1 0.231373 0.188235 1; layer = <CALayer: 0x60800002e9a0>>, <UILabel: 0x7fd671c33ba0; frame = (6 1; 6 16); text = '1'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x60800009c890>>]
var count:UInt32 = 0
let ivarlist = class_copyIvarList(NSClassFromString("_UIBadgeView")!, &count)
for index in 0..<numericCast(count) {
let ivar = ivarlist![index]
let ivarStr = String.init(utf8String: ivar_getName(ivar!))
print("badge= \(ivarStr)")
}
badge= Optional("_label")
badge= Optional("_background")
badge= Optional("_mergedTextAttributes")
badge= Optional("_text")
badge= Optional("_textAttributes")
badge= Optional("_backgroundColor")
三、做法及代码
-
自定义TabBarController里,添加4个子控制器,其中第三个添加一个空的UIViewController,图片为UIImage(), 空的TabBarItem,只是让这个系统生成的UITabBarButton占好位置
-
自定义UIButton,添加到TabBar上,盖住上述 空的UITabBarButton上
-
appDelegate成为TabBarController的代理,监控tabBar的点击
extension AppDelegate: UITabBarControllerDelegate {
func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
for view in tabBarController.tabBar.subviews {
if view.isKind(of: NSClassFromString("UITabBarButton")! ) {
// UITabBarButton是继承UIControl的, 通过 按钮的状态 才判别是否是现在点击的按钮
let state = view.value(forKeyPath: "highlighted")
let stateValue = state as! Int
if stateValue == 1 {
// 拿到当前点击的 按钮的imageView
let imageView = view.value(forKeyPath: "_info")
guard let temp = imageView else {
return
}
let tabButtonImgView = temp as! UIImageView
// 添加动画
UIView.animate(withDuration: 0.2, animations: {
tabButtonImgView.transform = CGAffineTransform(scaleX: 1.3, y: 1.3)
}, completion: { (Bool) in
tabButtonImgView.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
})
}
}
}
}
}
-
由于UITabBarButton的子控件都是懒加载的,需要用控制器的tabBarItem 模型对UITabBarButton进行设置
- 点击商品加号按钮,拿到 控制器tabBarItem,设置badgeValue ,然而购物车按钮(自己添加的) 盖住了部分 系统生成的badgeView,需要调整badgeView的位置
for button in tabBar.subviews {
if button.isKind(of: NSClassFromString("UITabBarButton")! ) {
let label = button.value(forKeyPath: "_label") as! UILabel
// print("\(label.text)")
if label.text == "" { // 通过label.text 确定是购物车按钮 那位置的 UITabBarButton
let badgeButton = button.value(forKeyPath: "_badge")
// print("\(badgeButton!.self)")
guard let badgeView = badgeButton else {
return
}
let badge = badgeView as! UIView
// print("\(badge.subviews)")
badge.frame.origin.x = 52 // 可根据需要计算
}
}
}
- 点击商品加号按钮实现系统 badgeView的动画
let tab = window?.rootViewController as! TabBarViewController
for button in tab.tabBar.subviews {
if button.isKind(of: NSClassFromString("UITabBarButton")! ) {
let label = button.value(forKeyPath: "_label") as! UILabel
// 外界通过 lable.text 区别出是我们需要的 第三个UITabBarButton
if label.text == "" {
let badgeButton = button.value(forKeyPath: "_badge")
guard let badgeView = badgeButton else {
return
}
// 拿到 badge 控件
let badge = badgeView as! UIView
// num变量为 点击加号按钮, 商品个数 计量
let str:NSString = NSString.init(format: "%d", num)
// kvc 设置属性
badgeView.setValue(UIFont.systemFont(ofSize: 9), forKeyPath: "_label.font")
badgeView.setValue(str, forKeyPath: "_label.text")
let tabLabal = badgeView.value(forKeyPath: "_label")
let label = tabLabal as! UILabel
// 拿到lebel 计算label 的大小、尺寸
let size = str.size(attributes: [NSFontAttributeName : UIFont.systemFont(ofSize: 9)])
label.frame = CGRect(x: (badge.frame.size.width - size.width) * 0.5, y: (badge.frame.size.height - size.height) * 0.5, width: size.width, height: size.height)
// 添加核心动画
let scaleAni = CABasicAnimation()
scaleAni.keyPath = "transform.scale"
scaleAni.fromValue = 1.0
scaleAni.toValue = 1.2
scaleAni.autoreverses = true
scaleAni.duration = 0.25
badge.layer.add(scaleAni, forKey: nil)
}
}
}
四、 问题
- 刚学习swift 3.0, 各种不熟,各种不顺,加上xcode8 beta版各种不稳定及bug,这次仅仅是尝试swift3的改变而练习的
- 系统UITabBarButton 里面的子控件都是懒加载的,没有先设置tabBarItem模型 ,用kvc 是赋不上值得,这点得注意