如何使用Swift自定義TabBarController

TabBarController是項(xiàng)目主要框架結(jié)構(gòu), 一般來說系統(tǒng)自帶的TabBarController已足夠使用, 但是要實(shí)現(xiàn)一些產(chǎn)品的需求,有時候就需要我們自定義一個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? 中默認(rèn)的字體顏色

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 //如果只是紅點(diǎn)提示,則返回此大小

return CGFloat(itemWH) * 0.45? //如果顯示數(shù)字,則返回這個大小

}

}

private let KSImageScale:CGFloat = 1

// MARK: - 懶加載紅點(diǎn)

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 只是小紅點(diǎn)提示的時候,常量值為這個

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)

//設(shè)置文字

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: - 設(shè)置提醒小紅點(diǎn)的數(shù)量

func setItemBadgeNumber(_ number:Int){

if number != 0 {

if? self.badgeValueView.isHidden == true {

self.badgeValueView.isHidden = false

}

/**

實(shí)現(xiàn)紅點(diǎn)及數(shù)字提醒

*/

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

}

/**

只實(shí)現(xiàn)紅點(diǎn)提醒,不實(shí)現(xiàn)數(shù)字提醒

同上方的方法二者選一

*/

//? ? ? ? ? ? self.badgeValueView.setBackgroundImage(UIImage.init(named: "TabBarEdgeImage"), for: .normal)

}else{

self.badgeValueView.isHidden = true

}

}

//重寫系統(tǒng)方法,設(shè)置按鈕內(nèi)部圖片和文字的位置

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,所以要求必須實(shí)現(xiàn)此方法

required init?(coder aDecoder: NSCoder) {

fatalError("init(coder:) has not been implemented")

}

}

第二步,繼承TabBarController,開始定制自己項(xiàng)目的TabBarController,并編寫項(xiàng)目中所要用到的方法。

//

//? LFCustomTabBarController.swift

//? LFTabBarDemo

//

//? Created by 吳林豐 on 2017/3/20.

//? Copyright ? 2017年 吳林豐. All rights reserved.

//

import UIKit

class LFCustomTabBarController: UITabBarController {

var currentSelectedIndex:NSInteger? //當(dāng)前選中的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數(shù)量和Item上的標(biāo)題,圖片等等

let normalImageArr = NSArray.init(array: ["out-call","patientsNormal","personalCenterNormal"])

let selectedImageArray = NSArray.init(array: ["out-callSelected","patientsSelected","personalCenterSelected"])

let titleArr = NSArray.init(array: ["首頁","聯(lián)系人","個人中心"])

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)

}

//默認(rèn)選中第一個頁面

if self.buttons.count > 0 {

self.buttons[0].isSelected = true

self.selectedTab(self.buttons[0])

}

}

// MARK - 設(shè)置消息數(shù)量

//設(shè)置消息數(shù)

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)

}

//其他頁面調(diào)用選擇按鈕

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? {

/**

注意此處的跳轉(zhuǎn)

由于系統(tǒng)的TabBarController上的viewCoutrollers 默認(rèn)為繼承的是UIViewController

所以,如果使用自定義的導(dǎo)航欄去加載ViewControllers作為TabBarControlelr的viewCoutrollers時

此處需要進(jìn)行類型轉(zhuǎn)換,從而順利進(jìn)行跳轉(zhuǎn)。

*/

if self.objectNavis.count > 0{

//此處需要將其轉(zhuǎn)為具有導(dǎo)航功能的navigationController

(self.selectedViewController as! UINavigationController).popToRootViewController(animated: true)

}

}

}

override func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

// Dispose of any resources that can be recreated.

}

}

1. 如何進(jìn)行頁面切換

自定義的TabBarController繼承自系統(tǒng), 所以還是直接用系統(tǒng)的selectedIndex屬性來實(shí)現(xiàn),?

2. 自定義的幾個Button如何只選中一個, 以及選中狀態(tài)的切換?

定義一個currentSelectedIndex,標(biāo)示表示選中的button按鈕。

3.如何使用


通過上面的封裝可以實(shí)現(xiàn)傳入數(shù)據(jù)源,初始化tabBarController,并且支持角標(biāo)及小紅點(diǎn),很方便在今后項(xiàng)目中調(diào)用.喜歡的話,給個星星,你們的支持就是我們筆者的動力。謝謝。?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,606評論 6 533
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,582評論 3 418
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,540評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,028評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,801評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,223評論 1 324
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,294評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,442評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,976評論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,800評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,996評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,543評論 5 360
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,233評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,702評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,991評論 2 374

推薦閱讀更多精彩內(nèi)容