[Swift 3]コードで実装したTableViewのCellをCustomCellにする
2016-12-29 | カテゴリ >> Swift


 

プログラムで追加実装したUITableViewのCellのデザインを自在に変更したいと思って、カスタムセルにしたかったのですが、やり方を検索すると毎回ストーリーボードで追加したTableViewのやり方が出て来るのでハマりました。

最終的にこの記事の方法が一番参考になり、実装する事ができました。
一部、CGRectZeroなどのSwift2までの部分はSwift3に変更しました。

カスタムセルで実装することで、左側に写真を置いたとしてもマージンなどが自由自在となります。

学んだポイントとしては、class MyCell: UITableViewCell で自由にCellを実装しますが
TableView.register(MyCell.self, forCellReuseIdentifier: NSStringFromClass(MyCell.self)) メソッドでTableView側に紐付ける必要があります。

また、CellForRow atIndexPathの方でも
let cell = tableView.dequeueReusableCell(withIdentifier: NSStringFromClass(MyCell.self), for: indexPath) as! MyCell
として、カスタムセルを呼んであげると良いようです。

適度に高さを高くして、画像を大きくしたサンプルが以下

コードは以下

import UIKit

class MyTableViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let myTableView = UITableView(frame: view.frame, style: .plain)
        myTableView.rowHeight = 70
        myTableView.delegate      =   self
        myTableView.dataSource    =   self
        myTableView.register(MyCell.self, forCellReuseIdentifier: NSStringFromClass(MyCell.self))
        self.view.addSubview(myTableView)

    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 4
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: NSStringFromClass(MyCell.self), for: indexPath) as! MyCell
        cell.myLabel.text = "まぐろ"
        return cell
    }
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return 2
    }
    
    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return "Sample"
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        hogehoge
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()

    }
}

class MyCell: UITableViewCell {
    var myLabel: UILabel!
    var myImage: UIImage!
    var myImageView: UIImageView!
    
    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        myLabel = UILabel(frame: CGRect.zero)
        myLabel.textAlignment = .left
        contentView.addSubview(myLabel)
        
        myImage = UIImage(named: "maguro.jpg")
        myImageView = UIImageView(image: myImage)
        contentView.addSubview(myImageView)
    }
    
    required init(coder aDecoder: NSCoder) {
        fatalError("init(coder: ) has not been implemented")
    }
    
    override func prepareForReuse() {
        super.prepareForReuse()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        myLabel.frame = CGRect(x: 110, y: 0, width: frame.width - 100, height: frame.height)
        myImageView.frame = CGRect(x: 0, y: 0, width: 100, height: frame.height)
    }
    
}

カスタムセルの高さを変更する

ちなみに、上記リンク先ではCellの高さ自体は変更していなかったので、こちらもどうやるのか謎だったのですが
TableView.rowHeight = XX
と、実装するとセルの高さが変更できるのですね。

もともとカスタムセルのFrame側で変更するのかなと想像していたため
自作TableViewCellクラス側で
frame.height = 70 とかやってみたところ
Cannot assign to property: ‘height’ is a get-only property
と怒られて頭を抱えていました。

おわり

 

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
2016-12-29 | カテゴリ >> Swift 

関連記事

Comment





Comment



*