如果我知道人生該是什麼模樣,或許我可以每天過得很快樂,做自己喜歡的事,過自己喜歡的生活,認識自己喜歡的朋友

可惜世界永遠與你想的不一樣,你身旁的朋友並不會與你做相同的選擇,你唯一能做的就是盡你所能,做出你自己喜歡的決定

這正是為何我會坐在這裡打著這一篇文章參加這門課程,

這真的是一件很難的決定,想想其他朋友也在其他產業(T什麼MC的、發什麼哥的)混了非常久,也有些成就,當然有的也有小孩跟家庭XD 還好我秉持著一人活全家活的理念,趁自己年輕多嘗試一些不同的決定

我會學想轉IOS主要有三個原因

  1. 有一天我會想去國外工作闖闖,但要去國外談何容易,最好有專業技能與技術,而且純軟未來可能成為趨勢,自己有這樣這麼棒這麼新的技能,我會覺得我不斷地在進化,而且我有機會認識不同國家的人,我會把英文維持得非常好,希望我有天可以與外國人concall (但最好不要是印度人XD)
  2. 我是超級果粉,我覺得apple的東西真的非常的棒,雖然使用的是自家的系統,但在使用者體驗上還有續航力上真的屌打一堆其他廠牌,我希望也能為這項產品做出一些貢獻,體驗一下蘋果開發者的感覺

雖然自己以前工作寫過C/C++,做一些跟電腦視覺演算法相關的開發,也當過Presale,專門處理國外客戶複雜的技術問題,但來到這邊,還是跟大家抱持著一樣初學的心情,我希望優秀的人不要一直往傳統的半導體產業跑,台灣的軟體圈需要我們,所以一起加油吧~


本次的作業目的主要是利用UIBezierPath來做一些有興趣的Logo,我們預期在這個過程中可以學到如何使用IOS的SDK,不管在SwiftUI或是UIKit開發流程中,path 是非常常使用的,尤其是我們可以利用他們來創造一些有趣的動畫或是pie chart,是個非常實用的API

由於我是個個喜歡運動的男人,這次我就選了ADIDA的LOGO當作這次作業的實驗對象,歡迎ADIDA來找我業配XDD

ADIDA LOGO

在開始之前,我們先看這個圖,基本上我們需要利用UIBezierPath的API來幫助我們葉子的形狀,至於下方的字體我們可以在網路查找adida使用的字體來做text view即可

由於直接利用傳統UIKit的方式製作需要跑魔力氣來看我們每個步驟正不正確,所以在本次作業我們利用swiftUI來開發,可以利用最方便的preview功能,當我們在畫圖時,preview可以幫我們做即時的demo,事前設定可以參考下篇的教學文章

利用UIBezierPath的API做圖

事前準備

在做圖之前,我們必須先知道image中個點的座標,我們可以利用下面的網站幫我們計算

https://yangcha.github.io/iview/iview.html

在得到各個位置的座標點後,就可以利用UIBezierPath的API來做圖,還不太了解如何使用API的同學可以大略參考下面的教學文

另外我們也會用一些affine transform 來幫助我們將view做一些旋轉平移對稱,在畫的時候會比較省力,可以參考下方對transform API的說明

製作中心葉子的軌跡

我們利用二次曲線來模擬葉子曲線的軌跡,比起addCurve與addArc,使用addQuadCurve會比較容易可以控制,我們只需要一個control point這項參數

圖中有看到我們會把軌跡移動到畫面中心的function shiftPathToCenter

主要就是可以把畫出來的軌跡最後對齊在畫面中心以及適當的高度

同理我們利用path 的API來畫中間的下方的葉片,詳細的實作可以參閱git 上面的code,我們將得到以下畫面


本篇Project參考字以下的guide,主要目的是熟悉各種UI element 的功能,尤其重點或著重在Navigation Controller, Tab Bar Controller, 以及Table View Controller,基本上這三大元件可形成幾乎整個IOS APP的架構,幾乎可以說是 UIKit 三寶

在開始之前先宣揚一下我的創 …


Scroll View 是在各種平台上都可以容易看到的操作方式,像是在手機可以透過Scroll 來捲動內容,瀏覽器也可以透過Scroll來捲動網頁,本篇要以模仿Netflix APP 的方式來玩一下UIKit的Scroll View

在開始前先欣賞一下原始Netflix 潮潮的Scroll 功能~

Netflix Scroll View

Horizontal Scroll

從Netflix 的 UI 可以看到我們可以透過水平的 …


當我們再利用UIKit 開發IOS時,會使用到各式各樣的UI元件,至於何謂UI元件呢?基本上當我們在使用APP時,會看到有許多讓我們進行操作的區塊,而這些區塊的目的就是要誘導使用者對APP做出合理的控制,基本上這些區塊是有多個小元件所組成,我們將這些元件稱為UI 元件(User Interface Component)

本篇的重點會著重在介紹下列 …


本次作業是要利用 Xcode 的Simulator來執行 IOS 專案,並且透過recorder 進行錄製

本作業的說明參考至以下連結:

詳細操作步驟如下:

GitHub Profile:

Repository:

2. 執行專案,並且錄製simulator

錄製方式: 按下按鍵組合 shift + cmd + 5,選擇 ”Record Selected Portion”,選取所需要錄製的範圍,最後將錄完的mov檔案存至Desktop

轉檔方式: 利用下列連結將當按從 mov 轉成 gif

錄製結果

Gilbert Wang

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store