画面の設計上、同じようなラベル(UILabel)をまとめて設定する場面に出くわすことがよくあります。
storyboardを利用した場合、各々一つ一つ画面に配置して、名前をつけてという感じになってしまいますが、コードで実現するならば、配列を利用することができそうです。
今回は、UILabelを配列化して、まとめて属性の設定を行い画面に配置します。
■完成イメージ
今回は、演劇感想文リンクのアプリの中で、公演情報を参照する画面の設計を行いました。
完成形は、こんな感じです。(色使いとかものすごく適当ですが）
公演情報(題名、劇団、劇場、公演期間、作、演出、出演者）の情報を表示します。(画面例の公演情報は、架空です。ちょっと長めなものを題名/劇団名でランダムに選択しました。）
ポイントは、
- ラベル(UILabel)の配列化によって同様の処理をまとめて行う。
- 値(公演情報の中身）の長さが可変となるため、ラベルの幅、高さを値によって変わるようにする。
- その上で、ラベルのお互いの配置を制御する
の3点です。
■ラベルの配列化
公演情報を表示する場合は、演劇感想文リンクでは、基本的に以下の項目を公演情報として表示しています。そのため、それをそのまま列挙型として定義します。各要素の名前(項目名として使用する）は、関数(項目名)を定義して、返すことにしました。配列化しておかないと、後のFor文で利用できないため、ラベル集という配列に変換までしておきます。
// ラベルの種類
enum 公演要素{
case 題名,劇団,劇場,公演期間,演出家,作家,出演者
func 項目名() -> String{
switch(self){
case .題名: return "題名"
case .劇団: return "劇団"
case .劇場: return "劇場"
case .公演期間: return "公演期間"
case .演出家: return "演出"
case .作家: return "脚本/原作"
case .出演者: return "出演"
}
}
var 項目名ラベル集:[UILabel]=[]
var 値ラベル集:[UILabel]=[]
// for ループで回すために、配列に強制的にする。
let ラベル集:[公演要素] = [.題名,.劇団,.劇場,.公演期間,.演出家,.作家,.出演者]}
これを利用して列挙型で一気に項目名ラベルと値ラベルを生成します。
private func 項目名及び値生成(){
for 要素 in ラベル集{ // <-ラベル集の要素の順番に配列を作成
項目名ラベル集.append(題名ラベル生成(要素))
値ラベル集.append(値ラベル生成(要素))
}
}
private func 題名ラベル生成(type :公演要素)->UILabel{
let ラベル = ラベル生成()
ラベル.text=type.項目名()
ラベル.textAlignment=NSTextAlignment.Center
ラベル.font=UIFont.systemFontOfSize(18)
ラベル.sizeToFit()
if ラベル.frame.width > 項目名幅{
項目名幅=ラベル.frame.width
}
return ラベル
}
private func 値ラベル生成(type:公演要素)->UILabel{
let ラベル=ラベル生成()
ラベル.textAlignment=NSTextAlignment.Justified
ラベル.font=UIFont.systemFontOfSize(18)
switch (type){
case 公演要素.題名:ラベル.text=公演.題名
case 公演要素.劇団:ラベル.text=公演.劇団
case 公演要素.公演期間:ラベル.text=公演.公演期間
case 公演要素.演出家:ラベル.text=公演.演出家
case 公演要素.作家:ラベル.text=公演.作家
case 公演要素.出演者:ラベル.text=公演.出演者
case 公演要素.劇場:ラベル.text=公演.劇場
}
ラベル.sizeToFit()
return ラベル
}
設定が終了したラベルは、上位のViewにaddSubviewします。これも、配列化していれば一発です。
以下の2行を、初期化処理の最後に記載します。
for 項目名ラベル in 項目名ラベル集{ self.addSubview(項目名ラベル)}
for 値ラベル in 値ラベル集{ self.addSubview(値ラベル) }
以上で、とりあえず配列化したラベルを作成することができました。
続きの「ラベルの幅、高さを値によって変わるようにする。」と「お互いの位置関係を元に配置する」はまた、別の記事にします。