Как настроить размер изображения UIButton?


158

Как я могу отрегулировать размер изображения UIButton? Я устанавливаю изображение так:

[myLikesButton setImage:[UIImage imageNamed:@"icon-heart.png"] forState:UIControlStateNormal];

Однако это заполняет изображение до полной кнопки, как я могу уменьшить изображение?


6
Вы пытались уменьшить изображение (LOL)?
CodaFi

1
@ CodaFi прав: вы должны предоставлять ресурсы в нужном размере, так как это сокращает любую нагрузку на процессор, использует меньше памяти и, скорее всего, будет выглядеть лучше, поскольку вы потенциально не можете использовать какие-либо артефакты масштабирования ...
Paul.s

Также вы можете сделать кнопку размером изображения (или наоборот). Почему у вас есть большая кнопка ... с маленьким изображением в ней. Просто добавьте изображение, которое вы хотите, вот для чего нужны пользовательские кнопки, или вы можете объясните логику, которую вы хотите реализовать, чтобы другие имели четкое представление.
Абхишек Сингх

Ответы:


243

Если я правильно понимаю, что вы пытаетесь сделать, вам нужно поиграть со вставкой края изображения кнопок. Что-то вроде:

myLikesButton.imageEdgeInsets = UIEdgeInsets(top, left, bottom, right)

96

Ответ Тима правильный, однако я хотел добавить еще одно предложение, потому что в моем случае было более простое решение.

Я хотел установить UIButtonвставки изображений, потому что я не понимал, что могу установить режим содержимого для кнопок UIImageView, что исключило бы необходимость использования UIEdgeInsets и жестко закодированных значений в целом. Просто получите доступ к основному представлению изображения на кнопке и установите режим содержимого:

myButton.imageView.contentMode = UIViewContentModeScaleAspectFit;

Видите, UIButton не слушает настройки режима контента?

Свифт 3

myButton.imageView?.contentMode = .scaleAspectFit

1
как сделать то же самое для backgroundImage?
Сергей Саакян

myButton.backgroundImageView? .contentMode = .scaleAspectFit
Andrea.Ferrando

@ Andrea.Ferrando button.backgroundImageView.contentModeне работает
Сон Ли

Сэкономьте время и убедитесь, что вы устанавливаете изображение, а не фоновое изображение! @SeongLee правильно, вы не можете манипулировать фоновым изображением с помощью contentMode или EdgeInserts
redPanda

42

Свифт 3:

button.setImage(UIImage(named: "checkmark_white"), for: .normal)
button.contentVerticalAlignment = .fill
button.contentHorizontalAlignment = .fill
button.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)

6
Это прекрасно сработало для меня. Я создал значок PDF в Inkscape, и полученные contentVerticalAlignment/contentHorizontalAlignmentопции позволили мне масштабировать его так, как я надеялся. Спасибо за публикацию.
Адриан

2
настройка contentHorizontalAlignmentи contentVerticalAlignmentсделал трюк
Том Кнапен

1
Это решение прекрасно работает при использовании PDF-иконок для значков. Спасибо!
Энеко Алонсо


26

Если ваше изображение слишком велико (и вы не можете / не хотите просто уменьшить его), комбинация первых двух ответов работает отлично.

addButton.imageView?.contentMode = .scaleAspectFit
addButton.imageEdgeInsets = UIEdgeInsetsMake(15.0, 15.0, 15.0, 5.0)

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


23

Вы можете использовать imageEdgeInsetsсвойство Inset или outset margin для прямоугольника вокруг изображения кнопки.

 [self.btn setImageEdgeInsets:UIEdgeInsetsMake(6, 6, 6, 6)];

Положительное значение сокращает, или вставляет, этот край - движущийся. Отрицательное значение расширяет или опускает этот край.


17

Вот другое решение для масштабирования imageView UIButton.

button.imageView?.layer.transform = CATransform3DMakeScale(0.8, 0.8, 0.8)

Ты спас мой день. Я просто хотел масштабировать свое изображение внутри кнопки. Нет вставок нет ничего, спасибо!
Педро Антонио

