iOS自定义tabbar
时间: 2023-08-19 17:03:48 浏览: 71
iOS 的自定义 TabBar 主要分为以下几个步骤:
1. 创建自定义 TabBar
创建一个继承于 UITabBar 的类,重写初始化方法和 layoutSubviews 方法,实现自定义 TabBar 的样式和布局。
2. 实现自定义 TabBarItem
创建一个继承于 UIButton 的类,用于实现自定义的 TabBarItem 样式,例如添加图片、文字等。
3. 设置自定义 TabBarItem
在自定义 TabBar 的初始化方法中,添加自定义的 TabBarItem,将其添加到 TabBar 上。
4. 替换系统 TabBar
在 AppDelegate 中,找到 TabBarController 的 tabBar 属性,将其替换为自定义的 TabBar。
示例代码:
自定义 TabBar 类:
```
class CustomTabBar: UITabBar {
var items: [CustomTabBarItem] = []
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setup() {
// 隐藏默认的 TabBar
self.tintColor = .clear
self.backgroundImage = UIImage()
self.shadowImage = UIImage()
self.backgroundColor = .white
}
override func layoutSubviews() {
super.layoutSubviews()
// 设置自定义 TabBarItem 的布局
let itemWidth = self.frame.size.width / CGFloat(items.count)
var itemIndex: CGFloat = 0
for item in items {
item.frame = CGRect(x: itemWidth * itemIndex, y: 0, width: itemWidth, height: self.frame.size.height)
itemIndex += 1
}
}
}
```
自定义 TabBarItem 类:
```
class CustomTabBarItem: UIButton {
var title: String?
var normalImage: UIImage?
var selectedImage: UIImage?
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setup() {
// 设置 TabBarItem 的样式
self.imageView?.contentMode = .scaleAspectFit
self.titleLabel?.font = UIFont.systemFont(ofSize: 12)
self.setTitleColor(.gray, for: .normal)
self.setTitleColor(.black, for: .selected)
}
override func layoutSubviews() {
super.layoutSubviews()
// 设置 TabBarItem 的布局
let imageHeight = self.frame.size.height * 0.6
self.imageView?.frame = CGRect(x: (self.frame.size.width - imageHeight) / 2, y: 5, width: imageHeight, height: imageHeight)
self.titleLabel?.frame = CGRect(x: 0, y: self.frame.size.height - 20, width: self.frame.size.width, height: 20)
}
func set(title: String?, normalImage: UIImage?, selectedImage: UIImage?) {
self.title = title
self.normalImage = normalImage
self.selectedImage = selectedImage
// 设置 TabBarItem 的标题和图片
self.setTitle(title, for: .normal)
self.setImage(normalImage, for: .normal)
self.setImage(selectedImage, for: .selected)
}
}
```
在自定义 TabBar 的初始化方法中,添加自定义的 TabBarItem:
```
class CustomTabBar: UITabBar {
var items: [CustomTabBarItem] = []
override init(frame: CGRect) {
super.init(frame: frame)
setup()
// 添加 TabBarItem
let item1 = CustomTabBarItem()
item1.set(title: "首页", normalImage: UIImage(named: "home_normal"), selectedImage: UIImage(named: "home_selected"))
self.addSubview(item1)
items.append(item1)
let item2 = CustomTabBarItem()
item2.set(title: "消息", normalImage: UIImage(named: "message_normal"), selectedImage: UIImage(named: "message_selected"))
self.addSubview(item2)
items.append(item2)
let item3 = CustomTabBarItem()
item3.set(title: "我的", normalImage: UIImage(named: "mine_normal"), selectedImage: UIImage(named: "mine_selected"))
self.addSubview(item3)
items.append(item3)
}
// ...
}
```
在 AppDelegate 中,找到 TabBarController 的 tabBar 属性,将其替换为自定义的 TabBar:
```
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// ...
let tabBarController = UITabBarController()
tabBarController.viewControllers = [viewController1, viewController2, viewController3]
// 替换为自定义 TabBar
let customTabBar = CustomTabBar(frame: tabBarController.tabBar.frame)
tabBarController.setValue(customTabBar, forKey: "tabBar")
// ...
return true
}
```