24
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[Swift4]スクロールビューの使い方

Last updated at Posted at 2018-11-04

こんばんは、東條です。

久しぶりの投稿となりますが、
スクロールビュー使ってみたいなって人向けに簡単な使い方を書いておきます。

#1.はじめに
今回はストーリーボードは使わず、コーディングで全部やっていきます。
(コーディングでやった方がなんか安心感あっていいよね。)

#2.全体のソースコード
全体のソースコードはこんな感じになります。

ScrollView.swift
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        //UIScrollViewのインスタンス作成
        let scrollView = UIScrollView()
        
        //scrollViewの大きさを設定。
        scrollView.frame = self.view.frame
        
        //スクロール領域の設定
        scrollView.contentSize = CGSize(width:1000, height:1000)
        
        //scrollViewをviewのSubViewとして追加
        self.view.addSubview(scrollView)
    }


}

これだけです。
簡単に一つずつ説明しますと、

#3.解説
##3-1.スクロールビューのインスタンス化

ScrollView.swift
        //UIScrollViewのインスタンス作成
        let scrollView = UIScrollView()

ここでスクロールビューのインスタンス化を行います。
部品扱う時のおまじないみたいなやつですね。
これをしないとスクロールビューを扱えません。

##3-2.スクロールビューのサイズを設定

ScrollView.swift
        //scrollViewの大きさを設定。
        scrollView.frame = self.view.frame

ここでスクロールビューのサイズを決めます。
全画面スクロールさせたいので、viewと同じサイズに設定しています。

##3-3.スクロールビューの範囲を設定

ScrollView.swift
        //スクロール範囲の設定
        scrollView.contentSize = CGSize(width:1000, height:1000)

ここでスクロールビューのスクロールする範囲を決めます。
今回は縦にも横にもスクロールさせてみたかったので、
適当に幅と高さに1000を入れています。(シミュレータはiPhone7設定)

もし縦スクロールだけを行いたい!といった場合には、

ScrollView.swift
        //スクロール領域の設定
        scrollView.contentSize = CGSize(width:self.view.frame.width, height:1000)

こんな感じにすることで、横には移動しなくなります。

##3-4.スクロールビューの追加

ScrollView.swift
        //scrollViewをviewのSubViewとして追加
        self.view.addSubview(scrollView)

最後に、ここまで設定してきたスクロールビューを
ビューに追加して、完成です。

#4.おわりに
今回紹介したものは基本的な部品の追加方法なので、
ちょっとやったことある人なら当たり前のような内容かもしれませんね。

でももしSwift初めてみたけどストーリーボードでしか部品作ったことない人とか、
そういった方のヒントとなれば嬉しいです。

24
22
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?