<h2>はじめに</h2>

DMMグループ Advent Calendar 2023 の5日目を担当する柳元(<a href="https://twitter.com/toshi_ios_jp" target="_blank">@toshi_ios_jp</a>)です。現在、私はプラットフォーム事業部 DMM Pointclub アプリチームでiOSエンジニアをしています。

業務の中で、複数行カルーセルを作る必要がありました。SwiftUIを用いれば少ないコードで簡単に実装することができます。本記事では、その実装の流れを説明していきたいと思います。

<h2>最終的に実装するもの</h2>

<img alt="" height="704" src="https://image.dmm-corp.com/sbc2hk8ptttz6ko4pc3cdtljlcnt" width="350" />

仕様：

<ul>
	<li>複数行のカルーセル</li>
	<li>ドラッグジェスチャーで横スクロールできる</li>
	<li>時間経過で自動で横スクロールする（自動スクロール無しの設定も可能）</li>
</ul>

<h2>1行のカルーセル</h2>

まず、複数行のカルーセルを実装するにあたり、1行のカルーセル実装を行なっていきます。

<img alt="" height="698" src="https://image.dmm-corp.com/00nyuo1w528bww8rsox9yj06gjmp" width="350" />

SingleRowCarouselのパラメータの配列 items にカルーセルに表示したいデータを入れます。Spacingは上図の部分を指し、カスタマイズできるようにします。

1行のカルーセル実装：

<pre>
<code>import SwiftUI

public struct SingleRowCarousel&lt;Content: View, T: Identifiable&gt;: View {
    private let content: (T) -&gt; Content
    private let items: [T]
    private let horizontalSpacing: CGFloat
    private let trailingSpacing: CGFloat

    @Binding private var index: Int
    @GestureState private var dragOffset: CGFloat = 0

    public var body: some View {
        GeometryReader { proxy in
            let pageWidth = (proxy.size.width - (trailingSpacing + horizontalSpacing))
            let currentOffset = dragOffset - (CGFloat(index) * pageWidth)
            
            LazyHStack(alignment: .top, spacing: 0) {
                ForEach(items) { item in
                    content(item)
                        .frame(width: pageWidth, alignment: .leading)
                }
            }
            .padding(.horizontal, horizontalSpacing)
            .offset(x: currentOffset)
            .gesture(
                DragGesture()
                    .updating($dragOffset) { value, state, _ in
                        if (index == 0 &amp;&amp; value.translation.width &gt; 0) || (index == items.count - 1 &amp;&amp; value.translation.width &lt; 0) {
                            state = value.translation.width / 4
                        } else {
                            state = value.translation.width
                        }
                    }
                    .onEnded { value in
                        let dragThreshold = pageWidth / 20
                        if value.translation.width &gt; dragThreshold {
                            index -= 1
                        }
                        if value.translation.width &lt; -dragThreshold {
                            index += 1
                        }
                        index = max(min(index, items.count - 1), 0)
                    }
            )
            .animation(.default, value: dragOffset == 0)
        }
    }

    public init(items: [T], horizontalSpacing: CGFloat, trailingSpacing: CGFloat, index: Binding&lt;Int&gt;, content: @escaping (T) -&gt; Content) {
        self.content = content
        self.items = items
        self.horizontalSpacing = horizontalSpacing
        self.trailingSpacing = trailingSpacing
        self._index = index
    }
}</code></pre>

呼び出し側の実装例：

<pre>
<code>import SwiftUI

struct CarouselItem: Identifiable {
    let id = UUID()
    let value: Int
}

struct ContentView: View {
    @State var currentIndex = 0
    let items = [CarouselItem(value: 1), CarouselItem(value: 2), CarouselItem(value: 3)]
    
    var body: some View {
        SingleRowCarousel(
            items: items,
            horizontalSpacing: 20,
            trailingSpacing: 40,
            index: $currentIndex)
        { item in
            Text("\(item.value)")
                .frame(width: 300, height: 80)
                .background(Color.blue)
        }
        .frame(height: 80)
    }
}

#Preview {
    ContentView()
}</code></pre>

上記のSingleRowCarouselは汎用的に用いることができるように、ジェネリクス&lt;Content: View, T: Identifiable&gt;を使用しています。 
Contentはカルーセルの各アイテムのViewを定義し、Tは表示すべき各アイテムのデータを表しています。Identifiableプロトコルに準拠した型にすることで、各アイテムに一意のIDを提供し、Viewを一意に識別することが可能となります。

