圖解一下 UITabBar 的自定義使用

UITabBar 里的各種屬性在使用的使用總是傻傻分不清竹伸,比如辫樱,設(shè)置背景色,應(yīng)該用 barTintColor 匹摇,而不是我們以為的 backgroundColor咬扇,想設(shè)置它要透明的時候,barTintColor = UIColor.clear 又不起效果廊勃。我在這里用圖稍微解釋下原因懈贺,希望對大家有所幫助。

先定一個目標(biāo),我想要自定義 UITabBar 最終達(dá)到的效果要是這樣的梭灿。

9.png

一個 UITabBar 什么屬性都沒有自定義的時候画侣,默認(rèn)的層次情況應(yīng)該如下圖一樣。

7.png

其中堡妒,visualView 是在 backgroundView 中的子視圖配乱,可以說 tabBar 的背景管理都是在 backgroundView 中進(jìn)行的。

先來看看 isTranslucent 這個屬性涕蚤,這個默認(rèn)是 true宪卿,設(shè)為 false 之后,tabBar 的層次就變成下面這樣了

3.png

可以看到 backgroundView 中的 visualView 不見了万栅,backgroundView 的背景色變?yōu)?white 不透明的佑钾,后面 vc 的 view 也不在 tabBar 下面了。

下嗎再來看看設(shè)置 tabBar.backgroundColor = UIColor.red 和 tabBar.barTintColor = UIColor.blue 烦粒,再看看下面的層次圖休溶。

1.png

backgroundColor 這個屬性的確是起作用了,可惜的是它在最底層扰她,你根本看不到兽掰,所以這是為什么設(shè)置背景還得要用 barTintColor 原因。 如果 isTranslucent = true 下徒役,設(shè)置 barTintColor 會在 visualView 的最頂層增加一層視圖孽尽,如果 isTranslucent = false 下,則直接更改的是 backgroundView 的背景色忧勿。

接下來杉女,討論下怎么給 tabBar 設(shè)置自己的半透明色≡可能有人想著試著直接更改 barTintColor 的顏色透明不就好了熏挎?但是,給 barTintColor 設(shè)置顏色透明度總不會起效果晌砾,最后得到的都是不透明的坎拐,至于原因我也不清楚??的用意是為什么?

tabBar 還有一個 backgroundImage 屬性养匈,可以用一張圖來代替背景色哼勇。比如我設(shè)置一張紅色背景圖上去,它的層次就變成了下圖這樣呕乎。

4.png

設(shè)置了 backgroundImage 之后猴蹂,會直接忽略 visualView 和你設(shè)的 barTintColor,而且這個背景圖片是可以設(shè)置為透明圖片的??楣嘁。所以你想要個透明的 tabBar ,直接設(shè)置一張透明圖片給 backgroundImage 就可以了,如下圖逐虚。

10.png

前面聋溜,我們說了,tabBar 的背景管理是交由 backgroundView 來設(shè)置的“劝現(xiàn)在 backgroundView 變成透明后撮躁,那 tabBar 的背景重?fù)?dān)又重新回到了我們 tabBar.backgroundColor 身上了,它是可以支持任何透明度的設(shè)置的??买雾,比如把曼,tabBar.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 0.5)

8.png

最后說下 tabBar 分割線的問題,tabBar 的分割線其實是張圖片漓穿,屬性設(shè)置是 shadowImage嗤军,但是你單獨設(shè)置 shadowImage 沒有作用,只有你設(shè)置了 backgroundImage 后晃危,shadowImage 才會起作用叙赚。

所以,最后設(shè)置一下 shadowImage 為紅色圖片僚饭,我們目標(biāo)就達(dá)成了震叮。??

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市鳍鸵,隨后出現(xiàn)的幾起案子苇瓣,更是在濱河造成了極大的恐慌,老刑警劉巖偿乖,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件击罪,死亡現(xiàn)場離奇詭異,居然都是意外死亡汹想,警方通過查閱死者的電腦和手機(jī)外邓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來古掏,“玉大人损话,你說我怎么就攤上這事〔弁伲” “怎么了丧枪?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長庞萍。 經(jīng)常有香客問我拧烦,道長,這世上最難降的妖魔是什么钝计? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任恋博,我火速辦了婚禮齐佳,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘债沮。我一直安慰自己炼吴,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布疫衩。 她就那樣靜靜地躺著硅蹦,像睡著了一般。 火紅的嫁衣襯著肌膚如雪闷煤。 梳的紋絲不亂的頭發(fā)上童芹,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天,我揣著相機(jī)與錄音鲤拿,去河邊找鬼假褪。 笑死,一個胖子當(dāng)著我的面吹牛皆愉,可吹牛的內(nèi)容都是我干的嗜价。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼幕庐,長吁一口氣:“原來是場噩夢啊……” “哼久锥!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起异剥,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤瑟由,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后冤寿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體歹苦,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年督怜,在試婚紗的時候發(fā)現(xiàn)自己被綠了殴瘦。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡号杠,死狀恐怖蚪腋,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情姨蟋,我是刑警寧澤屉凯,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站眼溶,受9級特大地震影響悠砚,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜堂飞,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一灌旧、第九天 我趴在偏房一處隱蔽的房頂上張望绑咱。 院中可真熱鬧,春花似錦节榜、人聲如沸羡玛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至薄榛,卻和暖如春讳窟,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背敞恋。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工丽啡, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人硬猫。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓补箍,卻偏偏與公主長得像,于是被迫代替她去往敵國和親啸蜜。 傳聞我的和親對象是個殘疾皇子坑雅,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,543評論 2 349

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