【徒然iOS】気ままにUIKit98〜Colloction View Controller 格子状に並んだセルをタップして画面遷移〜
概要
このマガジンは四十を過ぎたおっさんが、
を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。
今回
をハイ、レッツゴ🕺
前準備
念の為、
バックアップ
をいつも通りやってから本題へ💃
本題
コレクションビューコントローラーとは、
UICollectionView(以下、コレクションビュー)を管理するコントローラー
コレクションビューコントローラーは直下にコレクションビューが配置されている
👉コレクションビューコントローラーを使うと画面いっぱいにコレクションビューが表示
↓
画面全体で表示したい場合:コレクションビューコントローラ
画面全体で表示したくない場合:コレクションビュー
コレクションビューについては、
あたりでやって
⒈とりあえず、サンプルファイルからイメージをセット
でやったやり方を参考に、
⒉新規ビューを追記して、ナビゲーションバーとイメージを配置
⒊コレクションビューコントローラーを配置して、メニュー画面からのセグエを変更
⒋Identifierに名前をつけて、セルにImage Viewを配置後、ModeをAspect Fit、Tagを1に設定
⒌イメージにpin制約を付ける
⒍コレクションビューコントローラから最初に作ったビューをModalで繋ぎ、Identifierに名前を入力
⒎最初に作ったビュー用の新規クラスを作って適用し、それぞれのパーツを接続
⒏コード組み込み
//
// TestCollectionViewController.swift
//
import UIKit
class TestCollectionViewController: UICollectionViewController {
//最初からあるメソッド
override func viewDidLoad() {
super.viewDidLoad()
}
//データの個数を返すメソッド
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 7
}
//データを返すメソッド
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
//セルを取得し、イメージビューに画像を設定して返す。
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("TestCell", forIndexPath: indexPath)
let imageView = cell.contentView.viewWithTag(1) as! UIImageView
imageView.image = UIImage(named: "item" + String(indexPath.row) + ".png")
return cell
}
//セル選択時の呼び出しメソッド
override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
//セグエを実行する。
performSegueWithIdentifier("TestSegue", sender: nil)
}
//画面遷移実行前の呼び出しメソッド
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
//選択中のセルの画像を取得する。
let index = collectionView?.indexPathsForSelectedItems()?.first
let cell = collectionView?.cellForItemAtIndexPath(index!)
let imageView = cell!.viewWithTag(1) as! UIImageView
//遷移先のビューコントローラーを取得し、インスタンス変数に画像とテキストを設定する。
let controller:ViewController = (segue.destinationViewController as? ViewController)!
controller.testTitle = String(index!.row)
controller.testImage = imageView.image
}
}
//
// ViewController.swift
//
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var testNavBar: UINavigationBar!
@IBOutlet weak var testImageView: UIImageView!
var testTitle:String!
var testImage:UIImage!
override func viewDidLoad() {
super.viewDidLoad()
//タイトルと画像を設定する。
testNavBar.topItem!.title = testTitle
testImageView.image = testImage
}
//ボタン押下時の呼び出しメソッド
@IBAction func pushButton(sender: UIBarButtonItem) {
//モーダル表示されているビューコントローラーを解放する。
self.dismissViewControllerAnimated(true, completion:nil)
}
}
を参考に、書き換え〜〜〜〜
今回のコード
class CollectionStandardViewController: UIViewController {
@IBOutlet weak var myImageView: UIImageView!
@IBOutlet weak var myNavigationBar: UINavigationBar!
var myTitle:String!
var myImage:UIImage!
override func viewDidLoad() {
super.viewDidLoad()
//タイトルと画像を設定する。
myNavigationBar.topItem!.title = myTitle
myImageView.image = myImage
}
//ボタン押下時の呼び出しメソッド
@IBAction func myBarButton(_ sender: UIBarButtonItem) {
//モーダル表示されているビューコントローラーを解放する。
self.dismiss(animated: true, completion:nil)
}
}
class MyCollectionStandardViewController: UICollectionViewController {
//最初からあるメソッド
override func viewDidLoad() {
super.viewDidLoad()
}
//データの個数を返すメソッド
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 7
}
//データを返すメソッド
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
//セルを取得し、イメージビューに画像を設定して返す。
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCollectionCell", for: indexPath as IndexPath)
let imageView = cell.contentView.viewWithTag(1) as! UIImageView
imageView.image = UIImage(named: "item" + String(indexPath.row) + ".png")
return cell
}
//セル選択時の呼び出しメソッド
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
//セグエを実行する。
performSegue(withIdentifier: "MySegue", sender: nil)
}
//画面遷移実行前の呼び出しメソッド
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
//選択中のセルの画像を取得する。
let index = collectionView?.indexPathsForSelectedItems?.first
let cell = collectionView?.cellForItem(at: index!)
let imageView = cell!.viewWithTag(1) as! UIImageView
//遷移先のビューコントローラーを取得し、インスタンス変数に画像とテキストを設定する。
let controller: CollectionStandardViewController = (segue.destination as? CollectionStandardViewController)!
controller.myTitle = String(index!.row)
controller.myImage = imageView.image
}
}
⒐コレクションビューにクラスを適用して、シミュレータで実行
ハイ、サイト記事の操作に関しては以上🕺
ブラッシュアップ
とりあえず、AutoLayout〜〜〜
後は、
でやった恒例の🌐ボタンを追加して、この記事が公開後に見れるようにしとく〜〜〜
記事公開後、
うーむ🤔
2枚目を選んでるのに、タイトルの数字が-1で表示されるのは、ユーザーさんが戸惑うかもしれないので
全体のコードをこっちに変更
今回のコード(まとめ)
class CollectionStandardViewController: UIViewController {
@IBOutlet weak var myImageView: UIImageView!
@IBOutlet weak var myNavigationBar: UINavigationBar!
var myTitle:String!
var myImage:UIImage!
override func viewDidLoad() {
super.viewDidLoad()
//タイトルと画像を設定する。
myNavigationBar.topItem!.title = myTitle
myImageView.image = myImage
}
//ボタン押下時の呼び出しメソッド
@IBAction func myBarButton(_ sender: UIBarButtonItem) {
//モーダル表示されているビューコントローラーを解放する。
self.dismiss(animated: true, completion:nil)
}
}
class MyCollectionStandardViewController: UICollectionViewController {
//最初からあるメソッド
override func viewDidLoad() {
super.viewDidLoad()
}
//データの個数を返すメソッド
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 7
}
//データを返すメソッド
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
//セルを取得し、イメージビューに画像を設定して返す。
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCollectionCell", for: indexPath as IndexPath)
let imageView = cell.contentView.viewWithTag(1) as! UIImageView
imageView.image = UIImage(named: "item" + String(indexPath.row) + ".png")
return cell
}
//セル選択時の呼び出しメソッド
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
//セグエを実行する。
performSegue(withIdentifier: "MySegue", sender: nil)
}
//画面遷移実行前の呼び出しメソッド
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
//選択中のセルの画像を取得する。
let index = collectionView?.indexPathsForSelectedItems?.first
let cell = collectionView?.cellForItem(at: index!)
let imageView = cell!.viewWithTag(1) as! UIImageView
//遷移先のビューコントローラーを取得し、インスタンス変数に画像とテキストを設定する。
let controller: CollectionStandardViewController = (segue.destination as? CollectionStandardViewController)!
controller.myTitle = String(index!.row + 1) //ココに1を足した
controller.myImage = imageView.image
}
@IBAction func webButton(_ sender: Any) {
let url = URL(string: myCollectionStandardViewController)
let safariView = SFSafariViewController(url: url!)
present(safariView, animated: true)
}
}
今回のポイント
配列なんかで、プログラミング言語によっては、0から始まるので、
1項目は0は常識
と思って、こういうところに配慮しない人も多いんだけど、
ユーザーさんなんてほとんどプログラミング言語なんて知らないし、逆に知ってる人だと、
こいつ、デザイン知らないな
と、心の中でツッコんでるので、
ただ、動けばいいではなくて、
こういうところにも配慮してあげてね〜〜〜。
デザインもプログラミングも結局は、
思いやり
Apple公式
さて、次回は
をレッツゴする🕺
この記事が気に入ったらサポートをしてみませんか?