Як налаштувати розмір зображення UIButton?


158

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

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

Однак це заповнює зображення до повної кнопки, як зробити зображення менше?


6
Чи намагалися ви зменшити зображення (LOL)?
— CodaFi

1
@CodaFi вірно, ви, як правило, надавати активи в потрібному розмірі, оскільки це зменшує будь-яку роботу для процесора, використовує менше пам'яті і, швидше за все, буде виглядати краще, оскільки ви потенційно не
— вводите

Крім того, ви можете зробити кнопку відповідно до розміру зображення (або навпаки). Чому у вас є велика кнопка ... з невеликим зображенням у ній. Просто додайте потрібне зображення, ось для чого потрібні спеціальні кнопки або ви можете поясніть логіку, яку ви хочете застосувати, щоб інші мали чітке уявлення.
— Абхішек Сінгх

Відповіді:


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не працює
— Seong Lee

Економте собі час і переконайтеся, що ви встановлюєте зображення, а не фонове зображення! @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 для іконок. Дякую!
— Енеко Алонсо

38

Ви також можете це зробити з конструктора інтерфейсів, як це.

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

Я думаю, що це корисно.


26

Якщо ваше зображення занадто велике (і ви не можете / не хочете просто зробити зображення менше), поєднання перших двох відповідей чудово працює.

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

Якщо ви не знайдете вставки зображення правильно, зображення буде перекошене, не змінюючи contentMode.


23

Ви можете використовувати imageEdgeInsetsвластивість Поля вставки або виходу прямокутника навколо зображення кнопки.

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

Позитивне значення зменшується, або вставки цього краю - переміщуються. Від'ємне значення розширює або перекреслює цей край.


17

Ось інше рішення для масштабування imageView UIButton.

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

Ти врятував мені день. Я просто хотів масштабувати своє зображення всередині кнопки. Ні вставки нічого, дякую!
— Педро Антоніо


8

Швидкий 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.