SwiftでCustomCellを作って画像付きリスト表示

最近Swiftを書き始めました．カスタムクラスとか作って見たらちょっとは深められるんじゃねってことで，巷で話題の（？）CustomCellを作ってみました．結果的にはSwiftというよりAuto Layoutでハマってしまいましたが．．．一応メモを残しておきます．

# 完成イメージ
![iOS Simulator Screen Shot Jan 10, 2015, 16.27.30.png](https://qiita-image-store.s3.amazonaws.com/0/46036/81365120-1157-dad8-2e78-057368b9f8b6.png)


# Storyboard
まずStoryboardで概形を作ります．使うのはTableViewとTableViewCellですね．このTableViewCellのClassがデフォルトではUITableViewCellになっていますが，最終的にはCustomCellというカスタムクラスに変更します．さらに，Cellの中にUIImageViewとLabelを配置します．
![Screen Shot 2015-01-07 at 16.02.22.png](https://qiita-image-store.s3.amazonaws.com/0/46036/4aee6327-6a6e-395b-4f89-d6e8a71eb694.png)

# Model
Cellの持つ情報のModelを作ります．
まずFile > new > File... から新しいSwift Fileを作成します．
それぞれのcellに渡すべき情報を持ってるだけのModelなんで中身はなんでもいいんですが，今回はNameとImageUrlをPropertyとしておきました．

```swift
import Foundation

class Friend : NSObject {
    var name:NSString
    var imageUrl:NSURL?
    
    init(name: String, imageUrl: NSURL?){
        self.name = name
        self.imageUrl = imageUrl
    }
}
```

# CustomCell
CustomCellのクラスを作成します．新しいCocoa Classから，UITableViewCellのSubclassとしてCustomCellというクラスを作成しました．StoryboardからLabelとUIImageViewを結びつける必要があります．


```swift
import UIKit

class CustomCell: UITableViewCell {
    
    @IBOutlet weak var name: UILabel!
    @IBOutlet weak var iconImage: UIImageView!

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

    func setCell(friend :Friend) {
        self.name.text = friend.name
        var err: NSError?
        var imageData :NSData = NSData(contentsOfURL: friend.imageUrl!,options: NSDataReadingOptions.DataReadingMappedIfSafe, error: &err)!
        self.iconImage.image = UIImage(data:imageData)
    }
}

```

# ViewController
適当にダミーのデータをCustomCellに追加しました．StoryboardからTableViewを結びつける必要があります．

```swift
import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{

    @IBOutlet weak var tableView: UITableView!

    var friends:[Friend] = [Friend]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        self.setupFriends()
        
        self.tableView.delegate = self
        self.tableView.dataSource = self
    }

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

    func setupFriends() {
        var f1 = Friend(name: "Ken", imageUrl: NSURL(string: "http://waka111.com/wp-content/uploads/2014/08/watanabek.jpg"))
        var f2 = Friend(name: "Erika", imageUrl: NSURL(string: "http://dqaeric34olch.cloudfront.net/lists/57514/sawajirierika1.jpg/original?1416322567"))
        var f3 = Friend(name: "Anna", imageUrl: NSURL(string: "http://cdnvideo.dolimg.com/cdn_assets/b5da8e4c0046a83b81dbd945719f6b354edd764b.jpg"))
        
        friends.append(f1)
        friends.append(f2)
        friends.append(f3)
    }
    

    // functions needed to be implemented
    // for table view

    // セクション数
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }
    
    // セクションの行数
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return friends.count
    }
    


    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath:NSIndexPath) -> UITableViewCell {

        let cell: CustomCell = tableView.dequeueReusableCellWithIdentifier("CustomCell", forIndexPath: indexPath) as CustomCell
        
        println(cell)

        cell.setCell(friends[indexPath.row])
        
        return cell
    }
    

}
```
# Auto Layout
Auto Layoutに関しては全然理解しておらず，画像のサイズ調整がよくわからなかったです．．．どこ見ればわかるんだろ．．．とりあえず，Intrinsic SizeをDefault(System Defined) ->PlaceholderにしてClip Subview（Overflow: hidden的な？）にチェックを入れたらいい感じになりました．

![Screen Shot 2015-01-10 at 16.38.45.png](https://qiita-image-store.s3.amazonaws.com/0/46036/4a19bad3-4c16-a8e5-2288-0305d8717f3a.png)

![Screen Shot 2015-01-10 at 16.37.58.png](https://qiita-image-store.s3.amazonaws.com/0/46036/4c6d91ec-248e-febf-834d-4063fa027dca.png)

# Source Code
GithubでSource Codeを公開しておきました．
https://github.com/seataK/CustomCellTutorial


# 参考
- [Xcode 6.0 - Custom Cell for TableView - Swift](https://www.youtube.com/watch?v=JG_AMY_gSDQ)
- [SwiftでUIViewController+UITableView+カスタムセル+カスタムモデルやってみた](http://blog.morizotter.com/2014/06/09/swift-uiviewcontroller-uitableview-customcell/)
- [SwiftでUIViewController+UITableView+CustomCell+Model](http://qiita.com/SnowHideJP/items/b24e22075fe63b436b10)
- [Storyboard + Auto Layout でカスタムセルの Table View を作ったときのメモ](http://qiita.com/suzukihr/items/4b14c972f5b93f7e3485)