15

Вот версия Swift:

myButton.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

8

Swift 4

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

addButton.imageView?.contentMode = .scaleAspectFit
addButton.imageEdgeInsets = UIEdgeInsetsMake(10.0, 0.0, 10.0, 0.0)

Это вызвало EXC_BAD_ACCESSошибку при вызове из override func layoutSubviews().
Эндрю Кирна

7

С помощью ответа Тима С. я смог создать расширение с UIButtonиспользованием Swift, которое позволяет вам указывать рамку изображения с помощью .setImage()функции с дополнительным frameпараметром.

extension UIButton{

    func setImage(image: UIImage?, inFrame frame: CGRect?, forState state: UIControlState){
        self.setImage(image, forState: state)

        if let frame = frame{
            self.imageEdgeInsets = UIEdgeInsets(
                top: frame.minY - self.frame.minY,
                left: frame.minX - self.frame.minX,
                bottom: self.frame.maxY - frame.maxY,
                right: self.frame.maxX - frame.maxX
            )
        }
    }

}

Используя это, если вы хотите установить кадр UIButtonдля CGRectMake(0, 0, 64, 64), и установить образ ней myImageс кадром CGRectMake(8, 8, 48, 48), вы можете использовать

let button: UIButton = UIButton(frame: CGRectMake(0, 0, 64, 64))
button.setImage(
    myImage,
    inFrame: CGRectMake(8, 8, 48, 48),
    forState: UIControlState.Normal
)

4
Вы должны if letвместо того, чтобы проверить, если frameесть, nilа затем принудительно развернуть его миллион раз .
fpg1503

7

При изменении размера значков с помощью UIEdgeInsetsMake(top, left, bottom, right)учитывайте размеры кнопок и способность UIEdgeInsetsMake работать с отрицательными значениями, как если бы они были положительными.

Пример: две кнопки высотой 100 и аспектом 1: 1.

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)

введите описание изображения здесь

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(45, 0, 45, 0)

введите описание изображения здесь

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(60, 0, 60, 0)

введите описание изображения здесь

Примеры 1 и 3 идентичны, так как ABS (100 - (40 + 40)) = ABS (100 - (60 + 60))


2

Свифт 3

Я установил ширину и высоту myButton на 40, и мой отступ от EdgeInsetsMake равен 15 со всех сторон. Я предлагаю добавить цвет фона для вашей кнопки, чтобы увидеть фактическое заполнение.

myButton.backgroundColor = UIColor.gray // sample color to check padding
myButton.imageView?.contentMode = .scaleAspectFit
myButton.imageEdgeInsets = UIEdgeInsetsMake(15, 15, 15, 15)

2

Один из подходов заключается в изменении размера UIImage в коде, как показано ниже. Примечание: этот код масштабируется только по высоте, но вы также можете легко настроить функцию по ширине.

let targetHeight = CGFloat(28)
let newImage = resizeImage(image: UIImage(named: "Image.png")!, targetHeight: targetHeight)
button.setImage(newImage, for: .normal)

fileprivate func resizeImage(image: UIImage, targetHeight: CGFloat) -> UIImage {
    // Get current image size
    let size = image.size

    // Compute scaled, new size
    let heightRatio = targetHeight / size.height
    let newSize = CGSize(width: size.width * heightRatio, height: size.height * heightRatio)
    let rect = CGRect(x: 0, y: 0, width: newSize.width, height: newSize.height)

    // Create new image
    UIGraphicsBeginImageContextWithOptions(newSize, false, 0)
    image.draw(in: rect)
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    // Return new image
    return newImage!
}

2

Обновлено для Swift> 5

установить размер:

button.frame = CGRect(x: 0, y: 0, width: 44, height: 44)

установить поля:

button.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

1

Обновлено для Swift 3

yourButtonName.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)

-6

я думаю, ваш размер изображения также соответствует размеру кнопки, тогда вы помещаете изображение в фон кнопки, например:

[myLikesButton setBackgroundImage:[UIImage imageNamed:@"icon-heart.png"] forState:UIControlStateNormal];

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.