Swift隨筆 自定義tabBar樣式工具欄

引言

UITabBar是iOS App中經(jīng)常使用的系統(tǒng)控件西饵,在實際的項目開發(fā)中,系統(tǒng)的UITabBar有時滿足不了我們的需求厨相,這是就需要自定義tabBar了。

這是我看MJ老師的新浪微博視頻,然后轉(zhuǎn)換成Swift語言自己寫出來的缆巧,分享出來希望對大家有所幫助


自定義tabBar效果圖.png

1.給工具欄添加背景

由于用的是iphone6的模擬器UITabBar高度是49,MJ老師給的素材是46豌拙,自己調(diào)了下陕悬,這里強烈建議用MJ老師MVC的思想,單獨創(chuàng)建一個View按傅,創(chuàng)建好之后捉超,先添加一個背景,把圖片平鋪唯绍,代碼如下

import UIKit

class Dock: UIView {

      var dock : UIView = UIView()

      override init(frame: CGRect) {

        super.init(frame: frame)

        self.frame = UIScreen.mainScreen().bounds

        self.backgroundColor = UIColor.init(patternImage:UIImage(named: "tabbar_background.png")!)
    }

      required init?(coder aDecoder: NSCoder) {
  
        fatalError("init(coder:) has not been implemented")

    }
}

2.添加Item的方法

上圖中的Item有一個title狂秦,一個Image,還有選中時的Imge,所以我寫這個方法的時候傳入了三個值,這個方法推捐,我們在主控制器中調(diào)用,代碼如下

func addchildVC(Title:String,Image:String,SecletedImage:String)
    {
        let count  = self.subviews.count//當前View中subviews的個數(shù)
        let  ItemHeight : CGFloat = self.frame.size.height
        let  ItemWidth : CGFloat = self.frame.size.width / CGFloat(count)
        var  ItemBtn = Unbutton()
        ItemBtn.setTitle(Title, forState: UIControlState.Normal)
        ItemBtn.setImage(UIImage(named: Image), forState: UIControlState.Normal)
        ItemBtn.setImage(UIImage(named: SecletedImage), forState: UIControlState.Selected)
        ItemBtn.addTarget(self, action: Selector("ItemClick:"), forControlEvents: .TouchDown)

        self.addSubview(ItemBtn)
        //調(diào)整item的位置
        self.adjustDockItem()
    }

  • 調(diào)整Item的位置
    添加Item的方法有了侧啼,但是Item的位置和大小我們都沒設(shè)置牛柒,邏輯就是我們的調(diào)用添加Item方法時是一個一個添加到自定義View上的,當添加第一個Item成功后痊乾,下面代碼中的count個數(shù)就會變?yōu)?皮壁,我們添加第二個Item的時候,count變?yōu)?哪审,Item的位置就會重新調(diào)整蛾魄,代碼如下 (這個方法的調(diào)用必須在添加ItemBtn之后,否則會報錯)
func adjustDockItem()
    {
        let  count  = self.subviews.count
        let  ItemHeight : CGFloat = self.frame.size.height
        let  ItemWidth : CGFloat = self.frame.size.width / CGFloat(count )
        for i in 0..<count {
            //取出子空間
            let ItemBtn = self.subviews[i] as! UIButton
            ItemBtn.frame = CGRectMake(CGFloat(i) * ItemWidth, 0,ItemWidth ,ItemHeight)
        }
    }   
  • 點擊按鈕時選中并且將上一個按鈕的選中狀態(tài)取消
    思路很簡單湿滓,創(chuàng)建一個變量滴须,設(shè)定為當前為選中狀態(tài)的按鈕
var currentItem :UIButton = UIButton()
  func ItemClick(ItemBtn: DockItem){
        //讓當前item取消選中
        currentItem.selected = false
        //讓新的item選中
        ItemBtn.selected = true
        //讓新的item變?yōu)楫斍癷tem
        currentItem = ItemBtn
 }

3.在主控制器中調(diào)用添加Item的方法

  • 創(chuàng)建一個變量繼承我們的View
var dock : Dock = Dock()
  • 調(diào)用添加Item的方法
import UIKit
class MainViewController: UITabBarController{
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.grayColor()
        self.addDock()
    }
    func addDock(){
        dock.frame = CGRectMake(0,self.view.frame.height - DockHeigt, self.view.frame.width, DockHeigt)
        self.view.addSubview(dock)
        dock.addchildVC("首頁", Image: "tabbar_home.png", SecletedImage: "tabbar_home_selected.png")
        dock.addchildVC("消息", Image: "tabbar_message_center.png", SecletedImage: "tabbar_message_center_selected.png")
        dock.addchildVC("我", Image: "tabbar_profile.png", SecletedImage: "tabbar_profile_selected.png")
        dock.addchildVC("廣場", Image: "tabbar_discover.png", SecletedImage: "tabbar_discover_selected.png")
        dock.addchildVC("更多", Image: "tabbar_more.png", SecletedImage: "tabbar_more_selected.png")
}

運行一下 看下效果圖

自定義tabBar效果圖.png

看下選中的效果圖


選中效果圖.png