indexは、現在のページのインデックス（表示中のアイテム）を保持します。

dragOffsetは、ユーザーが行っているドラッグ操作の現在のオフセットを保持します。

DragGestureを使用して、ユーザーのドラッグ操作を監視します。.updatingでdragOffsetの更新を行っています。ページの先頭・末尾でスクロールできない場合は、ドラッグの移動量を小さくすることでスクロールできないことを表現しています。

.onEndedでドラッグが終了したときの処理を記述します。スクロールのしやすさをdragThresholdで制御し、ドラッグの移動量が閾値を超えていた場合にページの切り替えを行います。

また、.animationを用いて、ユーザーがドラッグを終えた時にページの切り替えがアニメーションで行われるようにしています。

<h2>複数行のカルーセル</h2>

次に、上記の1行のカルーセルを複数行のカルーセルに書き換えていきます。パラメータとしてgroupSize, verticalSpacingを追加しています。

<img alt="" height="702" src="https://image.dmm-corp.com/0gys47b6bl0x61zja1y8yxwkojr2" width="350" />

複数行のカルーセル実装：

<pre>
<code>import SwiftUI

public struct MultiRowsCarousel&lt;Content: View, T: Identifiable&gt;: View {
    private let content: (T) -&gt; Content
    private let items: [T]
    private let groupSize: Int // 追加
    private let horizontalSpacing: CGFloat
    private let verticalSpacing: CGFloat // 追加
    private let trailingSpacing: CGFloat
    
    private var chunkedItems: [[T]] // 追加

    @Binding private var index: Int
    @GestureState private var dragOffset: CGFloat = 0

    public var body: some View {
        GeometryReader { proxy in
            let pageWidth = (proxy.size.width - (trailingSpacing + horizontalSpacing))
            let currentOffset = dragOffset - (CGFloat(index) * pageWidth)
            
            LazyHStack(alignment: .top, spacing: 0) {
                ForEach(chunkedItems.indices, id: \.self) { index in
                    LazyVStack(alignment: .leading, spacing: verticalSpacing) {
                        ForEach(chunkedItems[index]) { item in
                            content(item)
                        }
                    }
                    .frame(width: pageWidth)
                }
            }
            .padding(.horizontal, horizontalSpacing)
            .offset(x: currentOffset)
            .gesture(
                DragGesture()
                    .updating($dragOffset) { value, state, _ in
                        if (index == 0 &amp;&amp; value.translation.width &gt; 0) || (index == chunkedItems.count - 1 &amp;&amp; value.translation.width &lt; 0) {
                            state = value.translation.width / 4
                        } else {
                            state = value.translation.width
                        }
                    }
                    .onEnded { value in
                        let dragThreshold = pageWidth / 20
                        if value.translation.width &gt; dragThreshold {
                            index -= 1
                        }
                        if value.translation.width &lt; -dragThreshold {
                            index += 1
                        }
                        index = max(min(index, chunkedItems.count - 1), 0)
                    }
            )
            .animation(.default, value: dragOffset == 0)
        }
    }

    public init(items: [T], groupSize: Int, horizontalSpacing: CGFloat, verticalSpacing: CGFloat, trailingSpacing: CGFloat, index: Binding&lt;Int&gt;, content: @escaping (T) -&gt; Content) {
        self.content = content
        self.items = items
        self.groupSize = groupSize
        self.horizontalSpacing = horizontalSpacing
        self.verticalSpacing = verticalSpacing
        self.trailingSpacing = trailingSpacing
        self._index = index
        
        self.chunkedItems = stride(from: 0, to: items.count, by: groupSize).map {
            Array(items[$0 ..&lt; min($0 + groupSize, items.count)])
        }
    }
}</code></pre>

MultiRowsCarouselでは、パラメータとしてverticalSpacing, groupSizeを追加し、変数としてchunkedItemsを追加しています。

<ul>
	<li>groupSize: 一つのページに表示するアイテムの数(＝行数)</li>
	<li>verticalSpacing: これは各アイテム間の垂直方向のスペース</li>
	<li>chunkedItems: itemsを所定のgroupSizeごとに分割した2次元配列</li>
</ul>

