UIButton: как центрировать изображение и текст, используя imageEdgeInsets и titleEdgeInsets?

Question

Если я поместил в кнопку только изображение и установил imageEdgeInsets ближе к верху, изображение останется в центре и все будет работать как положено:

[button setImage:image forState:UIControlStateNormal];
[button setImageEdgeInsets:UIEdgeInsetsMake(-15.0, 0.0, 0.0, 0.0)];

Если я поместил в кнопку только текст и установил titleEdgeInsets ближе к основанию, текст остался центрированным, и все работало как ожидалось:

[button setTitle:title forState:UIControlStateNormal];
[button setTitleEdgeInsets:UIEdgeInsetsMake(0.0, 0.0, -30, 0.0)];

Но, если я соединю 4 строки, текст будет мешать изображению, и оба потеряли выравнивание по центру.

Все мои изображения имеют ширину 30 пикселей, и если я добавлю 30 в левый параметр UIEdgeInsetMake для setTitleEdgeInsets, текст снова будет центрирован. Проблема в том, что изображение никогда не центрируется, потому что кажется, что оно зависит от размера button.titleLabel. Я уже пробовал много вычислений с размером кнопки, размером изображения, размером titleLabel и никогда не получал идеальное центрирование.

У кого-то уже была такая же проблема?

Answer 1

Для чего стоит, вот общее решение для размещения изображения по центру над текстом без использования каких-либо магических чисел. Обратите внимание, что следующий код устарел, и вам, вероятно, следует использовать одну из обновленных версий ниже :

// the space between the image and text
CGFloat spacing = 6.0;

// lower the text and push it left so it appears centered 
//  below the image
CGSize imageSize = button.imageView.frame.size;
button.titleEdgeInsets = UIEdgeInsetsMake(
  0.0, - imageSize.width, - (imageSize.height + spacing), 0.0);

// raise the image and push it right so it appears centered
//  above the text
CGSize titleSize = button.titleLabel.frame.size;
button.imageEdgeInsets = UIEdgeInsetsMake(
  - (titleSize.height + spacing), 0.0, 0.0, - titleSize.width);

Следующая версия содержит изменения в поддержке iOS 7 + , которые были рекомендованы в комментариях ниже. Я сам не тестировал этот код, поэтому я не уверен, насколько хорошо он работает или сломается, если его использовать в предыдущих версиях iOS.

// the space between the image and text
CGFloat spacing = 6.0;

// lower the text and push it left so it appears centered 
//  below the image
CGSize imageSize = button.imageView.image.size;
button.titleEdgeInsets = UIEdgeInsetsMake(
  0.0, - imageSize.width, - (imageSize.height + spacing), 0.0);

// raise the image and push it right so it appears centered
//  above the text
CGSize titleSize = [button.titleLabel.text sizeWithAttributes:@{NSFontAttributeName: button.titleLabel.font}];
button.imageEdgeInsets = UIEdgeInsetsMake(
  - (titleSize.height + spacing), 0.0, 0.0, - titleSize.width);

// increase the content height to avoid clipping
CGFloat edgeOffset = fabsf(titleSize.height - imageSize.height) / 2.0;
button.contentEdgeInsets = UIEdgeInsetsMake(edgeOffset, 0.0, edgeOffset, 0.0);

Swift версия

extension UIButton {
  func alignVertical(spacing: CGFloat = 6.0) {
    guard let imageSize = self.imageView?.image?.size,
      let text = self.titleLabel?.text,
      let font = self.titleLabel?.font
      else { return }
    self.titleEdgeInsets = UIEdgeInsets(top: 0.0, left: -imageSize.width, bottom: -(imageSize.height + spacing), right: 0.0)
    let labelString = NSString(string: text)
    let titleSize = labelString.size(attributes: [NSFontAttributeName: font])
    self.imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
    let edgeOffset = abs(titleSize.height - imageSize.height) / 2.0;
    self.contentEdgeInsets = UIEdgeInsets(top: edgeOffset, left: 0.0, bottom: edgeOffset, right: 0.0)
  }
}

Answer 2

Нашел как.

Сначала настройте текст titleLabel (из-за стилей, т. Е. Полужирный, курсив и т. Д.). Затем используйте setTitleEdgeInsets с учетом ширины вашего изображения:

[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setTitle:title forState:UIControlStateNormal];
[button.titleLabel setFont:[UIFont boldSystemFontOfSize:10.0]];

// Left inset is the negative of image width.
[button setTitleEdgeInsets:UIEdgeInsetsMake(0.0, -image.size.width, -25.0, 0.0)]; 

После этого используйте setTitleEdgeInsets с учетом ширины границ текста:

[button setImage:image forState:UIControlStateNormal];

