iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 1
0
Software Development

Swift 新手上路之30天復刻版型系列 第 1

Day 1 - ASOS 版型檢視

第一個要來練習版型的是ASOS APP

首先先大概檢視一下以下版型:
https://ithelp.ithome.com.tw/upload/images/20171219/20107699EzCkKRqqWo.jpg

最上面區塊部分可左右滑動,下方區塊則以表格方式將Accessories Items分列在每行上面

使用工具:

  1. Navigation controller
  2. Scroll view
  3. Page control
  4. Table view
  5. Tab bar

實作方向:

  1. 上方區塊圖片用scroll view來實現藉左右滑動來達到切換圖片的目的,下方放置page control來達到告訴使用者總共有多少張圖片以及現在是在幾張圖片的效果。
  2. 下方區塊整齊地將商品分類呈現在畫面上,並且每一列為一個分類,這裡使用table view表格元件來達到這樣的效果,畫面佈局為商品圖片與商品分類在一列。

Note:

  1. ViewController這個類別要符合UITableViewDataSource以及UITableViewDelegate協定的規範以增加表格有關的功能。而table view元件會透過三階段對話呼叫特定函數來得知要如何顯示表格內容。
    i. numberOfSections
    ii. numberOfRowSection
    iii. callForRowAt
  2. 藉indexPath參數得到表格位置
    https://ithelp.ithome.com.tw/upload/images/20171220/201076991GcaHRtX0r.jpg
  3. 在cell中設定identifier(e.g. "Cell"),以dequeReuseableCell函數來查看"Cell"的memory pool中是否有閒置的記憶體可使用,有的話就會傳回閒置中的儲存格,反之就產生一個新的。藉此避免表格中資料筆數過大造成記憶體空間不足而當掉。

下一篇
Day 2 - ASOS 表格
系列文
Swift 新手上路之30天復刻版型30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言