Swift3にて、UILabelを縦に並べて表示させた場合に、文字列が多いなどで改行させてラベルの高さを動的に可変させた場合に、それ以降に並んだラベルの座標位置を自動的にずらす方法を模索しているのですが、苦戦しております。
UILabelはコードで作成しているので、StoryboardのAutoLayoutではなく、コード記述でY座標をずらせる方法を教えて頂ければ助かります。
ラベルはspaceなしでq1Label~q11Labelの順番で上から縦に並べてあります。
表示させるテキストはcsvファイルから取得し、ランダムになるものとします。
例えば、q9Labelが文字列が多くて改行させて+20ラベルのheightを高くした場合、q10Label, q11Labelの表示位置(Y座標)を自動的に変えさせたいです。
ご教授、宜しくお願い致します。
■ サンプルコード Swift3 xcode8
Swift3
1import UIKit 2 3class FirstViewController: UIViewController { 4 5 let q1Label = UILabel() 6 let q2Label = UILabel() 7 let q3Label = UILabel() 8 let q4Label = UILabel() 9 let q5Label = UILabel() 10 let q6Label = UILabel() 11 let q7Label = UILabel() 12 let q8Label = UILabel() 13 let q9Label = UILabel() 14 let q10Label = UILabel() 15 let q11Label = UILabel() 16 17 override func viewDidLoad() { 18 super.viewDidLoad() 19 20 // CSVファイルを読み込む 21 let csvArray = loadCSV("test") 22 23 //csvArrayから取り出した問題を格納する配列qArray 24 var qArray:[String] = [] 25 26 //csvArrayの行を取得 27 qArray = csvArray[2].components(separatedBy: ";") 28 29 // q1Label作成 30 q1Label.text = qArray[5] 31 q1Label.frame = CGRect(x: 20, y: 60, width: 335, height: 30) 32 q1Label.textColor = UIColor.black 33 q1Label.font = UIFont.systemFont(ofSize: 12) 34 q1Label.backgroundColor = .gray 35 view.addSubview(q1Label) 36 37 // q2Label作成 38 q2Label.text = qArray[7] 39 q2Label.frame = CGRect(x: 20, y: q1Label.frame.maxY, width: 335, height: 30) 40 q2Label.textColor = UIColor.black 41 q2Label.font = UIFont.systemFont(ofSize: 12) 42 q2Label.backgroundColor = .gray 43 view.addSubview(q2Label) 44 45 // q3Label作成 46 q3Label.text = qArray[9] 47 q3Label.frame = CGRect(x: 20, y: q2Label.frame.maxY, width: 335, height: 30) 48 q3Label.textColor = UIColor.black 49 q3Label.font = UIFont.systemFont(ofSize: 12) 50 q3Label.backgroundColor = .gray 51 view.addSubview(q3Label) 52 53 // q4Label作成 54 q4Label.text = qArray[11] 55 q4Label.frame = CGRect(x: 20, y: q3Label.frame.maxY, width: 335, height: 30) 56 q4Label.textColor = UIColor.black 57 q4Label.font = UIFont.systemFont(ofSize: 12) 58 q4Label.backgroundColor = .gray 59 view.addSubview(q4Label) 60 61 // q5Label作成 62 q5Label.text = qArray[13] 63 q5Label.frame = CGRect(x: 20, y: q4Label.frame.maxY, width: 335, height: 30) 64 q5Label.textColor = UIColor.black 65 q5Label.font = UIFont.systemFont(ofSize: 12) 66 q5Label.backgroundColor = .gray 67 view.addSubview(q5Label) 68 69 // q6Label作成 70 q6Label.text = qArray[15] 71 q6Label.frame = CGRect(x: 20, y: q5Label.frame.maxY, width: 335, height: 30) 72 q6Label.textColor = UIColor.black 73 q6Label.font = UIFont.systemFont(ofSize: 12) 74 q6Label.backgroundColor = .gray 75 view.addSubview(q6Label) 76 77 /// q7Label作成 78 q7Label.text = qArray[17] 79 q7Label.frame = CGRect(x: 20, y: q6Label.frame.maxY, width: 335, height: 30) 80 q7Label.textColor = UIColor.black 81 q7Label.font = UIFont.systemFont(ofSize: 12) 82 q7Label.backgroundColor = .gray 83 view.addSubview(q7Label) 84 85 // q8Label作成 86 q8Label.text = qArray[19] 87 q8Label.frame = CGRect(x: 20, y: q7Label.frame.maxY, width: 335, height: 30) 88 q8Label.textColor = UIColor.black 89 q8Label.font = UIFont.systemFont(ofSize: 12) 90 q8Label.backgroundColor = .gray 91 view.addSubview(q8Label) 92 93 // q9Label作成 94 q9Label.text = qArray[21] 95 q9Label.frame = CGRect(x: 20, y: q8Label.frame.maxY, width: 335, height: 30) 96 q9Label.textColor = UIColor.black 97 q9Label.font = UIFont.systemFont(ofSize: 12) 98 q9Label.backgroundColor = .gray 99 view.addSubview(q9Label) 100 print("q9Label.frame.maxY: (q9Label.frame.maxY)") 101 102 103 // q10Label作成 104 q10Label.text = qArray[23] 105 q10Label.frame = CGRect(x: 20, y: q9Label.frame.maxY, width: 335, height: 30) 106 q10Label.textColor = UIColor.black 107 q10Label.font = UIFont.systemFont(ofSize: 12) 108 q10Label.backgroundColor = .gray 109 view.addSubview(q10Label) 110 print("q9Label.frame.maxY: (q9Label.frame.maxY)") 111 112 // q11Label作成 113 q11Label.text = qArray[25] 114 q11Label.frame = CGRect(x: 20, y: q10Label.frame.maxY, width: 335, height: 30) 115 q11Label.textColor = UIColor.black 116 q11Label.font = UIFont.systemFont(ofSize: 12) 117 q11Label.backgroundColor = .gray 118 view.addSubview(q11Label) 119 120 121 122 // UILabelを配列に入れる 123 var qlabels = [UILabel]() 124 125 // 配列labelsに追加するラベル 126 qlabels.append(q1Label) 127 qlabels.append(q2Label) 128 qlabels.append(q3Label) 129 qlabels.append(q4Label) 130 qlabels.append(q5Label) 131 qlabels.append(q6Label) 132 qlabels.append(q7Label) 133 qlabels.append(q8Label) 134 qlabels.append(q9Label) 135 qlabels.append(q10Label) 136 qlabels.append(q11Label) 137 138 139 // ■が含まれてる文字列がある場合は色を変える 140 for i in qlabels { 141 if (i.text?.contains("■"))! { 142 i.backgroundColor = .cyan 143 } 144 } 145 146 // 文字数が30より多い場合は改行させて、ラベルのheightを高くする 147 for c in qlabels { 148 if (c.text?.characters.count)! > 30 { 149 c.numberOfLines = 0 150 c.frame.size.height += 20 151 c.frame = CGRect(x: 20, y: c.frame.origin.y, width: 335, height: c.frame.size.height) 152 } 153 } 154 } 155 156 (略) 157} 158
■ 回答を参考に修正したコード
Swift3
1 // 文字数が30より多い場合は改行させて、ラベルのheightを高くする 2 3 // offsetYを利用して座標をずらす方法 4 var offsetY: CGFloat = 0 5 for c in qlabels { 6 c.frame.origin.y += offsetY 7 if (c.text?.characters.count)! > 30 { 8 c.numberOfLines = 0 9 c.frame.size.height += 20 10 offsetY += 20 11 c.frame = CGRect(x: 20, y: c.frame.origin.y, width: 335, height: c.frame.size.height) 12 } 13 } 14 15 16 // maxYを利用して座標をずらす方法 17 var maxY: CGFloat = 60 18 for c in qlabels { 19 c.frame.origin.y = maxY 20 if (c.text?.characters.count)! > 30 { 21 c.numberOfLines = 0 22 c.frame.size.height += 20 23 c.frame = CGRect(x: 20, y: maxY, width: 335, height: c.frame.size.height) 24 } 25 maxY = c.frame.maxY 26 } 27 28 29 // 一つ前のラベル qlabels[c-1] を利用して座標をずらす方法 30 for c in 0..<qlabels.count { 31 qlabels[0].frame.origin.y = 60 32 if c > 0 { 33 qlabels[c].frame.origin.y = qlabels[c-1].frame.maxY 34 } 35 if (qlabels[c].text?.characters.count)! > 30 { 36 qlabels[c].numberOfLines = 0 37 qlabels[c].frame.size.height += 20 38 qlabels[c].frame = CGRect(x: 20, y: qlabels[c-1].frame.maxY, width: 335, height: qlabels[c].frame.size.height) 39 } 40 } 41 42
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/23 11:33
2018/01/23 12:22 編集
2018/01/23 13:03 編集
2018/01/23 13:03
2018/01/23 13:05
2018/01/23 13:13
2018/01/23 13:23
2018/01/23 13:32
2018/01/24 13:01