Be A Hero- 認識UIImageView & Gif錄製

Goal: 打造一個介面,包含超級英雄的名言以及圖片並錄製gif

— Step 1. 蒐集heroes的語錄與照片

— Step 2. 新增一個label放入英雄的quotes

— Step 3. 新增一個imageview並導入heroes image

— Step 4. 複製viewcontroller將同樣的事再做一遍

— Step 5. 新增一個button

— Step 6. 錄製gif並推到git中

Step 1. 蒐集heroes的語錄與照片

首先我在網路上下載了Batman 跟 The flash 的照片並搜索了他們的名言

“It’s not who I am underneath, but what I do that defines me.” — Batman, Batman Begins

“You can’t let the threat of losing tomorrow keep you from making the most of today.” — Barry Allen

Batman(R) and The Flash(L)

接著我把照片拉到Assets中,並更改圖片檔案名稱

Step2. 新增一個label放入英雄的quotes

點選shoe library可以加入元件,加入label後,可以在右側Text處輸入quotes並並在下方Font出修改字體與大小,我這裡用的是Marker Felt Thin 30

此外記得要改lines,不然萬一句子太長會無法整個顯示在螢幕上,我這裡將lines改成 3

Step3. 新增一個imageview並導入heroes image

加入imageview後,在右側選單選單的第一欄可以將照片選入,選入後即可調整到合適的位置及大小

接著調整背景顏色,點一下view後在右側的background欄位可以調整背景顏色,選擇custom後可以看到opacity(不透明度)下方有一個取色器,我用它選擇與圖片相同的顏色以保持背景顏色的一致

取色器調整顏色

Step4. 複製viewcontroller將同樣的事再做一遍

用上述相同的步驟完成The Flash 頁面的製作

Step5. 新增一個button

新增button元件,並在右側Title下方欄位輸入 ” > ” ,表示向右的意思,接著一樣調整樣式與大小,調整完成後兩指移動將button按鈕拉至另一個頁面。此時會跳出選項,選擇show便可完成操作

Step6.錄製gif並推到git中

按下左上方的三角形按鍵啟動模擬器

模擬器啟動後點選左上方的File按鈕可選擇Record錄製,錄製完成後點選藍色暫停按鈕完成錄製。

影片錄製完成後會出現在右下角,右鍵點選anime gif 的選項變會出現檔案在桌面上

錄製gif
gif 錄製

由於在建立專案時已經有勾選create git repository on my mac 的選項,所以我們直接看向左側navigator那欄

點選到邊欄第二格的repository,右鍵選取New “project名稱“ Remote 這個選項最後點create就完成上傳了

github上傳

藉著我們將游標移到專案名字後右鍵選取view on Github就可以打開專案了

--

--