横スクロールメニューボタン作成方法について解説
コードの記述は無し。ストーリーボードのみで設定できます
縦スクロールは以下の記事を参照してください↓
完成形はこれ
Main.storyboardの編集
まずはScrollViewを設置します
![](https://utro-develop.com/wp-content/uploads/2021/08/31B76776-C61C-44C5-9138-9CCB81A7DF95-1024x717.png)
次にScrollViewに制約を付けます
左右はSafeAreaに対して”0″、上は”100″。高さは”50″で固定します。
![](https://utro-develop.com/wp-content/uploads/2021/08/0BFBF7B4-9028-469F-9141-1E3785A20E9E-1006x1024.png)
![](https://utro-develop.com/wp-content/uploads/2021/08/70C1AF40-B3F5-4177-9F70-81DA946686C6-653x1024.png)
ScrollViewの設定は以上でおしまい
次にScrollViewの中にViewを設置して、画像のように制約を付けます
![](https://utro-develop.com/wp-content/uploads/2021/08/D8505B7B-7DC8-4648-8E5C-E00E4B2AA981-1024x708.png)
![](https://utro-develop.com/wp-content/uploads/2021/08/8E8D5403-2D29-4202-8E1B-B506A5CB53E8-1024x795.png)
ScrollViewとViewを同時選択して、EqualWidths,EqualHeightsにチェックし
Add 2 Constraintsボタンを押すと、レイアウトのエラーが解消されます
![](https://utro-develop.com/wp-content/uploads/2021/08/841BFE37-CB6D-4917-9FCC-0E8C5B6EFD0D-1024x752.png)
![](https://utro-develop.com/wp-content/uploads/2021/08/B2F5529A-739D-407C-ACA4-46997EDE6D86-718x1024.png)
以上でViewの設定は完了です
次にViewの中にスタックビューを設置して画像にように制約を付けます( ;´Д`)
![](https://utro-develop.com/wp-content/uploads/2021/08/A9633DE4-58A7-49B9-B7F2-634251099242-1024x724.png)
(見にくいので、StackViewの背景色は変更してます)
![](https://utro-develop.com/wp-content/uploads/2021/08/1FEA8930-CE03-47E3-BEFB-EF5E54DE17D1-1024x792.png)
スタックビューの設置ができたら、ボタンを4つ配置します
ボタンの背景色は好きな色に変更して見やすくしておきます
以下画像の通り、StackViewのDistributionは”FillEqually”にしておきましょう
![](https://utro-develop.com/wp-content/uploads/2021/08/141A7156-FE3A-4260-B8D2-1F46DCB6BD25-1024x600.png)
最後に、ScrollViewのWidthのMultiplierを1→1.5に変更したら完成です
ビルトして確認してください
(Multiplierの値を、2倍、3倍にすれば、横スライド幅も大きくできます)
![](https://utro-develop.com/wp-content/uploads/2021/08/727FF505-B95F-4963-901D-F9CDBBB6FEE7-1024x667.png)
その他、ScrollViewの設定を色々といじれば、インジゲーターの表示/非表示など選べます
![](https://utro-develop.com/wp-content/uploads/2021/08/F374E8F9-B0AE-41C1-BEB6-2854395B2884-1024x531.png)
今回は、スクロールするメニューボタンを作っただけですが
PageViewControllerなどと組み合わせて、Viewを切り替えたら、それっぽいアプリができます
おしまい( ´∀`)
コメント