// Right inset is the negative of text bounds width.
[button setImageEdgeInsets:UIEdgeInsetsMake(-15.0, 0.0, 0.0, -button.titleLabel.bounds.size.width)];

Теперь изображение и текст будут центрированы (в этом примере изображение появляется над текстом).

Приветствие.

Answer 3

Вы можете сделать это с этим расширением Swift, которое было частично основано на ответе Джесси Кроссена:

extension UIButton {
  func centerLabelVerticallyWithPadding(spacing:CGFloat) {
    // update positioning of image and title
    let imageSize = self.imageView.frame.size
    self.titleEdgeInsets = UIEdgeInsets(top:0,
                                        left:-imageSize.width,
                                        bottom:-(imageSize.height + spacing),
                                        right:0)
    let titleSize = self.titleLabel.frame.size
    self.imageEdgeInsets = UIEdgeInsets(top:-(titleSize.height + spacing),
                                        left:0,
                                        bottom: 0,
                                        right:-titleSize.width)

    // reset contentInset, so intrinsicContentSize() is still accurate
    let trueContentSize = CGRectUnion(self.titleLabel.frame, self.imageView.frame).size
    let oldContentSize = self.intrinsicContentSize()
    let heightDelta = trueContentSize.height - oldContentSize.height
    let widthDelta = trueContentSize.width - oldContentSize.width
    self.contentEdgeInsets = UIEdgeInsets(top:heightDelta/2.0,
                                          left:widthDelta/2.0,
                                          bottom:heightDelta/2.0,
                                          right:widthDelta/2.0)
  }
}

Определяет функцию centerLabelVerticallyWithPadding, которая соответствующим образом устанавливает заголовок и вставки изображения.

Он также устанавливает contentEdgeInsets, что, по моему мнению, необходимо для обеспечения правильной работы intrinsicContentSize, что потребует использования автоматической компоновки.

Я считаю, что все решения, которые подкласс UIButton, технически незаконны, так как вы не должны подкласс управления UIKit управления. Т.е. теоретически они могут сломаться в будущих выпусках.

Answer 4

Редактировать: Обновлено для Swift 3

Если вы ищете быстрое решение ответа Джесси Кроссена, вы можете добавить его в подкласс UIButton:

override func layoutSubviews() {

    let spacing: CGFloat = 6.0

    // lower the text and push it left so it appears centered
    //  below the image
    var titleEdgeInsets = UIEdgeInsets.zero
    if let image = self.imageView?.image {
        titleEdgeInsets.left = -image.size.width
        titleEdgeInsets.bottom = -(image.size.height + spacing)
    }
    self.titleEdgeInsets = titleEdgeInsets

    // raise the image and push it right so it appears centered
    //  above the text
    var imageEdgeInsets = UIEdgeInsets.zero
    if let text = self.titleLabel?.text, let font = self.titleLabel?.font {
        let attributes = [NSFontAttributeName: font]
        let titleSize = text.size(attributes: attributes)
        imageEdgeInsets.top = -(titleSize.height + spacing)
        imageEdgeInsets.right = -titleSize.width
    }
    self.imageEdgeInsets = imageEdgeInsets

    super.layoutSubviews()
}

Answer 5

Я сделал метод для ответа @ TodCunningham

 -(void) AlignTextAndImageOfButton:(UIButton *)button
 {
   CGFloat spacing = 2; // the amount of spacing to appear between image and title
   button.imageView.backgroundColor=[UIColor clearColor];
   button.titleLabel.lineBreakMode = UILineBreakModeWordWrap;
   button.titleLabel.textAlignment = UITextAlignmentCenter;
   // get the size of the elements here for readability
   CGSize imageSize = button.imageView.frame.size;
   CGSize titleSize = button.titleLabel.frame.size;

  // lower the text and push it left to center it
  button.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, - (imageSize.height   + spacing), 0.0);

  // the text width might have changed (in case it was shortened before due to 
  // lack of space and isn't anymore now), so we get the frame size again
   titleSize = button.titleLabel.frame.size;

  // raise the image and push it right to center it
  button.imageEdgeInsets = UIEdgeInsetsMake(- (titleSize.height + spacing), 0.0, 0.0, -     titleSize.width);
 }

Answer 6

Здесь есть несколько замечательных примеров, но я не мог заставить это работать во всех случаях, когда также имел дело с несколькими строками текста (перенос текста). Чтобы наконец заставить его работать, я объединил пару приемов:

1. Я использовал пример Джесси Кроссен выше. Однако я установил высоту текста выдать и я добавил возможность указать горизонтальное поле для текста. Поле полезно, когда текст переносится, чтобы он не попадал край кнопки:

   // the space between the image and text
   CGFloat spacing = 10.0;
   float   textMargin = 6;
   
   // get the size of the elements here for readability
   CGSize  imageSize   = picImage.size;
   CGSize  titleSize   = button.titleLabel.frame.size;
   CGFloat totalHeight = (imageSize.height + titleSize.height + spacing);      // get the height they will take up as a unit
   
   // lower the text and push it left to center it
   button.titleEdgeInsets = UIEdgeInsetsMake( 0.0, -imageSize.width +textMargin, - (totalHeight - titleSize.height), +textMargin );   // top, left, bottom, right
   
   // the text width might have changed (in case it was shortened before due to 
   // lack of space and isn't anymore now), so we get the frame size again
   titleSize = button.titleLabel.bounds.size;
   
   button.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height + spacing), 0.0, 0.0, -titleSize.width );     // top, left, bottom, right        
   

2. Убедитесь, что вы установили текстовую метку для переноса

   button.titleLabel.numberOfLines = 2; 
   button.titleLabel.lineBreakMode = UILineBreakModeWordWrap;
   button.titleLabel.textAlignment = UITextAlignmentCenter;
   

3. Это будет в основном работать сейчас. Тем не менее, у меня были кнопки, которые не отображали их изображение правильно. Изображение было смещено далеко вправо или влево (не по центру). Поэтому я использовал метод переопределения макета UIButton для центрирования imageView.

   @interface CategoryButton : UIButton
   @end
   
   @implementation CategoryButton
   
   - (void)layoutSubviews
   {
       // Allow default layout, then center imageView
       [super layoutSubviews];
   
       UIImageView *imageView = [self imageView];
       CGRect imageFrame = imageView.frame;
       imageFrame.origin.x = (int)((self.frame.size.width - imageFrame.size.width)/ 2);
       imageView.frame = imageFrame;
   }
   @end
   

Answer 7

Подкласс UIButton

- (void)layoutSubviews {
    [super layoutSubviews];
    CGFloat spacing = 6.0;
    CGSize imageSize = self.imageView.image.size;
    CGSize titleSize = [self.titleLabel sizeThatFits:CGSizeMake(self.frame.size.width, self.frame.size.height - (imageSize.height + spacing))];
    self.imageView.frame = CGRectMake((self.frame.size.width - imageSize.width)/2, (self.frame.size.height - (imageSize.height+spacing+titleSize.height))/2, imageSize.width, imageSize.height);
    self.titleLabel.frame = CGRectMake((self.frame.size.width - titleSize.width)/2, CGRectGetMaxY(self.imageView.frame)+spacing, titleSize.width, titleSize.height);
}

Answer 8

Не боритесь с системой. Если ваши макеты становятся слишком сложными для управления с помощью Interface Builder + возможно некоторого простого кода конфигурации, сделайте макеты вручную более простым способом, используя layoutSubviews - вот для чего он! Все остальное будет равносильно взлому.

Создайте подкласс UIButton и переопределите его метод layoutSubviews для программного выравнивания текста и изображения. Или используйте что-то вроде https://github.com/nickpaulson/BlockKit/blob/master/Source/UIView-BKAdditions.h, чтобы вы могли реализовать layoutSubviews, используя блок.

Answer 9

Нет ничего плохого в других ответах, однако я просто хотел отметить, что такое же поведение может быть реализовано визуально в XCode, используя ноль строк кода. Это решение полезно, если вам не нужно рассчитанное значение или вы строите с раскадровкой / XIB (в противном случае применяются другие решения).

Примечание. Я понимаю, что вопрос ОП требует кода. Я просто предоставляю этот ответ для полноты и в качестве логической альтернативы для тех, кто использует раскадровки / XIBS.

Чтобы изменить интервал на изображении, заголовке и представлении содержимого кнопки с помощью вставок краев, можно выбрать кнопку / элемент управления и открыть инспектор атрибутов. Прокрутите вниз к середине инспектора и найдите раздел для вставок Edge.

Можно также получить доступ к конкретным краевым вставкам и изменить их для заголовка, изображения или содержимого.

Answer 10

С этим фрагментом кода вы получите что-то вроде этого

extension UIButton {
    func alignTextUnderImage() {
        guard let imageView = imageView else {
                return
        }
        self.contentVerticalAlignment = .Top
        self.contentHorizontalAlignment = .Center
        let imageLeftOffset = (CGRectGetWidth(self.bounds) - CGRectGetWidth(imageView.bounds)) / 2//put image in center
        let titleTopOffset = CGRectGetHeight(imageView.bounds) + 5
        self.imageEdgeInsets = UIEdgeInsetsMake(0, imageLeftOffset, 0, 0)
        self.titleEdgeInsets = UIEdgeInsetsMake(titleTopOffset, -CGRectGetWidth(imageView.bounds), 0, 0)
    }
}