Выравнивание текста и изображения на UIButton с помощью imageEdgeInsets и titleEdgeInsets - PullRequest
Новая
       6

Выравнивание текста и изображения на UIButton с помощью imageEdgeInsets и titleEdgeInsets

234 голосов
/ 30 декабря 2010

Я хотел бы разместить значок слева от двух строк текста так, чтобы между изображением и началом текста было около 2-3 пикселей. Сам элемент управления выровнен по центру по горизонтали (устанавливается через Interface Builder)

Кнопка будет выглядеть примерно так: 

|                  |
|[Image] Add To    |
|        Favorites |

Я пытаюсь настроить это с contentEdgeInset, imageEdgeInsets и titleEdgeInsets безрезультатно. Я понимаю, что отрицательное значение расширяет край, а положительное значение уменьшает его, чтобы приблизить его к центру.

Я пытался: 

[button setTitleEdgeInsets:UIEdgeInsetsMake(0, -image.size.width, 0, 0)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width, 0, 0)];

но это не отображает это правильно. Я настраивал значения, но переход от -5 к -10 в левом значении вставки, кажется, не перемещает его ожидаемым образом. -10 будет сдвигать текст полностью влево, поэтому я ожидал, что -5 сдвинет его наполовину с левой стороны, но это не так.

Какая логика у вставок? Я не знаком с размещением изображений и соответствующей терминологией.

Я использовал этот вопрос в качестве справочного материала, но что-то в моих значениях неверно. UIButton: как центрировать изображение и текст с помощью imageEdgeInsets и titleEdgeInsets?

Ответы [ 13 ]

1 голос
/ 10 ноября 2014

Вот простой пример того, как использовать imageEdgeInsets. Это сделает кнопку 30x30 с областью хитбайта на 10 пикселей больше вокруг (50x50) 

    var expandHittableAreaAmt : CGFloat = 10
    var buttonWidth : CGFloat = 30
    var button = UIButton.buttonWithType(UIButtonType.Custom) as UIButton
    button.frame = CGRectMake(0, 0, buttonWidth+expandHittableAreaAmt, buttonWidth+expandHittableAreaAmt)
    button.imageEdgeInsets = UIEdgeInsetsMake(expandHittableAreaAmt, expandHittableAreaAmt, expandHittableAreaAmt, expandHittableAreaAmt)
    button.setImage(UIImage(named: "buttonImage"), forState: .Normal)
    button.addTarget(self, action: "didTouchButton:", forControlEvents:.TouchUpInside)
0 голосов
/ 05 февраля 2019

Версия решения Swift 4.2 будет иметь следующий вид: 

let spacing: CGFloat = 10 // the amount of spacing to appear between image and title
self.button?.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: spacing)
self.button?.titleEdgeInsets = UIEdgeInsets(top: 0, left: spacing, bottom: 0, right: 0)
0 голосов
/ 04 сентября 2017

Элегантный способ в Swift 3 и лучше понять: 

override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
    let leftMargin:CGFloat = 40
    let imgWidth:CGFloat = 24
    let imgHeight:CGFloat = 24
    return CGRect(x: leftMargin, y: (contentRect.size.height-imgHeight) * 0.5, width: imgWidth, height: imgHeight)
}

override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
    let leftMargin:CGFloat = 80
    let rightMargin:CGFloat = 80
    return CGRect(x: leftMargin, y: 0, width: contentRect.size.width-leftMargin-rightMargin, height: contentRect.size.height)
}
override func backgroundRect(forBounds bounds: CGRect) -> CGRect {
    let leftMargin:CGFloat = 10
    let rightMargin:CGFloat = 10
    let topMargin:CGFloat = 10
    let bottomMargin:CGFloat = 10
    return CGRect(x: leftMargin, y: topMargin, width: bounds.size.width-leftMargin-rightMargin, height: bounds.size.height-topMargin-bottomMargin)
}
override func contentRect(forBounds bounds: CGRect) -> CGRect {
    let leftMargin:CGFloat = 5
    let rightMargin:CGFloat = 5
    let topMargin:CGFloat = 5
    let bottomMargin:CGFloat = 5
    return CGRect(x: leftMargin, y: topMargin, width: bounds.size.width-leftMargin-rightMargin, height: bounds.size.height-topMargin-bottomMargin)
}
Страница:
...