とてもよく使用する機能なので、使えるようになると便利です。今回は、TableViewを作成し、文字列を表示するまでを目標にしたいと思います。
TableViewを作ってみよう
では、実際にTableViewを作ってみたいと思います。Xcodeを開いて、Create a new Xcode project → Single View Application → product name を”TableView”としてCreateボタン
を押します。
※プロジェクトの作成方法がわからない場合は、こちらをご参照ください。
プロジェクトが作成されたら、Main.storyboardを選択し、シミュレータのバージョン、画面サイズを変更します（今回は、シミュレータをiPhone5S、画面サイズを４inchとします。）。そして、ユーティリティエリアよりTableViewを選択し、ドラッグ＆ドロップで真ん中のエリアの画面内に持っていきます。
さらに、オートレイアウトの設定もしておくと、画面サイズの変更や縦横画面切り替え時に自動で配置してくれます。
次に、Tableの行数の設定をします。先ほど追加したTableViewをクリックし、ユーティリティエリアのPrototypeCellsの値を変更します。この値が行数になっており、値を変更することにより、行の増減が可能になります。
また、行に名前をつけます。これは、ソースコードからTableを扱う際に、どの行を扱って良いかを指定する為につける名前です。ソースコードからは１行目という指定ではなく、１行目に付いている名前を指定する必要があります。設定方法は、行を選択し、Identifier欄に名前を記載するだけです（何でも良いですが、今回は、"cell"という名前をつけます。）。
次に、TableViewを ViewControllerにて使用できるように設定します。TableViewをControlを押しながら選択し、ViewControllerにドラッグ＆ドロップします。
そうすると、outlet欄にDatasourceとdelegateが表示されると思いますので、両方をチェックします。
この設定を行うことにより、TableViewをViewController内で使用できるようになるのはもちろん、ViewController.swiftにて記述したソースコードからも制御可能になります。
TableViewに関連するソースコードを書いてみよう
次に、ViewController.swiftを開きます。ここに実際のコードを記述していきます。 まずは、TableViewを使用するための宣言として、UIViewControllerの後ろに、UITableViewDelegateを追加します。この宣言を記述することにより、 tableViewに関する様々な関数を利用することができます。※TableViewに関数を使いたい場合は、UITableViewDelegateをコマンドキーを押しながら押しながらクリックします。
import UIKit
class ViewController: UIViewController,UITableViewDelegate {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
今回使用する関数は、以下の二つになります。
１、Tableに表示する行数を指定する関数
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
}
２、各行へ値を表示する関数
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
}
では、実際に配列として変数を定義し（例：var cellArray = ["Hello","World","Swift","Xcode"]）、その値を各行に表示するソースコードを記述してみます。
まず、行数指定関数です。今回の例では、配列に文字列が”４つ”あるため、return 4を記述します。
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
retrun 4
これは、値を表示する行数が４つありますよ、ということを意味しています。
次に、値を表示する関数です。 まずはじめに、下記の関数を用いてどの行に表示するのかを指定します。
let cellValue = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "cell")
先ほどMain.storyboardにて指定した行数の名前「cell」をreuseIdentifierとして、定義します。つまり、cellという名前の行を扱う変数を設定したことになります。
次に上記の変数のテキストに配列の値を代入します。
cellValue.textLabel?.text = cellArray[indexPath.row]
配列の[]内にindexPath.rowと記載することにより、配列の１番目がTableの１行目、配列の2番目がTableの２行目といったような値を取得することができます。その値をテキストとして、cellに表示していくというのが上記の変数の意味するところになります。
そして、最後に
return cellValue
を返すことにより行へ値を表示することが可能となります。
※Main.storyboardにて指定する行数と関数にて指定する行数の使い分けとしては、Main.storyboard内の行数は、例えば、各行に名前（Identifier）を与え、それぞれ違った処理をさせたい場合に増やすなどの使い方をし、関数の場合は、実際に値を表示する行数を指定する場合に利用します。
ここまでできたら、ビルドしてシミュレータを起動します。下記のように表示されていたら成功です。
もし、行は表示されているが、中身（値）が何も表示されていないようでしたら、
・ViewControllerへの括り付け(Datasourceとdelegateのチェック)
・cellのIdentifier（行の名前）の設定 ができているか再度確認してください。
ViewController.swiftの全体のコードは以下になります。
import UIKit
class ViewController: UIViewController,UITableViewDelegate {
var cellArray = ["Hello", "World", "Swift", "Xcode"]
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 4
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cellValue = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "cell")
cellValue .textLabel?.text = cellArray[indexPath.row]
return cellValue
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
では、次回はSegueについて説明したいと思います。
0 件のコメント:
コメントを投稿