恒例になっているTwitterのタイムライン風の画面を作ってみるw

001

新規にプロジェクトを作成して、ストーリボードを開いてテーブルビューをはっ付けておく。
貼ったテーブルビューにTable View Cellをドラッグ&ドロップする。
貼ったテーブルビューセルのアトリビュート・インスペクターでIdentifierにcustomcellと入力する。

003

テーブルビューセルに部品を配置する。
ユーザーアイコンにあたるImageViewを貼って、制約を次のように設定する。Content ModeをAspect Fitにする。

004

Labelを貼って、制約を次のように設定する。フォントサイズを20にする。

005

TextViewを貼って、制約を次のように設定する。Scrolling Enabled、Editableのチェックを外す。

006

新規にCocoa Touch Classを作成してセルのクラスを作る。クラス名はArticleTableViewCell、SubclassはUITableViewCellにしておく。

007

ArticleTableViewCellクラスとストーリボードに貼ったTableViewCellと接続する。
customcellを選んでIdentity Inspectorを選んでClassでArticleTableViewCellを選ぶ。

008

いったんビルドする。

customcellに貼った部品をctlキーを押しながらドラッグ&ドロップしてArticleTableViewCellに繋ぐ。ArticleTableViewCellはこんな感じになる。

import UIKit

class ArticleTableViewCell: UITableViewCell {
    @IBOutlet weak var icon: UIImageView!
    @IBOutlet weak var user: UILabel!
    @IBOutlet weak var comment: UITextView!

    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
    }

}

Assets.xcassetsにユーザーアイコン用のイメージをImageって名前で追加する。

表示するデータのクラスArticleを作る。

import UIKit

class Article: NSObject {
    var icon:UIImage
    var user:String
    var comment:String
    
    init(icon:UIImage, user:String, comment:String) {
        self.icon = icon
        self.user = user
        self.comment = comment
    }
}

ViewControllerクラスにUITableViewDataSourceプロトコルを実装し、ストーリボードのテーブルビューのdataSourceとViewControllerを接続する。ViewControllerクラスはこんな感じ。

import UIKit

class ViewController: UIViewController, UITableViewDataSource {
    @IBOutlet weak var tableView: UITableView!
 
    // ダミーのデータを用意
    var list:[Article] = [
        Article(icon: UIImage(named:"Image")!, user: "user1", comment: "あいうえお"),
        Article(icon: UIImage(named:"Image")!, user: "user1", comment: "あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお")
    ]

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        // セルの高さを自動的に決まるように設定する
        tableView.estimatedRowHeight = 20
        tableView.rowHeight = UITableViewAutomaticDimension
    }

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

    // データの数を返す
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return list.count;
    }
    
    // セルにデータを設定して返す
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "customcell") as! ArticleTableViewCell
        let row = indexPath.row
        cell.icon.image = list[row].icon
        cell.user.text = list[row].user
        cell.comment.text = list[row].comment
        return cell;
    }
}