はじめに
iOSアプリの中でスライドショーを作る必要があって、かつフリックではなくボタンで前後にスライドするという要件。意外にそのものが見当たらなかったので、備忘録として。
実行環境
- Xcode 13.4.1
- macOS Monterey（12.1）
前提
- 基本は最後に書いたリンクに詳しいので、そちらを見てもらう前提で（備忘録なので）。
- スライドショーで使う画像のサイズが、表示エリアに対して大きいサイズだったので、SliderCollectionViewCell.swiftの中の「func resize(image: UIImage, width: Double) -> UIImage」でサイズ調整しています（本題とは無関係なので、不要な方は無視していいです）。
実装内容
-
レイアウトはstoryboardを使ってます。パーツの構成はこんな感じ。
-
「@IBOutlet weak var」してないボタン（storyboard上は「Button」で表示されているもの）は、このControllerへの画面遷移用なので、無視してください。
-
今回はフリックさせないので、Collection ViewのScroll View＞Scrollingのチェックはいらないです（下記の画像参照）。
-
最初に動かしたときに下記のエラーが発生。
Exception NSException * "could not dequeue a view of kind: UICollectionElementKindCell with identifier SliderCollectionViewCell - must register a nib or a class for the identifier or connect a prototype cell in a storyboard" 0x0000600002b6a3d0
「SliderCollectionViewCell」が登録されてないって怒られてるんですが、storyboard上でSliderCollectionViewCellのidentifierを設定していなかったというミス。storyboard上でSliderCollectionViewCellを選択して、下記のようにパネルで設定してOK。
・スライドさせるimageViewの間に隙間ができてしまった（今回は隙間なく繋げてスライドしたかった）。storyboard上でCollection Viewを選択して、下記のようにパネルの「Min Spacing」を両方「0」にすることで解決。
完成
出来上がったのがこちら。storyboardのパーツ構成と、@IBOutlet、@IBActionの紐付けが間違ってなければ、これで動作します。
・こちらがController
SlideViewController.swift
import UIKit
class SlideViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
@IBOutlet weak var collectionView: UICollectionView!
@IBOutlet weak var currentPageLabel: UILabel!
@IBOutlet weak var btnPrev: UIButton!
@IBOutlet weak var btnNext: UIButton!
let imageArr = [
UIImage(named: "d04_01.png")!,
UIImage(named: "d04_02.png")!,
UIImage(named: "d04_03.png")!,
UIImage(named: "d04_04.png")!
]
var currentIndex = 0
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
collectionView.delegate = self
collectionView.dataSource = self
// ページ数：表示制御
showPageInfo()
}
// 前の画面に戻るためのボタンなので、この記事とは無関係なのでなくてOKです。
@IBAction func tapBack(_ sender: Any) {
self.dismiss(animated: false, completion: nil)
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return imageArr.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "SliderCollectionViewCell", for: indexPath) as! SliderCollectionViewCell
cell.image = imageArr[indexPath.item]
return cell
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.frame.width, height: collectionView.frame.height)
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
// ページ数：表示制御
showPageInfo()
}
// 前のページへ
@IBAction func tapPrev(_ sender: UIButton) {
changeSlidePage(-1)
}
// 次のページへ
@IBAction func tapNext(_ sender: UIButton) {
changeSlidePage(1)
}
// ページ切り替え
func changeSlidePage(_ addPage:Int){
var scrollPosition = 0
if (addPage < 0){
// 前へ（index:0 が下限）
scrollPosition = (currentIndex > 0) ? currentIndex - 1 : 0
} else {
// 次へ（index:imageArr.count - 1 が上限）
scrollPosition = (currentIndex < imageArr.count - 1) ? currentIndex + 1 : imageArr.count - 1
}
// ページを切り替える
collectionView!.scrollToItem(at: IndexPath(item: scrollPosition, section: 0), at: .right, animated: true)
// ページ：現在位置をセット
currentIndex = scrollPosition
}
// ページ数：表示制御
func showPageInfo(){
// ページ数：表示
currentPageLabel.text = String(currentIndex+1) + "/" + String(imageArr.count)
// ボタンの表示制御
if (currentIndex == 0){
btnPrev.isHidden = true
} else if (currentIndex == (imageArr.count - 1)){
btnNext.isHidden = true
} else {
btnPrev.isHidden = false
btnNext.isHidden = false
}
}
}
・こちらがCollectionViewのCell用のクラス
SliderCollectionViewCell.swift
import UIKit
class SliderCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var imageView: UIImageView!
var image: UIImage! {
didSet {
imageView.image = resize(image: image, width: image.size.width*0.5)
imageView.contentMode = .scaleAspectFit
}
}
// imageが大きい場合のリサイズ用関数
func resize(image: UIImage, width: Double) -> UIImage {
// オリジナル画像のサイズからアスペクト比を計算
let aspectScale = image.size.height / image.size.width
// widthからアスペクト比を元にリサイズ後のサイズを取得
let resizedSize = CGSize(width: width, height: width * Double(aspectScale))
// リサイズ後のUIImageを生成して返却
UIGraphicsBeginImageContext(resizedSize)
image.draw(in: CGRect(x: 0, y: 0, width: resizedSize.width, height: resizedSize.height))
let resizedImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return resizedImage!
}
}
まとめ
駆け足ですが、ざっとまとめました。前の投稿から2年以上空いてました...(^^;
もうちょっとマメに書きたいところです。
以下の記事が参考になりました。ありがとうございます。