【2024年4月】弊社では、基本リモートワークで一緒に成長してくださるメンバーを広く募集させていただいております。 詳細はこちら

【Swift】画像を横にスクロール(UIScrollView)してスライド表示する方法

【Swift】UIScrollViewを使って複数の画像を横にスクロールしてスライド表示する方法
ふくしま

こんにちは!株式会社メモリアインクの福嶋です!

画像のスクロール表示はニュースアプリやソーシャルメディアアプリなど、多くの場面で必要とされる機能です。この記事では、Swift 5.9を使用して、UIScrollViewを利用し、複数の画像を横にスライドしながら表示する方法を詳細に説明します。

この記事を読んでわかること…
・UIScrollViewとは?
・Swiftでの画像の横スクロール実装手順
・カスタマイズ可能な画像スライダーの作成方法

目次

環境

Swift 5.9
Xcode 15.2

UIScrollViewとは

UIScrollViewは、コンテンツを表示するためのスクロール可能な領域を提供するUIKitのコンポーネントです。ユーザーは、指の動きに合わせてコンテンツを上下左右にスクロールできます。

実装

実装の全体像

まずは、これから実装したいことのイメージ図を見て全体像を理解しましょう!
3枚の画像を画面をスクロールしてスライド表示させるアプリを例として解説します。

【Swift】UIScrollViewを使って複数の画像を横にスクロールしてスライド表示する方法
  1. スクロール出来る範囲(UIScrollView)を画面上に配置
    ※便宜上UIScrollViewのが水色の範囲として見えていますが、実際は画像3枚分の横縦幅に合わせる必要があります。そうしないとUIImage以外の余白の部分までスクロールができてしまいます。
  2. UIScrollView上に画像(UIImageView)を追加する

大きく上記2ステップで実装ができます。
では実際にコードを見ながら、解説します!

前提

既に画像が3枚プロジェクト内に入っていること。
画像の入れ方がわからない方は、以下をご参考ください。

実装

import UIKit

class ViewController: UIViewController {
    var scrollView: UIScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // UIScrollViewのインスタンス化
        scrollView = UIScrollView(frame: view.bounds)
        // 画像の追加
        addImagesToScrollView()
        // 画像1枚を1ページとする設定
        scrollView.isPagingEnabled = true
        // スクロールビューをビューに追加
        view.addSubview(scrollView)
    }
    
    // 画像の追加処理を実装
    func addImagesToScrollView() {
        // 画像ファイル名の配列
        let imageNames = ["image1", "image2", "image3"]
        let scrollViewWidth = scrollView.frame.width
        let scrollViewHeight = scrollView.frame.height

        for (index, name) in imageNames.enumerated() {
            // ImageViewをインスタンス化
            let imageView = UIImageView(frame: CGRect(x: scrollViewWidth * CGFloat(index), y: 0, width: scrollViewWidth, height: scrollViewHeight))
            // 画像をインスタンス化
            imageView.image = UIImage(named: name)
            // 画像のアスペクト比を保持
            imageView.contentMode = .scaleAspectFit
            // 画像をScrollViewにサブビューとして追加
            scrollView.addSubview(imageView)
        }
        // コンテンツサイズを画像の数に応じて調整
        scrollView.contentSize = CGSize(width: scrollViewWidth * CGFloat(imageNames.count), height: scrollViewHeight)
    }
}

コードの説明:
🔸画面表示時にUIScrollViewの各設定を行います。(6-16行目)
🔸インスタンス化したUIScrollViewに画像を追加します。(9行目)
🔸画像追加はaddImagesToScrollView() メソッドとして定義しています。(19-37行目)
addImagesToScrollView() メソッド内では、画像ファイル名を配列で管理しています。これにより、追加する画像の数を柔軟に変更できます。(21行目)
🔸forループ構文を使用して、各画像に対してUIImageViewを生成し、UIScrollViewに追加しています。これにより、動的に画像ビューをスクロールビューに追加できます。(25-34行目)
🔸UIImageViewのframeを設定することで、スクロールビュー内での画像の位置とサイズを指定しています。    これにより、画像が横に並ぶように配置されます(27行目)
🔸scrollContentSizeのコンテンツサイズ(contentSize)を画像の数に応じて調整(36行目)
🔸ScrollView内の画像(UIImageView)1枚を1ページとして設定(13行目)

以上で実装は完了です!
ビルドして、スライド表示ができているか確認してみましょう。

【Swift】UIScrollViewを使って複数の画像を横にスクロールしてスライド表示する方法

まとめ

いかがでしたか?
この記事を通じて、Swift 5.9でUIScrollViewを使って画像を横にスライド表示する方法を学びました。この知識を活用することで、ユーザーにとって魅力的なスクロールビューを持つiOSアプリを開発することができます。
この記事が皆様の開発ライフの一助になれれば幸いです!

ふくしま

この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次