一、前言
-
一次比較懶的想法，不想自定義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 是賦不上值得，這點得注意