恒例になっているTwitterのタイムライン風の画面を作ってみるw
新規にプロジェクトを作成して、ストーリボードを開いてテーブルビューをはっ付けておく。
貼ったテーブルビューにTable View Cellをドラッグ&ドロップする。
貼ったテーブルビューセルのアトリビュート・インスペクターでIdentifierにcustomcellと入力する。
テーブルビューセルに部品を配置する。
ユーザーアイコンにあたるImageViewを貼って、制約を次のように設定する。Content ModeをAspect Fitにする。
Labelを貼って、制約を次のように設定する。フォントサイズを20にする。
TextViewを貼って、制約を次のように設定する。Scrolling Enabled、Editableのチェックを外す。
新規にCocoa Touch Classを作成してセルのクラスを作る。クラス名はArticleTableViewCell、SubclassはUITableViewCellにしておく。
ArticleTableViewCellクラスとストーリボードに貼ったTableViewCellと接続する。
customcellを選んでIdentity Inspectorを選んでClassでArticleTableViewCellを選ぶ。
いったんビルドする。
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;
}
}