這是一個遇見小王子的故事

實作stack view + scroll view 製作分頁 tutorial (懶得寫程式版)

little prince(網路圖片)

故事是這樣的,小王子過往的故事大家都知道就不再贅述,後來有一個小女孩遇見了小王子,2019年又有一個小女子遇見了小王子,從此跟著小王子在Swift小宇宙闖蕩著,雖然在這個Swift小宇宙闖蕩困難重重,但是有小王子的幫助相信這位小女子將來有一天可以在Swift小宇宙裡面自在悠遊著。

小女孩與小王子的故事很好看可以看一下:

小王子電影版

2019年小女子遇見小王子的故事:

Meet Peter Pan

好啦!這是實作stack view + scroll view 製作分頁 tutorial的作業,利用前一份作業10YearChallenge中照片延伸的故事,前面是我2009到2019的照片,在2019這個人生轉捩點遇到了小王子,開始了在Swift小宇宙闖蕩的日子。

介紹一下如何做的:

1.先加入照片至Assets:

Assets

2.加入Scroll View:

Scroll View

3.設定Scroll View對齊View(上下左右與View的距離為零)

對齊

這個步驟小王子有更快更好的做法,請參考文章最後的連結。

出現紅色錯誤別緊張
只是因為Scroll View不知道捲動範圍

4.先加入照片到Scroll View裡面

加入照片

5.再把照片裝進Stack View裡面

Stack View

6.設定stack view 和 content layout guide 上下左右的間距為 0。

設定間距為 0。

7.裝進Stack View的照片變成垂直顯示,可以從Axis改成水平顯示

從Axis改成水平顯示

8.將 Stack View 的 Distribution 改成 Fill Equally,讓照片的寬度等於螢幕寬度,Spacing 設為 0,讓照片之間沒有間距。

Stack View的顯示設定
Stack View的顯示設定

9.設定第一張照片和 Scroll View的 Equal Widths跟 Scroll View 一樣寬,等同於螢幕的寬度,後面的照片也會跟第一張照片一樣。

Equal Widths

10.再設定 Stack View 和 Scroll View的Equal Heights,讓Stack Viewc和Scroll View一樣高。

Equal Heights

也可以繼續增加照片,只要將Image View再加到 stack view 裡就行了。

完成

另一個版本-加入分頁功能:

加入分頁功能
Paging Enabled勾起來

只要在Scroll View把Scrolling裡面的Paging Enabled勾起來,這樣捲動scroll view 停下時都能剛好看到完整的照片。

最後分享一個小王子故事名言之一 :

『It is only with the heart that one can see rightly; what is essential is invisible to the eyes.
只有用心才能看清一切。真正重要的東西用眼睛是看不見的。』

在Swift小宇宙闖蕩的時候常常發生自己在胡同裡打轉的情況,有時候一急或氣急敗壞、鑽牛角尖的時候更是掉進黑洞之中,現在漸漸發現真的不要想得太複雜,要冷靜思考、用心思考才能看清一切啊!希望自己迷路的時間能夠越來越短,加油!

參考文章:

如果有值得大家參考的地方再麻煩大家幫我拍拍手喲,謝謝大家耐心閱讀XD

--

--

Julia Wang
彼得潘的 Swift iOS / Flutter App 開發教室

Learning Programming , Hiking , Travels , Tour , Exploring nature 『你必須要很努力,才能看起來毫不費力』