#12 Scroll View — 臉盲九宮格

上課時聽到彼得潘老師講述之前為偶像Penny做App的故事, 透過App完成夢想的故事多麽令人感動. 我決定也要好好學習App, 希望有朝一日也能追隨Peter的腳步, 幫自己的偶像完成專屬的App.

Penny 回家路上 iOS App 全記錄

第二次的作業, 是要透過scroll view的方式來實現水平/垂直的畫面滑動, 這是一個很好的練習機會, 所以我決定先用我目前還不熟練的App技術, 來幫我的偶像 - 阿信來製作一個App, 希望阿信能夠喜歡我的作品, 之後可以再來討論合作, 加入更多的功能.

Step1:

先在畫面上加入一個Scroll View (設定Width = 100, Height = 100).

Step2:

加入View, 並拖曳到Exit的下方, 這時候右邊的畫面會顯示一個View獨立出原本的畫面中. 因為我希望在每個方格中可以有兩個頭像切換, 所以這邊View的大小會設定為Width = 200, Height = 100.

Step3:

把想加入的照片拖曳到Assets.xcassets.

Step4:

在獨立出來的View中, 新增兩個Image View (Width = 100, Height = 100). 並在右邊欄位選取對應的Image名稱.

Step5:

接下來, 我們在把獨立的View拖曳進去原本的Scroll View.

(拖曳完後可能會發現畫面不見, 不過不用擔心只需要調整View的x/y位置就可以正確顯示出來)

Step6:

接下來, 為了讓畫面能夠滑動, 我們需要設定Scroll View的content size (捲動範圍). 特別要注意的是content size的寬度要大於原本Scroll View的寬度, 這樣畫面才能水平移動.

首先先點到Scroll View, 在於右方的Identity inspector裡面的Attributes中, 新增內容. Key Path中貼上contentSize, Type選擇Size, Value設定為{200, 0}.

Step7:

最後, 因為我們希望畫面總是呈現為一個完整的頭像(不想讓畫面呈現出兩個一半的頭像). 所以這邊還需要把Paging Enabled(分頁效果)的選項勾起來.

接著我們來看完成的成果如何吧!

GitHub:

kuojed/faceTest

參考資料:

設定 content size，實現水平捲動，上下捲動和分頁的 scroll view