這是一個遇見小王子的故事
實作stack view + scroll view 製作分頁 tutorial (懶得寫程式版)
故事是這樣的,小王子過往的故事大家都知道就不再贅述,後來有一個小女孩遇見了小王子,2019年又有一個小女子遇見了小王子,從此跟著小王子在Swift小宇宙闖蕩著,雖然在這個Swift小宇宙闖蕩困難重重,但是有小王子的幫助相信這位小女子將來有一天可以在Swift小宇宙裡面自在悠遊著。
小女孩與小王子的故事很好看可以看一下:
2019年小女子遇見小王子的故事:
好啦!這是實作stack view + scroll view 製作分頁 tutorial的作業,利用前一份作業10YearChallenge中照片延伸的故事,前面是我2009到2019的照片,在2019這個人生轉捩點遇到了小王子,開始了在Swift小宇宙闖蕩的日子。
介紹一下如何做的:
1.先加入照片至Assets:
2.加入Scroll View:
3.設定Scroll View對齊View(上下左右與View的距離為零)
這個步驟小王子有更快更好的做法,請參考文章最後的連結。
4.先加入照片到Scroll View裡面
5.再把照片裝進Stack View裡面
6.設定stack view 和 content layout guide 上下左右的間距為 0。
7.裝進Stack View的照片變成垂直顯示,可以從Axis改成水平顯示
8.將 Stack View 的 Distribution 改成 Fill Equally,讓照片的寬度等於螢幕寬度,Spacing 設為 0,讓照片之間沒有間距。
9.設定第一張照片和 Scroll View的 Equal Widths跟 Scroll View 一樣寬,等同於螢幕的寬度,後面的照片也會跟第一張照片一樣。
10.再設定 Stack View 和 Scroll View的Equal Heights,讓Stack Viewc和Scroll View一樣高。
也可以繼續增加照片,只要將Image View再加到 stack view 裡就行了。
另一個版本-加入分頁功能:
只要在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