UICollectionViewを実装する[swift&xcode6]

今回やること

swift&xcode6という最新っぽい環境でUICollectionViewを実装します。

ゴールはこんな感じです。

タイル状に画像を並べ、並んだ画像をタップすると画像の詳細画面に移動するというものです。
また移動後は画面上部のBackから元の一覧に戻ることが出来ます。

作り方は、こちらの動画を参考にさせていただきました。

UICollectionView. Swift, Xcode 6 - YouTube

手順

ストーリーボードで

• Navigation Controller で 画面上部の < Backを作成
• UICollectionView でタイル表示を作成
• 詳細画面の作成
• タイルと詳細画面をリンク

プログラム側で

• UICollectionViewとControllerのヒモ付
• タイル表示のタイルとUICollectionViewCellのヒモ付
• 詳細画面とControllerのヒモ付

実装

最初はやること全部書こうかと思ったんですが、
上の動画が素晴らしすぎる＆ストーリーボードの説明しんどいので、
コードだけ載せて置きます。

基本的に動画を見ていただければということで。

一枚目のタイル表示のViewController

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

    var arr:[String] = []
    var name: AnyObject? {
        get {
            return NSUserDefaults.standardUserDefaults().objectForKey("name")
        }
        set {
            NSUserDefaults.standardUserDefaults().setObject(newValue!, forKey: "name")
            NSUserDefaults.standardUserDefaults().synchronize()
        }
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        for (var i = 1; i <= 30; i++) {
            arr.append(String(i) + ".jpeg")
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return arr.count
    }

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        var cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as myViewCell
        cell.imgView.image = UIImage(named: arr[indexPath.row])
        return cell
    }
    
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        name = arr[indexPath.row]
    }
}

UICollectionViewを使うために、UICollectionViewDataSource, UICollectionViewDelegateを継承しています。

今回のサンプルでは値の受け渡しにuserDefaultを利用しています。
処理の内容としては、arrに画像のパスを格納、

CollectionViewのCellそれぞれに画像を詰めていきます。

そしてタイルが選択された場合は、nameというキーでuserDefaultに選ばれた画像パスを渡しています。

2枚目の詳細画面のViewController

import UIKit

class SecondViewController: UIViewController {

    @IBOutlet weak var newImgView: UIImageView!
    var name: AnyObject? {
        get {
            return NSUserDefaults.standardUserDefaults().objectForKey("name")
        }
    }
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        newImgView.image = UIImage(named: name as String)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    

    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}

一枚目のViewControllerでuserDefaultに保存した画像パスを取り出して、UIImageを作って表示しています。

最後にCollectionViewのセル(タイル)のコード

import UIKit

class myViewCell: UICollectionViewCell {
    
    @IBOutlet weak var imgView: UIImageView!
}

InterfaceBuilderで貼り付けただけですが。