CATextLayerの上下中央揃え

November 30, 2014

CATextLayer の上下中央揃えにはまっていましたが、なんとかうまい具合に行きそうなのでちょっと書いてみます。CATextLayerの左右中央揃えはメソッドも用意されていてすぐできるんですが、上下中央は情報も少なく(あってもちょっとトリッキー)、そこまで完璧を求めていなかったのでシンプルに出来る方法を探りました。

前提

  • CAShapeLayerで作成した shapeLayer があります。そして、そのframeは bodyRect という変数で宣言しています。
  • bodyRectのサイズは常に変わるので、textLayerのサイズを固定にすることはできません。
  • shapeLayerの上に上下左右中心に揃えたテキストを置きたいと思っていました。

どんなことをやったか

textの表示領域を取得して、CATextLayerのサイズをその領域に書きだすことで上下中央に配置する。

説明付きコード

// とりあえず、fontと表示したいテキストを用意 let font = UIFont.systemFontOfSize(20.0) let text = “T”

// 上記で用意したfontを利用した場合のテキストのサイズを取得 var attributes = [NSObject: AnyObject]() attributes[NSFontAttributeName] = font let size = text.sizeWithAttributes(attributes)

// テキストのサイズから表示するframeを作成 let x = CGRectGetMinX(bodyRect) + (CGRectGetWidth(bodyRect) - size.width) / 2 let y = CGRectGetMinY(bodyRect) + (CGRectGetHeight(bodyRect) - size.height) / 2 let height = size.height let width = size.width let frame = CGRectMake(x, y, width, height)

// CATextLayerを作っていきます。 let textLayer = CATextLayer() textLayer.string = text textLayer.font = font // 解説1 textLayer.fontSize = font.pointSize textLayer.foregroundColor = UIColor.whiteColor().CGColor textLayer.frame = frame // 左右中央揃えです textLayer.alignmentMode = kCAAlignmentCenter // スケールの調整 textLayer.contentsScale = UIScreen.mainScreen().scale shapeLayer.addSublayer(textLayer) return shapeLayer

解説1

textLayer.font = fontでフォントを指定しているのでサイズもセットしているのかなと思っていたら、ちゃんとtextLayer.fontSizeで指定しないと反映されませんでした汗 これが原因で1.5時間ははまった〜。

全体を通して

とりあえずの方法です。でも、助かる人もいるかなと思ってコミュニティにシェアしました。もっとしっかりfontのbaselineの調整などもやったほうが正確かもしれませんが。


Profile picture

Written by morizotter who lives and works in Tokyo building useful things. You should follow them on Twitter