新人奮闘記16

iOS 入門

今回は、iOSでよく使うテーブルビューで、より細かな処理を実装するに至り、奮闘したのでまとめたいと思います。

テーブルといえば以下のような、要素分のカラムをリスト形式でずらっと表示する事を連想しますが、区切ってジャンルやカテゴリー毎に表示したい場合もあるかと思います。

特に意味はありませんがLinuxを例に区切られたTableを作成していきたいと思います。

Red Hat系には、Centos、Fedora、Red HatEnterpriseLinuxがあり

Debian系には、Ubuntu、Linux Mint、Edubuntu　というディストリビューションがある場合で考えてみました。

そのような場合は、どのように実装をすればいいのかで困った部分を記述します。

前提として各プロパティは配列で
let category = [“RedHat”,”Debian”]
let redHat = [“Centos”,”Fedora”,”RHEL”]
let debian = [“Ubuntu”,”LinuxMint”,”Edubuntu”]としています。

まず、TableView作成に必須なメソッド２つを実装します。

[セクション毎のセルの行数を設定するメソッド]

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {}

[セルのデータを設定するメソッド]

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {}

これで、要素の内容が一覧表示されるますが、その他にセクションを分割するため、各セクションのタイトルを、この場合、RedHatとDebianをタイトルとしますが、どのようにタイトルを設定するか模索していた所、あるメソッドに出会いました。

ヘッダーを作成するメソッド

func tableView(tableView:UITableView, viewForHeaderInSection section: Int) -> UIView?{

}

これは、セクションのヘッダーを作成するために使用するものであり、ヘッダーをカスタマイズして作成する事ができる便利なメソッドです。

このメソッドを利用して、タイトルを設定してみました。

ラベルを生成して、テキストや背景等をカスタマイズしています。
そこでヘッダーの数はどうなるのだろうという疑問ですが、今回はセクションの数 = ヘッダーの数としたいので、セクションの個数を設定すれば、それに合わせてヘッダーも表示されます。

そのメソッドが以下

セクションの数を設定するメソッド

※余談ですが、セクションはヘッダーを含むという意識をせずに作ろうとすると混乱してしまいました。

今回のセクション分けは、redHat と debianに分かれるので二つのセクションという事になります。

さらにヘッダーの高さも設定したい場合には

ヘッダーの高さを設定するメソッド

というメソッドを用いて、高さを動的に変更したりする事が可能で、今回は固定値にしています。

以上で、ヘッダーの設定は完了します。

後はセルの内容を設定するcellForRowAtIndexPathメソッドで、配列redHatとdebianを分ければ、セクション分けされたテーブルが完成します。

※ cellForRowAtIndexPathメソッド内の処理は割愛させていただきます。

その他の処理

[罫線左詰め]

罫線を左端まで引っ張りたい場合
tableView.separatorInset = UIEdgeInsetsZero を記述する

[中身の無いセル]

上の完成図では、最後のセクション(Debian)の最終行(Edubuntu)が終わった後、表示するセルの内容が無くても罫線が存在します。
tableView.tableFooterView = UIView()又は、
func tableView(tableView: UITableView, viewForFooterInSection section: Int) -> UIView? { return UIView() }
とする事で、フッターを上書きする事ができます。

まとめ

• ・セクションにヘッダーを付けたい、カスタマイズしたい場合は、 viewForHeaderInSection メソッドを実装する。
• ・ヘッダーの高さを指定する場合はViewheightForHeaderInSectionメソッドを実装する。
• ・セクションの数は、numberOfInSectionで実装する。
• ・罫線を左端まで描画するときは、テーブルに対して、separatorInset = UIEdgeInsetsZeroを設定する。
• ・要素が空のセルを非表示にする時は、ViewForFooterInsectionにUIView()を設定する。

Tweet