[Swift] 不用 Code之橫向滾動的實現

看到不會做的效果，手總是會癢癢的，不過先提點別的

螢幕間拉線除了按右鍵外，也能按 control並按住左鍵拉（不過以 Macbook來說就是按兩鍵拉跟按一鍵 ＋control拉的區別）

上一篇不用 Code寫 App在這裡：

[Swift] 從零開始的 Swift-簡易人物介紹 App

橫向滾動是使用 Scroll View這個元件，繼上次的練習，這次把三期生拿來做練習

橫向滾動

首先先新增一個新的 View Controller並塞入 Scroll View，Scroll View的寬度跟螢幕一樣

要能有滾動的效果，首先顯示部分的寬度當然要超過螢幕，這裡在 Scroll View中新增一個子 View並設定想要的寬度，卻發現多餘的部分都被裁掉了

綠色部分被裁掉了

為了編輯方便，這裡有個小技巧是先把View從左方的選單中拉出 View Controller

這裡同時設定滑動區塊的寬高

比照上一篇的設計，View Controller底部是淺灰色， Scroll View則是透明底色

把上一篇寫好陰影跟圓角的 View直接使用

完成內容後將滑動區塊拖曳進螢幕上的 Scroll View中並調整位置

還要幫 Scroll View加上 contentSize屬性，類型選取 Size，寬度要跟剛剛設定 Scroll View的寬度一樣，高度則是不要大於設定的高度就好（為了不讓區塊能上下滾動）

同時取消右上的水平指示條讓畫面更正常

分頁功能

有時設計上會希望區塊的切換是像換頁一樣，不允許圖片卡在一半的，這裡可以稍微調整一下

1.勾選 scrolling的 paging enabled

2.調整滾動區塊寬度
再來就是要調整螢幕的寬度了，這裡的一頁其實就是一個螢幕寬，所以像這裡有3個區塊，如果想要一頁一張圖的話，每個區塊就要設定為一個螢幕寬，所以滾動區塊的寬度須調整為3個螢幕寬（414*3）

如果像我這樣不特別調整的話，原滾動區塊寬600，螢幕寬414，這樣就只會有2頁，雖然看起來是兩頁，實際上兩頁的判定範圍差很多，要滑到最右邊才會換到第二頁

最後再把跟上一篇一樣的子分頁複製並建立連線…這時候突然想起這幾個圖片不是按鈕，所以要多插一層 button在裡面，並用 button建立連線

點不到的區塊可以從左側列表拉線

成果：

（操作時其實能明顯感覺到頁面要拉到很右邊才會彈到第二頁）

Github

feat:add horizontal scroll area · KakeruChang/HoloIntroduction@aa92469

參考（X）

照抄（O）:

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