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
接著我把照片拉到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 的選項變會出現檔案在桌面上
由於在建立專案時已經有勾選create git repository on my mac 的選項,所以我們直接看向左側navigator那欄
點選到邊欄第二格的repository,右鍵選取New “project名稱“ Remote 這個選項最後點create就完成上傳了
藉著我們將游標移到專案名字後右鍵選取view on Github就可以打開專案了