iOS App (Swift) 新手工程師

(課程心得＋轉職歷程分享+求職心得分享)

前言

#16 以 static cells 模仿製作 iOS App 表格頁面

做出一模一樣的東西，莫名的感到療癒～😂

使用了sketch & zeplin，尺寸為iPhone SE2

#18 Tab Bar Controller & Navigation Controller 的相關練習

Navigation

放大版的 navigation bar

#6 研究常用的UI元件（3）

研究輸入單行文字的UI Text Field的屬性欄位

Text Field

研究各種 UI 元件、UIImageView 的 Content Mode、UILabel、UITextField

Segmented Control

#19 從 Figma Community 練習實作 App 畫面

Figma Community大概是sketch & zeplin的綜合版吧？
我個人覺得Figma Community比較好用😅

#17 模仿製作 iOS App 的首頁畫面

唯一崩潰的大概就是打抖音影片的名稱吧…….🥲

．從 iPhone 螢幕截圖 App 畫面，將圖片用 AirDrop 傳到 Mac。
(ps: 不要用 LINE，LINE 會壓縮改變圖片大小。)

．利用 preview（內建照片預覽程式）查詢 App 畫面裡元件的大小位置。

．設定元件的顏色。

設Scroll View之content size實現水平/垂直捲動

模仿一頁精美的APP畫面

成品：水平垂直捲動：KKTV / 分頁效果：超級瑪利歐兄弟3破關獎勵

#1 用美人開啟iOS Application的序章

首先進行畫面展示

就在今天110年3月14日宅在家完成了這個

Line App仿真模擬

在時間有限的情況下，發現平常就在使用的Line就包含目前所學Storyboard的所有功能！

元件的研究兒

這次的功課認識了好幾個平常使用iphone app常用的元件。

因為這些元件我想都是以後設計app會時常用到的，所以把它寫在筆記本上，這樣要翻書找比較快。

附上筆記本頁面lol

模仿製作 iOS App 的首頁畫面

模仿 Booking.com 的 APP 不過有些還是偷懶只有照片表示….
在 LaunchScreen.storyboard 加入了一張圖當作打開 APP 的啟動圖，不過顯示的時間很短一下就過去了。

APP Gif 錄製 ＆上傳Github

一、製作畫面

製作story board 畫面

研究顯示文字的 UILabel

Line Break、Autoshrink、Shadow細項的解釋

Line Break