編者按:Xcode系列教程第四期新年火速送到,自上次設(shè)計(jì)APP界面,搞定交互動(dòng)畫后,今天@JingDesign?手把手帶同學(xué)們創(chuàng)建一個(gè)Tab Bar 的交互效果,文末還提供源文件下載。跟上時(shí)代潮流,成為全能設(shè)計(jì)師,不懂點(diǎn)開發(fā)怎么行,來(lái)學(xué)習(xí)吧 >>>
在前邊的幾個(gè)章節(jié)中,靜電與大家一起,從無(wú)到有的熟悉了Xcode這個(gè)神奇的工具,并且教大家在自己的電腦或者手機(jī)上親自運(yùn)行起iOS的APP,是 不是很有成就感?轉(zhuǎn)眼就是這個(gè)為設(shè)計(jì)師準(zhǔn)備的Xcode教程的第四章了,小伙伴們,隔了這么久,不知道大家是否還記得第三章中,將一個(gè)個(gè)的界面串起來(lái)的例 子,但是只有這樣顯然無(wú)法滿足大家的需求,在第四章中,我們繼續(xù)來(lái)認(rèn)識(shí)另一個(gè)控件,這就是Tab Bar Controller。搞定接下來(lái)的教程,拿這個(gè)跟同事演示,一定會(huì)讓他們刮目相看的。
靜電的Xcode前期教程合集:
- 《搞定一像素不求人!為設(shè)計(jì)師量身打造的XCODE教程(1)》
- 《搞定一像素不求人!為設(shè)計(jì)師量身打造的XCODE教程(2)》
- 《零代碼搞定交互動(dòng)畫!為設(shè)計(jì)師量身打造的XCODE教程(3)》
什么是Tab bar Controller呢?舉個(gè)簡(jiǎn)單的例子,大家拿起身邊的手機(jī),隨便打開一個(gè)應(yīng)用,大部分會(huì)采用下圖這樣的布局形式。頁(yè)面最下方會(huì)有若干個(gè)圖標(biāo),點(diǎn)擊每個(gè) 圖標(biāo)會(huì)切換不同的頁(yè)面,這就是Xcode里的Tab bar。Tab bar作為一種常見的一級(jí)菜單存在在非常多的手機(jī)app中。下面,靜電就來(lái)教大家簡(jiǎn)單幾步在Xcode中搞定這樣的效果。
一、準(zhǔn)備素材
我們首先要準(zhǔn)備三頁(yè)的設(shè)計(jì)稿。下圖中的每張圖代表每個(gè)tab點(diǎn)擊后呈現(xiàn)的頁(yè)面。還需要三個(gè)icon,分別表示三個(gè)主菜單。靜電在這里設(shè)計(jì)的三個(gè)圖標(biāo)分別是:閱讀,創(chuàng)作,我的。
至于這些效果圖是如何設(shè)計(jì)出來(lái)的,嘿嘿,肯定是Sketch啦。非常簡(jiǎn)單和方便。如果小伙伴們還不知道如何設(shè)計(jì),可以參考靜電之前寫的Sketch教程(文末會(huì)附上)。設(shè)計(jì)完之后,我們需要將圖切出來(lái),由于靜電手頭的手機(jī)是iPhone5s,所以我將圖標(biāo)和效果圖都切成@2x素材即可。準(zhǔn)備好一共六張圖片。三張效果圖,三個(gè)圖標(biāo)。(源文件在文章最后的鏈接中可以下載到。)
二、新建Xcode工程
圖片準(zhǔn)備完畢后,我們可以打開Xcode了。啟動(dòng),新建一個(gè)空的工程(new project)。然后選擇Single View Application(其實(shí)選擇 Tabbed Application也是可以的,這里為了大家理解更透徹,選擇新建Single View Application)
Next后,隨便為Prodcut Name起一個(gè)名字,然后保存(這里為了方便起見,開發(fā)語(yǔ)言選擇objective-C)。然后保存。
保存后會(huì)來(lái)到開發(fā)界面。我們找到熟悉的Main.storyboard這個(gè)文件,這個(gè)時(shí)候開發(fā)界面只有一個(gè)View Controller,不過(guò)這個(gè)VC并不是我們想要的,選擇這個(gè)VC,按鍵盤上的del刪掉它。
三、構(gòu)建Tab Bar導(dǎo)航效果
按照慣例,我們先來(lái)設(shè)置一下尺寸(請(qǐng)根據(jù)自己的設(shè)計(jì)稿的尺寸來(lái)設(shè)置使用哪種模擬器運(yùn)行。)
這個(gè)時(shí)候Storyboard里什么都沒有,ok,下面是重點(diǎn)部分了。上一節(jié)中,大家對(duì)View Controller這個(gè)控件一定都很熟悉了。不過(guò)這次有點(diǎn)不同,我們來(lái)使用一個(gè)新的控件,Tab bar controller。找到下圖所示的箭頭圖標(biāo)就是這個(gè)TBC了(Tab Bar Controller簡(jiǎn)寫,下同)。拖動(dòng)這個(gè)TBC到storyboard中。這下大家應(yīng)該會(huì)明白了,一個(gè)具有兩個(gè)圖標(biāo)的tab導(dǎo)航就出現(xiàn)了。分析一下這個(gè)TBC的構(gòu)成,其實(shí)就是一個(gè)名為TBC的View,還有兩個(gè)普通的VC,他們通過(guò)一些“電路”連接在一起,連接后,底部就會(huì)出現(xiàn)歸屬于某個(gè)頁(yè)面的tab圖標(biāo)。
可是我們需要的是三個(gè)啊!嗯,少了一個(gè),來(lái)手工加上一個(gè)。
拖動(dòng)一個(gè)普通的VC到Storyboard中,然后把他與TBC連接起來(lái)。(按住鼠標(biāo)右鍵,從TBC窗體向VC拖動(dòng)。松開鼠標(biāo)右鍵,在彈出的菜單中,選擇View Controllers,即可完成連接)
這個(gè)時(shí)候三個(gè)VC都被鏈接起來(lái),鏈接電路的線條中有兩圓一線的連接標(biāo)志,即代表鏈接成功。如果你要設(shè)置四個(gè)tab,那么只需要重復(fù)上邊的操作即可。
接著要修改下View的尺寸,選中TBC,在 右側(cè)屬性欄中,將Size改為你期望的屏幕尺寸(我這里選擇ip5s的4寸),Buttom Bar改為黑色Translucent Black Tab Bar(這里選擇半透明黑色tab bar,大家也可以選擇不透明的,英文為Opaque開頭,大家懂的。)
尺寸修改完成后,可以導(dǎo)入我們準(zhǔn)備好的素材了,從左側(cè)的文件列表中找到Image.Xcassets文件。將準(zhǔn)備好的六張圖一股腦拖到里邊,Xcode會(huì)自動(dòng)識(shí)別@2x或者@3x后綴的文件,所以文件名后綴一定要命名正確(如果你比較懶,圖片素材文件名沒有加@2x @3x的后綴,沒關(guān)系,把你圖拖動(dòng)到你認(rèn)為正確的框里即可)。靜電這里任性一把,弄個(gè)icon和啟動(dòng)界面的圖一起放進(jìn)去(不放也沒關(guān)系,后期大家可以設(shè)計(jì)后在放)。
素材導(dǎo)入完成后,我們重新回到Storyboard界面。運(yùn)用上一節(jié)所學(xué)的知識(shí),分別將三張效果圖添加到三個(gè)View中去。回憶下如何把一張圖片放進(jìn)VC里,對(duì)!這個(gè)時(shí)候需要Image View。從控件庫(kù)中找到image view圖標(biāo),拖動(dòng)到每個(gè)VC中,然后選中image view,在右側(cè)屬性窗口中,分別設(shè)置三張?jiān)O(shè)計(jì)稿圖。
隨后,設(shè)置tabbar的每一個(gè)icon,選中icon,在右側(cè)屬性欄里,填寫title,設(shè)定剛才我們導(dǎo)入的圖片。記得三個(gè)View中的icon圖片和名字都要設(shè)定。
但這個(gè)時(shí)候運(yùn)行是沒有任何東西的,因?yàn)槲覀兺艘患隆P枰嬖VXcode啟動(dòng)app后,哪個(gè)界面是入口。找到組件庫(kù)中的箭頭圖標(biāo)(storyboard entry point),在TBC選中的狀態(tài)下,拖動(dòng)箭頭到TBC的上邊。記得,以后我們做的任何demo,必須要檢查是否有入口箭頭。否則運(yùn)行起來(lái)可能會(huì)是一片黑。好的,大功告成,運(yùn)行一下看看吧,點(diǎn)擊左上角工具欄上對(duì)應(yīng)的模擬器版本,按下運(yùn)行按鈕,在模擬器中欣賞自己的成果吧。(Xcode6.2beta版本有bug,entry point拖動(dòng)后程序會(huì)崩潰,建議選擇穩(wěn)定的6.1版本)
四、一點(diǎn)點(diǎn)代碼——修改tab bar背景顏色與點(diǎn)擊圖標(biāo)顏色
在模擬器運(yùn)行后還是有一點(diǎn)點(diǎn)缺憾,設(shè)計(jì)稿中當(dāng)選中按鈕是紅色的,但無(wú)論我們?nèi)绾卧O(shè)置,模擬器中選中的按鈕顏色總是藍(lán)色。這個(gè)時(shí)候我們需要兩行非常簡(jiǎn)單的代碼來(lái)搞定。
打開左側(cè)文件中的AppDelegate.m,在這行代碼
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
的后邊,
加入如下代碼:
//設(shè)定Tabbar的點(diǎn)擊后的顏色
[[UITabBar appearance] setTintColor:[UIColor colorWithRed:227.0/255.0 green:28.0/255.0 blue:31.0/255.0 alpha:1]];
//設(shè)定Tabbar的顏色
[[UITabBar appearance] setBarTintColor:[UIColor colorWithRed:0 green:0 blue:0 alpha:1]];
請(qǐng)?jiān)诖a中使用RGB顏色, 格式是:
colorWithRed:227.0/255.0 green:28.0/255.0 blue:31.0/255.0
alpha:(透明度從1-0,代表從不透明到完全透明)
運(yùn)行后,按鈕點(diǎn)擊效果就是我們想要的顏色了,當(dāng)然tab bar的背景顏色也可以隨意修改。
五、大功告成——來(lái)看看演示效果
來(lái)看看靜電的演示動(dòng)畫吧,相信你也可以輕松辦到 :)
源文件 微盤下載
掃一掃,關(guān)注靜電同學(xué)的微信號(hào):
靜電的Sketch教程合集:
- 《SKETCH設(shè)計(jì)教室!從零開始學(xué)APP設(shè)計(jì)利器SKETCH(一)》
- 《SKETCH設(shè)計(jì)教室!從零開始學(xué)APP設(shè)計(jì)利器SKETCH(二)》
- 《SKETCH設(shè)計(jì)教室!帶你了解超好用的SKETCH插件》
- 《想要一稿過(guò)不加班?SKETCH絕配神器MIRROR搶先體驗(yàn)》
作者:@JingDesign
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:2650232288@qq.com】
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái),專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書:史上最全的設(shè)計(jì)師圖書導(dǎo)航:http://hao.uisdc.com/book/。
設(shè)計(jì)微博:擁有粉絲量89萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ,歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航:全球頂尖設(shè)計(jì)網(wǎng)站推薦,設(shè)計(jì)師必備導(dǎo)航:http://hao.uisdc.com
官方微信:想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎?添加優(yōu)設(shè)哥微信號(hào):youshege
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評(píng)論!每天贏獎(jiǎng)品
點(diǎn)擊 登錄 后,在評(píng)論區(qū)留言,系統(tǒng)會(huì)隨機(jī)派送獎(jiǎng)品
2012年成立至今,是國(guó)內(nèi)備受歡迎的設(shè)計(jì)師平臺(tái),提供獎(jiǎng)品贊助 聯(lián)系我們
AI輔助海報(bào)設(shè)計(jì)101例
已累計(jì)誕生 737 位幸運(yùn)星
發(fā)表評(píng)論 為下方 1 條評(píng)論點(diǎn)贊,解鎖好運(yùn)彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評(píng) ↓