有點點丑,發(fā)現(xiàn)位置好像不對叽奥,應(yīng)該調(diào)整下ItemBtn里title和Image的位置扔水,創(chuàng)建一個自定義Button,然后讓我們的ItemBtn繼承它就OK了

import UIKit
let kImageRatio : CGFloat = 0.6
class DockItem: UIButton {
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        //文字居中
        self.titleLabel?.textAlignment = NSTextAlignment.Center
        self.titleLabel?.font = UIFont.systemFontOfSize(12)
        //圖片自適應(yīng)
        self.imageView?.contentMode = UIViewContentMode.ScaleAspectFit
        self.adjustsImageWhenHighlighted = false
        
        self.setBackgroundImage(UIImage(named: "tabbar_slider.png"), forState: .Selected)
//        self.setBackgroundImage(UIImage(named: "tabbar_slider.png"), forState: .Highlighted)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    //重寫UILabel邊框
    override func titleRectForContentRect(contentRect: CGRect) -> CGRect{
        let Y = contentRect.size.height * kImageRatio
        let heigt = contentRect.size.height - Y
        return CGRectMake(0, Y, contentRect.size.width, heigt)
    }
    //重寫UIImage邊框
    override func imageRectForContentRect(contentRect: CGRect) -> CGRect {
        return CGRectMake(0, 0, contentRect.size.width, contentRect.size.height * kImageRatio)
    }
}

然后將上面代碼中的UIButton全部改成DockItem

var ItemBtn = DockItem()
var currentItem : DockItem = DockItem()

進入時我們都是默認選中首頁這個ItemBtn的朝氓,添加如下代碼在adjustDockItem()方法中就可以了

if i == 0 
{
   ItemBtn.selected = true
   currentItem = ItemBtn
}

總結(jié)

遇到的主要問題還是設(shè)置ItemBtn位置魔市,當時實在不理解是怎么添加的,不過后來還是解決了赵哲,希望能幫到大家待德,也希望能共同學(xué)習(xí)共同進步

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市枫夺,隨后出現(xiàn)的幾起案子将宪,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件涧偷,死亡現(xiàn)場離奇詭異簸喂,居然都是意外死亡,警方通過查閱死者的電腦和手機燎潮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門喻鳄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人确封,你說我怎么就攤上這事除呵。” “怎么了爪喘?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵颜曾,是天一觀的道長。 經(jīng)常有香客問我秉剑,道長泛豪,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任侦鹏,我火速辦了婚禮诡曙,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘略水。我一直安慰自己价卤,他們只是感情好,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布渊涝。 她就那樣靜靜地躺著慎璧,像睡著了一般。 火紅的嫁衣襯著肌膚如雪跨释。 梳的紋絲不亂的頭發(fā)上胸私,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天,我揣著相機與錄音鳖谈,去河邊找鬼盖文。 笑死,一個胖子當著我的面吹牛蚯姆,可吹牛的內(nèi)容都是我干的五续。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼龄恋,長吁一口氣:“原來是場噩夢啊……” “哼疙驾!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起郭毕,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤它碎,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體扳肛,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡傻挂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了挖息。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片金拒。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖套腹,靈堂內(nèi)的尸體忽然破棺而出绪抛,到底是詐尸還是另有隱情,我是刑警寧澤电禀,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布幢码,位于F島的核電站,受9級特大地震影響尖飞,放射性物質(zhì)發(fā)生泄漏症副。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一政基、第九天 我趴在偏房一處隱蔽的房頂上張望瓦糕。 院中可真熱鬧,春花似錦腋么、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽费变。三九已至,卻和暖如春挚歧,著一層夾襖步出監(jiān)牢的瞬間扛稽,已是汗流浹背滑负。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工在张, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人矮慕。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓帮匾,卻偏偏與公主長得像痴鳄,于是被迫代替她去往敵國和親瘟斜。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

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

  • iPad開發(fā)與iPhone開發(fā)的異同簡介1. iPad開發(fā)與iPhone開發(fā)的異同2. QQ空間的分析3. 登錄界...
    JonesCxy閱讀 1,034評論 1 5
  • 前言 很多時候螺句,系統(tǒng)原生的 UITabBar 并不能滿足我們的需求虽惭,譬如我們想要給圖標做動態(tài)的改變,或者比較炫一點...
    四月_Hsu閱讀 5,057評論 1 6
  • 簡介 UITabBar是iOS App中經(jīng)常使用的系統(tǒng)控件蛇尚,比如知名App:新浪微博芽唇,微信佣蓉,騰訊QQ等披摄。在實際的項...
    清蘂翅膀的技術(shù)閱讀 1,875評論 0 6
  • TabBarController是項目主要框架結(jié)構(gòu), 一般來說系統(tǒng)自帶的TabBarController已足夠使用...
    wolf_吳郎閱讀 3,180評論 0 2
  • 歌酒闌干事已非疚膊,玉人惆悵捲羅帷虾标;可堪荏苒爭先謝,更不躊躇各自飛璧函。 盡掃庭枝風斂怨,偶黏屋綱雨沖圍蘸吓;今朝蝶似長安客善炫,...
    蘇白杞閱讀 591評論 0 12