Раскладушка, позиционирующая текст под изображением внутри кнопки

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

Как сделать эти изменения с помощью раскадровки?

Я хочу это:

Теперь я получаю следующее:

Ответ 1

Да, вы можете сделать это из раскадровки, не написав никакой логики.

1) Выберите кнопку и перейдите к Attribute Inspector в раскадровке.

2) Назначьте изображение кнопке. (Не используйте фоновое изображение)

3) Настройте текст заголовка на эту кнопку.

4) Теперь вам нужно установить edge и Inset, чтобы сначала выбрать изображение с края и установить Inset по мере необходимости, а затем выбрать заголовок с края и установить вставку в соответствии с вашими потребностями.

Надеюсь, что это поможет.

Ответ 2

Если вы ищете вывод, подобный этому

1) Выберите кнопку и перейдите в Инспектор атрибутов в своем раскадровке, чтобы получить этот результат от размера кнопки 50 * 50

2) Теперь задайте вставки заголовка кнопки

Ответ 3

Я написал расширение, которое сделает все за вас, совместимо с Swift 4.

public extension UIButton {

    func alignTextBelow(spacing: CGFloat = 6.0) {
        if let image = self.imageView?.image {
            let imageSize: CGSize = image.size
            self.titleEdgeInsets = UIEdgeInsetsMake(spacing, -imageSize.width, -(imageSize.height), 0.0)
            let labelString = NSString(string: self.titleLabel!.text!)
            let titleSize = labelString.size(withAttributes: [NSAttributedStringKey.font: self.titleLabel!.font])
            self.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height + spacing), 0.0, 0.0, -titleSize.width)
        }
    }

}

Где spacing - это расстояние между изображением и текстом.

Ответ 4

Вы можете легко и визуально достичь выравнивания, используя свойство Edge кнопки из окна свойств (Attribute Inspector), вы можете изменить значения inset Title и Image согласно вашей потребности, см. изображение ниже

Надеюсь, что это поможет.

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

Ответ 5

Swift 4.2 совместимый код здесь, вам просто нужно вызвать эту функцию

  public extension UIButton
  {

    func alignTextUnderImage(spacing: CGFloat = 6.0)
    {
        if let image = self.imageView?.image
        {
            let imageSize: CGSize = image.size
            self.titleEdgeInsets = UIEdgeInsets(top: spacing, left: -imageSize.width, bottom: -(imageSize.height), right: 0.0)
            let labelString = NSString(string: self.titleLabel!.text!)
            let titleSize = labelString.size(withAttributes: [NSAttributedString.Key.font: self.titleLabel!.font])
            self.imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
        }
    }
}

Ответ 6

изысканный

func alignTextUnderImage(spacing: CGFloat = 6.0) {
    guard let image = imageView?.image, let label = titleLabel,
      let string = label.text else { return }

      titleEdgeInsets = UIEdgeInsets(top: spacing, left: -image.size.width, bottom: -image.size.height, right: 0.0)
      let titleSize = string.size(withAttributes: [NSAttributedString.Key.font: label.font])
      imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
  }

Ответ 7

Вы не можете изменить макет непосредственно в UIButton, но вы можете попробовать использовать эти свойства в UIButton:

UIButton *button = ...
button.titleEdgeInsets = UIEdgeInsetsMake(....);
button.imageEdgeInsets = UIEdgeInsetsMake(....);

Если это не поможет, я бы рекомендовал подкласс из UIResponder и создать свой собственный компонент и сделать свой собственный макет по мере необходимости.

Ответ 8

Спасибо, @rbiard. Другой обходной путь, когда вы разрабатываете многоязычное мобильное приложение и когда используете UISemanticContentAttribute (справа налево и слева направо). Это должно работать:

func alignTextBelow(spacing: CGFloat = 10.0) {

    //when the selected language is English
    if L102Language.currentAppleLanguage() == "en" {
        guard let image = imageView?.image, let label = titleLabel,
            let string = label.text else { return }

        titleEdgeInsets = UIEdgeInsets(top: spacing, left: -image.size.width, bottom: -image.size.height, right: 0.0)
        let titleSize = string.size(withAttributes: [NSAttributedString.Key.font: label.font])
        imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
    } else {
        //When selecting a right to left language. For example, Arabic
        guard let image = imageView?.image, let label = titleLabel,
            let string = label.text else { return }

        titleEdgeInsets = UIEdgeInsets(top: spacing, left: 0, bottom: -image.size.height, right: -image.size.width)
        let titleSize = string.size(withAttributes: [NSAttributedString.Key.font: label.font])
        imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: -titleSize.width, bottom: 0.0, right: 0)
    }
}