今回の記事はSwiftの表示形式を整えてくれる、便利なXcodeのクラスである「Tableview」についての記事です。以前の記事でTableViewに文字などを表示させる方法については記載しましたが、今回はそこを画像に変えて表示させていきます。完成図は下記の画像の様にしていきます。
TableViewのXcode側での設定
まずはStoryBoardに思いっきりtableviewを広げて配置。（下記図の様に）
その上にCellを配置。（下記の様に）
ここまでは以前の記事でもできていますのでそこまで難しくありません。
ここからCellにラベルを追加してとかやっていく方法は以前の記事のままですので、今回はimageviewというものをCellに配置して見て下さい。（下記の様に）
配置できれば余白を全て０に変更して、Cellいっぱいに表示させる様にします。
ここに関しては適宜調節して下さい。
次にCellではなくTableviewの方から「control 」+ 「ドラッグ」でStoryboardの上部にある丸いマークに矢印を持っていきます。
すると下記の様な表示が出てくるのでこちら「datasource」と「delegate」を共にチェックして下さい。チェックされると白まるがつきます。
次にTableViewCellをクリックしてidentiferを設定して下さい。なんでもOKです。
今回は「tablecell」としました。
また、imageviewにはtagをつけて下さい。こちら私は都合があったので「２」にしてますが、1で問題ないのでまあ適当に設定します。
最後に表示させる写真をプロジェクトに入れて下さい。
どこに入れてもいいですが、まとめやすいのでAssetsに私は入れてます。
ここまででXcode側で行うことは終了です。
tableviewにimageを表示させるソースコード紹介
下記コードにてコードでUIImageViewを作成してCell内に表示させていく流れです。
import UIKit
let photos = ['こちらには表示させたい分だけ写真の名前入れて下さい。']
class Modelcourse_ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return photos.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "tablecell", for: indexPath as IndexPath)
let imageView = cell.contentView.viewWithTag(2) as! UIImageView
// 画像配列の番号で指定された要素の名前の画像をUIImageとする
let cellImage = UIImage(named: photos[indexPath.row])
// UIImageをUIImageViewのimageとして設定
imageView.image = cellImage
return cell
}
override func viewDidLoad() {
super.viewDidLoad()
}
}
解説を行っていきます。
まずは表示させたい画像の名前をリスト内に格納させます。
このリストの中を全てIndexpathの順番にCellに表示させていく流れになっております。
そして、UIImageとして画像を取得すれば後はCell内のImageViewと紐付けるのみです。
これで一通りの表示の流れは完成です。
buildして見て下さい。ここで画像の大きさが大きすぐて変な感じだったのでimageviewの大きさを半分にして正方形になる様に表示させました。
見た目を整えて再度buildさせた結果が冒頭にも貼った写真の様になっていればOKです。
今回の記事はここまでですが、他にもSwiftの記事を多数載せておりますのできになる方はご参照ください。
コメント