[Swift/Xcode]初心者必見！iOSアプリ作成から公開まで徹底解説！#03　「スクロールビュー編」

今回からXcodeを使ってアプリを作っていきたいと思います！

動作環境は下記の通りです！
Xcode Version 12.5　Swift version 5.4

とりあえずプロジェクトを立ち上げないとですね！
さすがにここは割愛します(^^;
プロジェクトの立ち上げ方をおさらいしたい方は下記を読んで下さい〜
[Step1]新規プロジェクトを作成しよう！

さて何からしましょう？？とりあえずボタンを365個配置してみましょうか？
いや！まずは初めて実装するスクロールビューの使い方を調べなくては、、、
と言う事で今回はスクロールビューの使い方を説明したいと思います！

スクロールビュー(UIScrollView)を表示させてみよう！

スクロールビューってなんとなくわかりますよね？
画面に収まりきらない場合、スクロールしたら見れるやつです！
そのままですね(^^;

ちょっと調べところ、スクロールビューの中にビューを入れて、
そのビューがどんだけ大きくてもスクロールしたら見れる感じみたいです！

なのでとりあえずスクロールビューを良い感じに表示させてみました！

オレンジのビューがスクロールビューです！
コードはこんな感じです！
ストーリーボード使ってないのでコピペで同じようになるはずです！

import UIKit

class ViewController: UIViewController {
    //スクロールビュー
    let scrollView = UIScrollView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //スクロールビューの表示
        view.addSubview(scrollView)
        
        //スクロールビューレイアウト
        //背景色
        scrollView.backgroundColor = UIColor.orange
        //AutosizingをAutoLayoutに変換しないようにしている（おまじない）
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        //X軸
        scrollView.centerXAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.centerXAnchor).isActive = true
        //Y軸
        scrollView.centerYAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.centerYAnchor).isActive = true
        //横幅
        scrollView.widthAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.widthAnchor, multiplier: 0.9).isActive = true
        //縦幅
        scrollView.heightAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.heightAnchor, multiplier: 0.9).isActive = true
    }
}

コードでビューを生成したりオートレイアウトするのは初めてって人もいると思うので、最初はなるべく細かく説明していきたいと思います！
もう知ってるよって人は飛ばして下さい。


5行目でスクロールビューのインスタンスだっけ？を生成してます！
ストーリーボードで言うところの、部品をとりあえずドラッグ&ドロップする感じです！

これだけでは表示されないので、ビューの表示とオートレイアウトを設定してあげます。

18行目がビューを表示させるコードです。
view　→　最初から配置されているビューの事。
addSubview　→　サブビューとして追加するって意味
(scrollView)　→　5行目で生成したscrollViewの事。

これを繋げると、最初から配置されているビューのサブビューとしてscrollViewを追加しますって事です。
scrollViewにサブビューを追加したい場合は、viewのところをscrollViewに変更すればOKです！


ではオートレイアウト部分の説明をします！

15行目は単純に背景色の設定です。

17行目はオートレイアウトをコードで書く時に必ず書くおまじないみたいなものです。
AutosizingをAutoLayoutに変換しないようにしている。らしいです。
あまり詳しく調べるのはやめましたw


次はビューの配置に関してです。

スクロールビューはビューを基準に位置とビューの大きさを指定しました。
上の画像では白い部分がビューでオレンジがスクロールビューです。

19行目、21行目でXとYをビューと同じになるよう指定しています。
これでビューのど真ん中に表示されます。

次にビューの大きさを23行目、25行目で指定しています。
コードの見方としては、横幅の場合、

scrollView.widthAnchor → スクロールビューの横幅は
self.view.safeAreaLayoutGuide.widthAnchor　→ セーフエリアの横幅の
multiplier: 0.9 → 90%に指定。

こんな感じです。

スクロールビューにビューを入れる！

ではスクロールビューの中にビューを入れてスクロールさせてみます！
わかりやすいように動画を用意しました！

新しくピンクのビュー（名前はインビューとしましょう）を作ってスクロールビューの中に入れてあげます！
インビューはスクロールビューいっぱいに表示している為、通常スクロールビューは見えませんが、動画であるようにスクロールするとたまにオレンジ色のスクロールビューが見えます。

コードは下記です！

import UIKit

class ViewController: UIViewController {
    //スクロールビュー
    let scrollView = UIScrollView()
    //インビュー
    let inView: UIView = UIView()//今回追加！！！
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //スクロールビューの表示
        view.addSubview(scrollView)
        
        //スクロールビューレイアウト
        //背景色
        scrollView.backgroundColor = UIColor.orange
        //AutosizingをAutoLayoutに変換しないようにしている（おまじない）
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        //X軸
        scrollView.centerXAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.centerXAnchor).isActive = true
        //Y軸
        scrollView.centerYAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.centerYAnchor).isActive = true
        //横幅
        scrollView.widthAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.widthAnchor, multiplier: 0.9).isActive = true
        //縦幅
        scrollView.heightAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.heightAnchor, multiplier: 0.9).isActive = true
        
        
        //-------------   ここから今回追加しました  ------------------
        //ボタン表示用ビューの表示
        scrollView.addSubview(inView)
        //背景色
        inView.backgroundColor = UIColor.systemPink
        //ボタン表示用ビューの設定
        //AutosizingをAutoLayoutに変換しないようにしている（おまじない）
        inView.translatesAutoresizingMaskIntoConstraints = false
        //横幅
        inView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, multiplier: 2.0).isActive = true
        //縦幅
        inView.heightAnchor.constraint(equalTo: scrollView.heightAnchor, multiplier: 2.0).isActive = true
        //この4つの制約をつけて初めてスクロールするっぽい
        inView.leftAnchor.constraint(equalTo: scrollView.leftAnchor, constant: 0).isActive = true
        inView.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: 0.0).isActive = true
        inView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 0.0).isActive = true
        inView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 0.0).isActive = true
        //-------------   今回追加ここまで  ------------------
    }
}

簡単に説明しますね！

7行目でスクロールビューの中に入れるビューを生成。

32行目でスクロールビューのサブビューとしてインビューを表示。

次にインビューの大きさですが、インビューはスクロールビューより大きくないとスクロールしてくれない（する必要がない）ので、インビューの大きさは横幅、縦幅ともスクロールビューの2倍に設定しました。
39行目と41行目がそれです。

次にインビューの配置ですが、これはスクロールビューいっぱいに表示させたいので、左右上下、全てスクロールビューと同じ位置を指定します。
インビューは実際、横幅・縦幅ともにスクロールビューの2倍あるので、足りない部分はスクロール表示してくれます。
43行目から46行目がそれです！

0.0の数字を適当に変更させて試してみると理解しやすいと思います。

まとめ

今回はスクロールビューについて書きました！
次はこのスクロールビューの中にボタンを365個配置したいと思います！

まだ3記事目ですが、かなり時間かかってます(^^;
簡単なアプリの予定なので20記事くらいにはおさめたいな〜って思ってます！

読んでくれてありがとうございます。
なるべく早く次の記事を書きたいと思います！