iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
1
Mobile Development

iOS App初心者的30天試鍊系列 第 4

Day4:來介紹navigation controller及tab bar controller

  • 分享至 

  • xImage
  •  

在昨天設定完Segue後,眼尖的朋友會發現一件事,就是第二頁並無法返回至第一頁

故接下來我們先來介紹Navigation Controller,選取第一個要顯示的App頁面

的ViewController,並且點選右下⾓角向下的箭頭(embed in),如下圖

https://ithelp.ithome.com.tw/upload/images/20190911/201121826IfUQyaXS9.jpg

選擇Navigation Controller

https://ithelp.ithome.com.tw/upload/images/20190911/20112182oYWMVz0GjR.png

我們就會在第一個App頁面前面看到一個空的Navigation Controller,同時前面有箭頭

https://ithelp.ithome.com.tw/upload/images/20190911/201121826NTfNVkFJ1.png

執行iPhone XR模擬器的畫面如以下網址影片,我們可以看到App第二個頁面會多出

Back的字眼

https://streamable.com/40l4z

我們接下來設計一個App,首頁有3個頁面,這時先按住+,新增Tab Bar controller

到Main.StoryBoard

https://ithelp.ithome.com.tw/upload/images/20190911/20112182u4XoFIyBoS.png

我們就可以看到一個新的Tab Bar Controoler畫面

https://ithelp.ithome.com.tw/upload/images/20190911/20112182upPY9vjKph.png

接著我們去調整Tab Bar Controller第一頁的顏色 , 以方便我們待會執行App來區別

https://ithelp.ithome.com.tw/upload/images/20190911/2011218234rYxi5oev.png

接著我們去調整Tab Bar Controller第二頁的顏色 , 以方便我們待會執行App來區別

https://ithelp.ithome.com.tw/upload/images/20190911/20112182D8E3Qwoi4I.png

直接選取第一個Tab Bar Controller , 並勾選Is initial View Controller

https://ithelp.ithome.com.tw/upload/images/20190911/201121824FE2BgSDJx.png

選取Item , 拉線到Tab Bar Controller , 如下圖 :

https://ithelp.ithome.com.tw/upload/images/20190911/20112182Ts7uw3LN28.png

完成後Tab Bar Controller跟Item就連線起來

https://ithelp.ithome.com.tw/upload/images/20190911/20112182MC2YvY84ez.png

接著我們把Tab Bar Item換掉圖案

https://ithelp.ithome.com.tw/upload/images/20190911/20112182PplgKWvNgH.png

然後在Tab Bar Controller--->第1個View Controller加上ImageView ,

做法可看Day3 (如下圖)

https://ithelp.ithome.com.tw/upload/images/20190911/20112182UIenEE7yvS.png

然後在Tab Bar Controller--->第2個View Controller加上ImageView ,

做法可看Day3 (如下圖)

https://ithelp.ithome.com.tw/upload/images/20190911/20112182ctpIuWN56l.png

完成後可以看到以下的Main.StoryBoard

https://ithelp.ithome.com.tw/upload/images/20190911/20112182H6NdFb21se.png

執行iPhone XR模擬器即可看到以下App整合Tab Bar Controller &

Navigation Controller畫面

點選Tab Bar Controller第二個選項

https://ithelp.ithome.com.tw/upload/images/20190911/20112182qofSlxH02V.png

點選Tab Bar Controller第三個選項

https://ithelp.ithome.com.tw/upload/images/20190911/20112182ttxqs6gvej.png

點選Tab Bar Controller第三個選項--->Viwe Controller-->Button

https://ithelp.ithome.com.tw/upload/images/20190911/20112182SApOTnLQm5.png

點選Back回到上一頁

https://ithelp.ithome.com.tw/upload/images/20190911/20112182nokIzg429T.png

點選Tab Bar Controller第二個選項

https://ithelp.ithome.com.tw/upload/images/20190911/20112182rE6qTmtoBE.png

點選Tab Bar Controller第一個選項

https://ithelp.ithome.com.tw/upload/images/20190911/20112182XCrwBOdtPk.png


上一篇
Day3:今天先來研究一下Segue , 知道如何連接App畫面
下一篇
Day5:今天來談一下70%的App會使用的Table View Controller
系列文
iOS App初心者的30天試鍊31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言