UIButtonにimageもtextも縦に表示させる

UIButtonにimageとtextを設定すると、横に並べて表示される。 縦に表示したい場合は一手間が必要（だと思う)

何も指定せずに表示してみる

何も指定せずにimageと適すを表示すると、imageとtextを横に並べてセンタリングされる

余白調整

縦に表示するためにそれぞれの余白を調整する

• imageの余白指定 : imageEdgeInsets
• textの余白指定 : titleEdgeInsets

※計算するまえに文字列を設定しても問題ない

実装

今回はUIButtonのカテゴリにレイアウト調整する関数を追加

@implementation UIButton (Layout)

- (void)verticalLayout
{
    float buttonHeight = CGRectGetHeight(self.frame);
    float imageHeight  = CGRectGetHeight(self.imageView.frame);
    float textHeight   = CGRectGetHeight(self.titleLabel.frame);

    float verticalMergin = (buttonHeight - imageHeight - textHeight) / 2.0f;

    float buttonWidht = CGRectGetWidth(self.frame);
    float imageWidht  = CGRectGetWidth(self.imageView.frame);
    float textWidht   = CGRectGetWidth(self.titleLabel.frame);

    float imageHorizonMergin = (buttonWidht - imageWidht) / 2.0f;

    self.contentEdgeInsets = UIEdgeInsetsZero;
    self.imageEdgeInsets
        = UIEdgeInsetsMake(verticalMergin,
                           imageHorizonMergin,
                           verticalMergin + textHeight,
                           imageHorizonMergin - textWidht);
    self.titleEdgeInsets
        = UIEdgeInsetsMake(verticalMergin + imageHeight,
                           -imageWidht,
                           verticalMergin,
                           0);
}

ハマったところ

• Interface Builderで設定する場合は@2xをファイル名につけると画像が拡大されて表示される
• 文字列は自動でセンタリングされるが、imageはセンタリングされない