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はセンタリングされない

0 件のコメント:

コメントを投稿

DataStoreの辛いところ

# DataStoreの限界 FacebookやインスタグラムのようなSNSで、投稿、公開範囲、お気に入りなどの機能をDataStoreで実現しようとするとどうしても辛くなる。 ## DataStoreで実現可能? - users - id - feeds - i...