iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
2
Mobile Development

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

Day5:今天來談一下70%的App會使用的Table View Controller

  • 分享至 

  • twitterImage
  •  

在我們常用的App裡面有70%的畫⾯是用Table做出來的 , 所以在學完Day5後 ,

市面上的大部份App的畫面基本上都可以實做出來

表格的特性為(1)由上⽽下依序排列 (2)可以上下捲動,不能左右捲動 (3)不限制數量

以下我們就以最近火熱的美食外送App UI做為示範 , 用Table View Controller來實做完成

https://ithelp.ithome.com.tw/upload/images/20190912/20112182OIBPEjI8zs.jpg

我們先建立一個新專案 , 並且新增Table View Controller在StoryBoard

https://ithelp.ithome.com.tw/upload/images/20190912/20112182uRLVAP2NU7.jpg

我們會看到一個Table View Controoler及預設的View Controller在StoryBoard上

https://ithelp.ithome.com.tw/upload/images/20190912/20112182dqgVWmn3Mp.png

將Content改為Static (表格中的內容是固定大小)

https://ithelp.ithome.com.tw/upload/images/20190912/20112182JprCuoBbOi.png

在Table View Cell加入ImageView及TextField

https://ithelp.ithome.com.tw/upload/images/20190912/201121825qq29RV2TR.png

在Assets.xcassets加入外送餐飲圖片

https://ithelp.ithome.com.tw/upload/images/20190912/20112182xJMBUkxggn.png

將Sections調整為10 (產生10個表格)

https://ithelp.ithome.com.tw/upload/images/20190912/201121824iKRxGMCmh.png

完成後即可看到以下的Storyboard

https://ithelp.ithome.com.tw/upload/images/20190912/20112182mShFb9pX4d.png

按下iPhone XR模擬器即可看到以下的執行結果

https://ithelp.ithome.com.tw/upload/images/20190912/20112182lSvVZD6KIW.png

往上滑會看到其它美食餐飲資訊

https://ithelp.ithome.com.tw/upload/images/20190912/20112182YqEY0sd2WI.png

執行美食外送Table View Demo影片

https://streamable.com/wramz


上一篇
Day4:來介紹navigation controller及tab bar controller
下一篇
Day6:今天來聊聊如何使用Scroll View
系列文
iOS App初心者的30天試鍊31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Wade1233
iT邦新手 5 級 ‧ 2021-03-21 19:41:33

請問top bar的food HAHA怎麼顯示出,需要什麼設定?

我要留言

立即登入留言