TabBarController是項目主要框架結構, 一般來說系統自帶的TabBarController已足夠使用, 但是要實現一些產品的需求，有時候就需要我們自定義一個TabBarController，本篇文章將為您講述如何使用Swift自定義TabBarController.順便附上Demo地址
github.com/15395401361/LFTabBarContoller
首先：定制TabBar上面的按鈕。
//
//? LFCustomButtonItem.swift
//? LFTabBarDemo
//
//? Created by 吳林豐 on 2017/3/20.
//? Copyright ? 2017年 吳林豐. All rights reserved.
//
import UIKit
class LFCustomButtonItem: UIButton {
// MARK: - 頁面所用屬性
private let itemWH = 40? //item的大小
private let itemTitleColor = UIColor.colorWithHexString(hex: "7b7b7b") //item? 中默認的字體顏色
private let selectedItemTitleColor = UIColor.colorWithHexString(hex: "e2231a")? //item中被選中是字體的顏色
private let itemTitleFont = UIFont.systemFont(ofSize: 10) //item中字體的大小
private let badgeValueViewImageName = "badge_one@2x.png" //提醒背景圖片
private let badgeValueViewImageNameMore = "badge_more@2x.png" //更多背景提醒
private let badgeValueFont = UIFont.systemFont(ofSize: 12)
private let badgeValueColor = UIColor.white
private var badgeValueViewWH:CGFloat{
get{
//? ? ? ? ? ? return CGFloat(itemWH) * 0.15 //如果只是紅點提示，則返回此大小
return CGFloat(itemWH) * 0.45? //如果顯示數字，則返回這個大小
}
}
private let KSImageScale:CGFloat = 1
// MARK: - 懶加載紅點
lazy var badgeValueView:UIButton = {
let x:CGFloat = self.frame.size.width/2+10
let y:CGFloat = 5
//? ? ? ? let x:CGFloat = self.frame.size.width/2+5
//? ? ? ? let y:CGFloat = 3 只是小紅點提示的時候，常量值為這個
let badgeValueView:UIButton = UIButton.init(frame: CGRect.init(origin: CGPoint.init(x: x, y: y), size: CGSize.init(width: self.badgeValueViewWH, height: self.badgeValueViewWH)))
badgeValueView.setBackgroundImage(UIImage.init(named: self.badgeValueViewImageName), for: .normal)
badgeValueView.setTitleColor(self.badgeValueColor, for: UIControlState.normal)
badgeValueView.adjustsImageWhenHighlighted = false
badgeValueView.isHidden = true
badgeValueView.titleLabel?.font = UIFont.systemFont(ofSize: 12)
return badgeValueView
}()
// MARK: - 初始化self
init(_ frame: CGRect,_ norImage:String,_ selectImage:String,_ titile:String) {
super.init(frame: frame)
//頂部圖片
self.imageView?.contentMode = .center
self.setImage(UIImage.init(named: norImage), for: .normal)
self.setImage(UIImage.init(named: selectImage), for: .selected)
self.setImage(UIImage.init(named: norImage), for: .highlighted)
//設置文字
self.titleLabel?.textAlignment = .center
self.setTitle(titile, for: .normal)
self.setTitleColor(itemTitleColor, for: .normal)
self.setTitleColor(itemTitleColor, for: .highlighted)
self.setTitleColor(selectedItemTitleColor, for: .selected)
self.titleLabel?.font = itemTitleFont
self.addSubview(self.badgeValueView)
}
// MARK: - 設置提醒小紅點的數量
func setItemBadgeNumber(_ number:Int){
if number != 0 {
if? self.badgeValueView.isHidden == true {
self.badgeValueView.isHidden = false
}
/**
實現紅點及數字提醒
*/
let tabBadgeNum:String = number > 99 ? "...":"\(number)"
self.badgeValueView.setTitle(tabBadgeNum, for: .normal)
let tabBadgeStr:String = "\(number)"
let longImage:UIImage = UIImage.resizableImage(imageName: badgeValueViewImageName)
self.badgeValueView.setBackgroundImage(longImage, for: .normal)
var newframe:CGRect = self.badgeValueView.frame
if (tabBadgeStr as NSString).length > 1 {
newframe.size.width = badgeValueViewWH + 4
self.badgeValueView.frame = newframe
}else{
newframe.size.width = badgeValueViewWH
self.badgeValueView.frame = newframe
}
/**
只實現紅點提醒，不實現數字提醒
同上方的方法二者選一
*/
//? ? ? ? ? ? self.badgeValueView.setBackgroundImage(UIImage.init(named: "TabBarEdgeImage"), for: .normal)
}else{
self.badgeValueView.isHidden = true
}
}
//重寫系統方法，設置按鈕內部圖片和文字的位置
override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
let W:CGFloat = contentRect.size.width
let H:CGFloat = contentRect.size.height * KSImageScale
return CGRect.init(x: 0, y: -5, width: W, height: H)
}
override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
let W:CGFloat = contentRect.size.width
let H:CGFloat = contentRect.size.height * KSImageScale
let Y:CGFloat = contentRect.size.height - H
return CGRect.init(x: 0, y: Y+15, width: W, height: H)
}
//這個是用于Storyboard 的。蘋果由于主推SB，所以要求必須實現此方法
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
第二步，繼承TabBarController，開始定制自己項目的TabBarController，并編寫項目中所要用到的方法。
//
//? LFCustomTabBarController.swift
//? LFTabBarDemo
//
//? Created by 吳林豐 on 2017/3/20.
//? Copyright ? 2017年 吳林豐. All rights reserved.
//
import UIKit
class LFCustomTabBarController: UITabBarController {
var currentSelectedIndex:NSInteger? //當前選中的button的index
var buttons = [LFCustomButtonItem]()
let ScreenWidth = kScreenWidth
lazy var objectNavis:[UINavigationController] = {
var navis = [UINavigationController]()
navis = self.viewControllers as! [UINavigationController]
return navis
}()
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
self.customTabBar()
}
func customTabBar(){
//初始化TabBar上的Item數量和Item上的標題，圖片等等
let normalImageArr = NSArray.init(array: ["out-call","patientsNormal","personalCenterNormal"])
let selectedImageArray = NSArray.init(array: ["out-callSelected","patientsSelected","personalCenterSelected"])
let titleArr = NSArray.init(array: ["首頁","聯系人","個人中心"])
let viewCount:Int = (self.viewControllers?.count)! > 5 ? 5:(self.viewControllers?.count)!
let _width:CGFloat = kScreenWidth / CGFloat(viewCount)
let _height:CGFloat = self.tabBar.frame.size.height
for i in 0 ..< (self.viewControllers?.count)!{
let btn:LFCustomButtonItem = LFCustomButtonItem.init(CGRect.init(x: CGFloat(i) * _width, y: 0, width: _width, height: _height), normalImageArr[i] as! String, selectedImageArray[i] as! String, titleArr[i] as! String)
btn.addTarget(self, action: #selector(selectedTab(_:)), for: UIControlEvents.touchUpInside)
btn.tag = i
self.buttons.append(btn)
self.tabBar.addSubview(btn)
}
//默認選中第一個頁面
if self.buttons.count > 0 {
self.buttons[0].isSelected = true
self.selectedTab(self.buttons[0])
}
}
// MARK - 設置消息數量
//設置消息數
func setBadgeNumber(_ number:NSInteger,_ index:NSInteger){
let? buttonItem:LFCustomButtonItem = self.buttons[index]
buttonItem.setItemBadgeNumber(number)
}
func pushToHome(){
for bt in self.buttons {
if bt.tag == 0 {
bt.isSelected = true
}else{
bt.isSelected = false
}
}
self.selectedIndex = 0
let nav:UINavigationController = self.objectNavis[0]
nav.popToRootViewController(animated: true)
}
//其他頁面調用選擇按鈕
func selectedTab(_ button:UIButton){
if self.currentSelectedIndex == button.tag{
return
}
for bt in self.buttons{
if bt == button {
bt.isSelected = true
}else{
bt.isSelected = false
}
}
self.currentSelectedIndex = button.tag
self.selectedIndex = self.currentSelectedIndex!
//選中一級界面
if self.selectedIndex != 0 && (self.viewControllers?.count)! > self.selectedIndex? {
/**
注意此處的跳轉
由于系統的TabBarController上的viewCoutrollers 默認為繼承的是UIViewController
所以，如果使用自定義的導航欄去加載ViewControllers作為TabBarControlelr的viewCoutrollers時
此處需要進行類型轉換，從而順利進行跳轉。
*/
if self.objectNavis.count > 0{
//此處需要將其轉為具有導航功能的navigationController
(self.selectedViewController as! UINavigationController).popToRootViewController(animated: true)
}
}
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
1. 如何進行頁面切換
自定義的TabBarController繼承自系統, 所以還是直接用系統的selectedIndex屬性來實現,?
2. 自定義的幾個Button如何只選中一個, 以及選中狀態的切換?
定義一個currentSelectedIndex，標示表示選中的button按鈕。
3.如何使用
通過上面的封裝可以實現傳入數據源,初始化tabBarController,并且支持角標及小紅點,很方便在今后項目中調用.喜歡的話，給個星星，你們的支持就是我們筆者的動力。謝謝。?
