2020-11-13|閱讀時間 ‧ 約 3 分鐘

#24 Storyboard 電子書 App -自製履歷表

    作業目的: 不寫程式,從 storyboard 運用 tab bar controller,navigation controller,table view controller & static cell 實作電子書 App。

    amp-img-attr

    使用功能

    1. 搭配 tab bar controller & navigation controller。
    2. 使用 table view controller with static cells。
    3. 使用 segue 串接頁面。
    4. 使用IOS SDK的各種UI元件,包括view, image view, button, label, text field, text view, table view, scroll view。
    5. 使用 SF Symbols,另外也可從 flaticon 網站找尋精美的 App Icon 素材。
    6. 額外找尋適合的中文字型,加入客製字型。

    內容簡介

    主要參考大多人力公司的履歷表規格設計出基本的格式,這次特別對scroll view和連結有興趣,因此有多花點時間製作與研究。

    scroll view 的設計方法則是額外插入一個view,並將view的大小設定為原有螢幕尺寸的幾倍大(若是左右滑動寬度改變,上下滑動則為高度改變),另外若是需要產生分頁的效果則在scroll view 的page enabled勾選,即可達到效果。

    連結的製作方法則是運用text view可以使用網址連結的部份加上相關的Icon,然後將text view的內容和背景透明,並將icon和text view的內容重疊即可達到效果。

    table view的部分則選定為static cells,在style的部分也有很多可以做選擇,分別有inset grouped, grouped, plain幾種,他分別反映不同類型的cells嵌入方式。這次我使用inset grouped,是一種獨立出來cells的感覺。

    另外研究了一下Table view, Table view section和Table View Cell的差別:T

    Table View :涵蓋整個表格區域。

    Table View Section: 涵蓋每一分類的表格內容,可區分成好幾種類的表格。

    Table View Cell: 每一格的表格本身的內容。

    字型部分仔細研究才發現,除了可愛的風格之外,很難找到適合中文字的字型內容,或者大多是要付費,所以先套用了自己覺得還可以並且免費的字型。

    這次研究下來發現,最難的不是ios的SDK操作起來最難,最難的是要怎麼設計UI版面啊!!!!

    分享至
    成為作者繼續創作的動力吧!
    從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

    發表回應

    成為會員 後即可發表留言
    © 2024 vocus All rights reserved.