今回の記事は、swiftのtableviewを用いてiPhoneアプリ内でエクセルのような表を表示する方法について解説していきます。
業務用のアプリ開発などを行う際や、マス目などを作成する時に応用できると思うので是非ご参照ください。分かりやすいように今回の完成イメージは下記のようになっております。
では早速その方法を追ってご紹介していきます。
TableViewとTableViewCellを配置＆Cellの上にLabelを
こちらに関しては下記のページに従って処理を行ってください。
identiferは「cell」に設定しました。
上記の内容でとりあえずtableviewを表示させるところまでは進めることができるのでそこまでは行ってみてください。
次にlabelをCell上に配置配置して並べていきます。
layoutは少しだけ注意して綺麗にな並べるようにすればOKです。ここでlabelの幅とかが枠線に影響してくるのできっちりと行っておきましょう。行と列の数量も自分の好きな数量に調節してください。
次にlabelそれぞれにtagを振り分けていきます。tagはインスペクションのツールバーから設定できますのでそちらで操作ください。
右から1,2,3,4,5で今回は設定しました。
ではSwftのコード方に移っていきましょう。
TableView関連のSwiftコードを記述
まずは通常のtableviewnの表示ができているかを確認しましょう。コードは下記のようになっております。
import UIKit
class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 10
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
let label1 = cell.contentView.viewWithTag(1) as! UILabel
let label2 = cell.contentView.viewWithTag(2) as! UILabel
let label3 = cell.contentView.viewWithTag(3) as! UILabel
let label4 = cell.contentView.viewWithTag(4) as! UILabel
let label5 = cell.contentView.viewWithTag(5) as! UILabel
label1.text = "テスト1"
label2.text = "テスト2"
label3.text = "テスト3"
label4.text = "テスト4"
label5.text = "テスト5"
return cell
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
}
配列などを使ってみやすくすることもできますがこちらの方が解説上分かりやすいと思うのでコードは冗長になっていますがご了承ください。runを押して下記のようになっていればOKです。
このようになっていればOKです。この表示ができていない方はtableviewの紐付け関連やLabelのtagの設定の忘れなどが原因と思われます。確認してみましょう。
では次にLabelに枠線をつけてみます。ここでかなりエクセルの表に近づきます。
import UIKit
class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 10
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
let label1 = cell.contentView.viewWithTag(1) as! UILabel
let label2 = cell.contentView.viewWithTag(2) as! UILabel
let label3 = cell.contentView.viewWithTag(3) as! UILabel
let label4 = cell.contentView.viewWithTag(4) as! UILabel
let label5 = cell.contentView.viewWithTag(5) as! UILabel
// 枠線の幅// 枠線の色
label1.layer.borderWidth = 2.0
label1.layer.borderColor = UIColor.black.cgColor
label2.layer.borderWidth = 2.0
label2.layer.borderColor = UIColor.black.cgColor
label3.layer.borderWidth = 2.0
label3.layer.borderColor = UIColor.black.cgColor
label4.layer.borderWidth = 2.0
label4.layer.borderColor = UIColor.black.cgColor
label5.layer.borderWidth = 2.0
label5.layer.borderColor = UIColor.black.cgColor
label1.text = "テスト1"
label2.text = "テスト2"
label3.text = "テスト3"
label4.text = "テスト4"
label5.text = "テスト5"
return cell
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
}
上記の解説としてはlabel1などは現在Cell上でUILabelとして定義されています。(as UILabel)そのため、UIlabel関連のメソッドが使用できるのでそれを利用して、下記のメソッドでlabelに枠線を付与しています。
// 枠線の幅// 枠線の色
label1.layer.borderWidth = 2.0
label1.layer.borderColor = UIColor.black.cgColorでは表示を見てみましょう。
近づきつつあるという感じですね。では枠線の細さを一段階下げて文字を消してみましょう。以下のようになっています。
今回の記事では以上で終了します。かなりエクセルチックに表示を行うことができたのではないでしょうか。また、indexpathとlabelのtag情報でエクセルのようにCellを指定して操作もできるのでおすすめです。特に日本はエクセルを使用している方が大量にいるのでエクセルチックな表示をマスターすれば業務用アプリなどに活かせる可能性は非常に高いと考えられます。
コメント