chunkedItemsの値はitems, groupSizeの値によって決まり、例として次のようになります。

<pre>
<code>import Foundation

let items = Array(1...9)

let groupSize = 3

let chunkedItems = stride(from: 0, to: items.count, by: groupSize).map {
    Array(items[$0 ..&lt; min($0 + groupSize, items.count)])
}

// chunkedItemsの値
//[
//    [1, 2, 3],
//    [4, 5, 6],
//    [7, 8, 9]
//]</code></pre>

MultiRowsCarouselでは、chunkedItems.indicesに対してForEachループを追加し、各ページに対する縦のStackを作成しています。この内部にもう一つForEachループがあり、それでは各ページ内のアイテムを表示しています。これで、複数行のカルーセルを作ることができました！

<h2>自動スクロール機能付きの複数行カルーセル</h2>

最後に自動スクロール機能を追加します。

自動スクロール機能付きの複数行カルーセルの実装：

<pre>
<code>import SwiftUI
import Combine

public enum AutoScrollStatus {
    case inactive
    case active(TimeInterval)
}

public struct MultiRowsCarousel&lt;Content: View, T: Identifiable&gt;: View {
    private let content: (T) -&gt; Content
    private let items: [T]
    private let groupSize: Int
    private let horizontalSpacing: CGFloat
    private let verticalSpacing: CGFloat
    private let trailingSpacing: CGFloat
    private let autoScroll: AutoScrollStatus // 追加
    
    private var chunkedItems: [[T]]
    private var timer: Timer.TimerPublisher? { // 追加
        switch autoScroll {
        case .active(let timeInterval):
            return Timer.publish(every: timeInterval, on: .main, in: .common)
        case .inactive:
            return nil
        }
    }

    @Binding private var index: Int
    @GestureState private var dragOffset: CGFloat = 0
    
    @State private var isTimerActive = true // 追加
    @State private var cancellable: AnyCancellable? // 追加

    public var body: some View {
        GeometryReader { proxy in
            let pageWidth = (proxy.size.width - (trailingSpacing + horizontalSpacing))
            let currentOffset = dragOffset - (CGFloat(index) * pageWidth)
            
            LazyHStack(alignment: .top, spacing: 0) {
                ForEach(chunkedItems.indices, id: \.self) { index in
                    LazyVStack(alignment: .leading, spacing: verticalSpacing) {
                        ForEach(chunkedItems[index]) { item in
                            content(item)
                        }
                    }
                    .frame(width: pageWidth)
                }
            }
            .padding(.horizontal, horizontalSpacing)
            .offset(x: currentOffset)
            .gesture(
                DragGesture()
                    .onChanged { _ in
                        isTimerActive = false
                    }
                    .updating($dragOffset) { value, state, _ in
                        if (index == 0 &amp;&amp; value.translation.width &gt; 0) || (index == chunkedItems.count - 1 &amp;&amp; value.translation.width &lt; 0) {
                            state = value.translation.width / 4
                        } else {
                            state = value.translation.width
                        }
                    }
                    .onEnded { value in
                        isTimerActive = true
                        let dragThreshold = pageWidth / 20
                        if value.translation.width &gt; dragThreshold {
                            index -= 1
                        }
                        if value.translation.width &lt; -dragThreshold {
                            index += 1
                        }
                        index = max(min(index, chunkedItems.count - 1), 0)
                    }
            )
            .animation(.default, value: dragOffset == 0)
            .onAppear {
                cancellable = timer?
                    .autoconnect()
                    .sink { _ in

                        guard isTimerActive else {
                            return
                        }

                        withAnimation {
                            if self.index &gt;= chunkedItems.count - 1 {
                                self.index = 0
                            } else {
                                self.index += 1
                            }
                        }
                    }
            }
            .onDisappear {
                cancellable?.cancel()
                cancellable = nil
            }
        }
    }

    public init(items: [T], groupSize: Int, horizontalSpacing: CGFloat, verticalSpacing: CGFloat, trailingSpacing: CGFloat, autoScroll: AutoScrollStatus, index: Binding&lt;Int&gt;, content: @escaping (T) -&gt; Content) {
        self.content = content
        self.items = items
        self.groupSize = groupSize
        self.horizontalSpacing = horizontalSpacing
        self.verticalSpacing = verticalSpacing
        self.trailingSpacing = trailingSpacing
        self.autoScroll = autoScroll
        self._index = index
        
        self.chunkedItems = stride(from: 0, to: items.count, by: groupSize).map {
            Array(items[$0 ..&lt; min($0 + groupSize, items.count)])
        }
    }
}</code></pre>

