概要

iOS開発を行っていると、文字の並びを上揃え（上寄せ）にしたいときがあると思います。
例えば、以下のような時です。

上図のような、UICollectionViewを用いてセルが横並びになっている画面を作りました。この各セルにはUILabelがあり、そのUILabelは最大2行分の高さになるとします。
普通に実装すると、文字の1番上の位置はバラバラになると思います。

これを調整しようとUILabelのプロパティを調べてみると、左揃えや中央揃えはありますが上揃えがないことに気が付きます。
正直不親切だと思います。（Appleさんプロパティ追加して、、、）
ですので、以下でこの問題への対処法を書いていきます。

原因

原因はUILabelの文字の高さの位置が、必ずUILabelの高さの中央に来るように補正されることです。
文字が全部で1行のときはその1行がUILabelの中央に、2行のときは上の行と下の行の隙間がUILabelの中央に補正される、というわけですね。

ですので文字を上揃えにするためには、UILabelの高さから調整する必要があります。

やり方1: sizeToFit()

UILabelのメソッドの一つにsizeToFit()というものがあります。これは呼ぶとUILabelの幅と高さが、文字がピッタリ収まる大きさに調整されます。
これを用いてUILabelの高さを調整し、その後でUILabelを上揃えにすれば文字も上揃えになります。

sampleCell.swift

func setupLabelFrame() {
    var fixedFrame = self.label.frame
    self.label.sizeToFit()
    fixedFrame.size.height = self.label.frame.size.height
    self.label.frame = fixedFrame
}

ただしこのやり方では、文字の中身が動的に変わる場合はその都度高さと位置の調整が必要になります。

やり方2: AutoLayout + numberOfLines = 0

私がよく利用する方法がこちらです。
sizeToFitのように都度調整する必要がなく、原理的にもわかりやすいのでおすすめです。

UILabelにAutoLayoutを用いて、左辺と右辺と上辺のConstraintを追加する
UILabelのnumberOfLinesを0にする

3. いったん最大行数分の高さをで表示し、その高さがUILabelの高さの最大値となるようにConstraintを追加する

これで文字が上揃えになります。

原理を説明すると、1でUILabelの伸びていく方向を下方向に限定して、2で文字の量によって高さを自動調節されるようにして、3でその伸び幅の最大値を決めるって感じですね。
これによってUILabelの大きさが文字によって自動的に決まってくれるようになります。

終わりに

正直、こんな回りくどい実装しなくてもUILabelのプロパティに上揃えを用意してくれれば解決なのですが、、、
しかし需要がありそうなのに実装されないのは何かしら理由があるのでしょう。
いずれにしろiOS開発にはコツがいるなと感じる今日この頃です。。。

sizeToFitを使わずにUILabelの文字を上揃え（上寄せ）にする

概要

原因

やり方1: sizeToFit()

やり方2: AutoLayout + numberOfLines = 0

終わりに