サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<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最高ですね！

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

シェア

関連する求人

関連する記事