呼び出し側の実装例：

<pre>
<code>import SwiftUI

struct CarouselItem: Identifiable {
    let id = UUID()
    let value: Int
}

struct ContentView: View {
    @State var currentIndex = 0
    let items = [
        CarouselItem(value: 1), CarouselItem(value: 2), CarouselItem(value: 3),
        CarouselItem(value: 4), CarouselItem(value: 5), CarouselItem(value: 6),
        CarouselItem(value: 7), CarouselItem(value: 8), CarouselItem(value: 9),
    ]
    
    let groupSize = 3
    
    var body: some View {
            MultiRowsCarousel(
                items: items,
                groupSize: 3,
                horizontalSpacing: 20,
                verticalSpacing: 20,
                trailingSpacing: 40,
                autoScroll: .active(3),
                index: $currentIndex)
            { item in
                Text("\(item.value)")
                    .frame(width: 300, height: 80)
                    .background(Color.blue)
            }
            .frame(height: 280)
    }
}</code></pre>

自動スクロール機能付きのMultiRowsCarouselでは、autoScroll, timer, isTimerActive, cancellable が追加されています。

autoScrollプロパティはAutoScrollStatus型の値を保持します。AutoScrollStatus型は自動スクロールの状態を表すenumで、自動スクロールが非活性（.inactive）か、あるいは一定の時間間隔で活性（.active(TimeInterval)）であるかを表します。

timerは、autoScrollの状態に基づき、一定の時間間隔でTickを出力するタイマーを作成します。タイマーはTimer.TimerPublisher型で、Combineフレームワークを使用しています。

isTimerActiveはタイマーが動作中かどうかフラグです。ユーザーがドラッグを行っている間（DragGesture().onChanged）でタイマーを一時停止し、ドラッグが終了した時（DragGesture().onEnded）にタイマーを再開します。

cancellableは、タイマーのpublisherの購読を管理します。onAppear時にタイマーの購読を開始し、onDisappear時に購読をキャンセルします。

以上で、自動スクロール機能付きの複数行カルーセルが完成しました！

<h2>まとめ</h2>

このようにSwiftUIで自動スクロール機能付きのカルーセルは簡単に実装することができます。SwiftUI最高ですね！

DMMポイントクラブ

アドベントカレンダー2023

SwiftUIで作る複数行カルーセル

facebook

twitter

DMM TV

DMMブックス

DMM pictures

DMM GAMES

DMMオンクレ

DMMスクラッチ

DMMくじ

DMMオンラインサロン

DMMいろいろレンタル

DMM DVD／CDレンタル

DMM通販

DMMオンラインクリニック

デジタルコミック事業

DMMチャットブースト

DMM英会話

DMMかりゆし水族館

ベルリング

ハッシャダイソーシャル

ヤンキーインターン

シント=トロイデンVV

DMM地方創生

DMM.make AKIBA

DMM.make 3Dプリント

Seamoon Protcol by DM2C Studio

ONE DAY DESIGN

DMM WEBCAMP

DMMぱちタウン

DMM競輪

Algoage

DMM EV CHARGE

社会課題

エンターテインメント

動画

電子書籍

アニメ

ゲーム

アプリゲーム

コミュニティ

オンラインサロン

PCゲーム

オンラインイベント

ビジネスソリューション

教育

英会話

水族館

救急車両

消防車両

モノづくり施設

サッカー

スポーツ

地方創生

Web3

研究開発

アプリ

ブロックチェーン

プラットフォーム

横断開発

インフラ

アミューズメント

同人

サーバサイド

バックエンド

フロントエンド

ネットワーク

セキュリティ

配信基盤

ペイメント

Android

データベース

ビッグデータ

フルスタック

データ分析

機械学習

プロトタイピング

グラフィックデザイン

3DCG

モーショングラフィック

プロダクトデザイン

コピーライティング

サービスデザイン

コンテンツ管理・制作

ブランディング

マーケティング

企画

編集

営業

プロモーション

SwiftUIで作る複数行カルーセル

シェア

一緒に働く仲間を募集しています！

関連する記事

関連する求人