UIButton の画像の位置を、タイトルの左側じゃなく上側や右側にしたい。画像が左側じゃないボタンのモックを見たとき、どうやって実現するかいつも少し悩む。ということでいくつかのアプローチを検討したい。
drawRect(_:) など
UIButton は var titleLabel: UILabel? { get } や var imageView: UIImageView? { get } といった view を内包していて、描画はそういった view の側で行われるので、drawRect(_:) などの描画関連のメソッドをオーバーライドするべきではない。
独自に UIImageView を足したり CALayer を足したりして、表示される画像を追加することはできる。
setBackgroundImage(_:forState:)
画像を背景にする。UIImage の resizableImageWithCapInsets(_:) と組み合わせれば、わりと好きな位置に画像を表示できるはずである。不毛な感じはする。
titleEdgeInsets と imageEdgeInsets
タイトルの画像の UIEdgeInsets でチマチマ調整する方法。もともと画像が左にあるところからがんばって計算することになって厳しい。
titleRectForContentRect(_:) と imageRectForContentRect(_:)
titleRectForContentRect(_:) や imageRectForContentRect(_:) といったメソッドをオーバーライドしていい感じの CGRect を返す。
似たような backgroundRectForBounds(_:) メソッドのドキュメントには
Subclasses that provide custom background adornments can override this method and return a modified bounds rectangle to prevent the button from drawing over any custom content.
ということが書いてあって、オーバーライドしてよいことがわかる。しかし contentRectForBounds(_:) を含む同種の他のメソッドには書いていない。同種の他のメソッドには対応する UIEdgeInsets があるので、そういうのを考慮しているからオーバーライドしないようにという意味なのか、温度感がわからない。
UIControl のサブクラス
完全に独自の Button を作ることもできる。UIControl を継承して何もかも自分で作ることで、自由な内容を描画できる。特に不都合はないが、面倒ではある。
titleRectForContentRect(_:) と imageRectForContentRect(_:) のオーバーライドがいちばん現実的ではないか。という結論に至った。
- 作者: 荻原剛志
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2015/12/25
- メディア: 単行本
- この商品を含むブログを見る