Autolayout - внутрішній розмір UIButton не включає вставки заголовків

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

Якщо я встановив зображення як " button.image, то, здається, внутрішній розмір знову спричиняє це.

Однак якщо я налаштував titleEdgeInsetsкнопку, макет цього не враховує, а замість цього обрізає назву кнопки.

Як я можу забезпечити, щоб внутрішня ширина кнопки враховувала вкладку?

Редагувати:

Я використовую наступне:

[self.backButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 5, 0, 0)];

Мета - додати деякий відрив між зображенням і текстом.

Ви можете вирішити це, не змінюючи жодних методів або встановлюючи довільне обмеження по ширині. Ви можете це зробити в Interface Builder наступним чином.

• Внутрішня ширина кнопки походить від ширини заголовка плюс ширини піктограми плюс лівого та правого крайового вставки вмісту .

• Якщо на кнопці є зображення і текст, вони зосереджені як група, без прокладки між ними.

• Якщо ви додаєте ліву вставку вмісту, вона обчислюється відносно тексту, а не тексту + піктограми.

• Якщо встановити негативну ліву вставку, зображення витягується зліва, але загальна ширина кнопки не впливає.

• Якщо встановити негативну ліву вставку зображення, фактичний макет використовує половину цього значення. Отже, щоб отримати ліву вставку -20 балів, ви повинні використовувати значення лівої вставки -40 балів у програмі Interface Builder.

Таким чином, ви надаєте достатньо великий лівий вкладений вміст, щоб створити простір для обох бажаних лівих вкладок і для внутрішньої прокладки між піктограмою та текстом, а потім перемістіть піктограму вліво, подвоївши кількість необхідної накладки між піктограмою та текстом. Результат - кнопка з рівними лівими та правими вставками вмісту, а також пара тексту та значків, по центру якої є група, із певним накладом між ними.

Деякі приклади значень:

// Produces a button with the layout:
// |-20-icon-10-text-20-|
// AutoLayout intrinsic width works as you'd desire.
button.contentEdgeInsets = UIEdgeInsetsMake(10, 30, 10, 20)
button.imageEdgeInsets = UIEdgeInsetsMake(0, -20, 0, 0)

Ви можете дозволити це працювати в Interface Builder (без написання будь-якого коду), використовуючи поєднання негативних та позитивних вкладів заголовка та вмісту.

Оновлення : Xcode 7 має помилку, в яку не можна вводити негативні значення уRight поле Inset, але ви можете використовувати ступінчасте управління поруч із ним, щоб зменшити значення. (Спасибі Стюарт)

Це додасть 8pt проміжку між зображенням і заголовком і збільшить внутрішню ширину кнопки на стільки ж. Подобається це:

Чому б не замінити intrinsicContentSizeметод на UIView? Наприклад:

- (CGSize) intrinsicContentSize
{
    CGSize s = [super intrinsicContentSize];

    return CGSizeMake(s.width + self.titleEdgeInsets.left + self.titleEdgeInsets.right,
                      s.height + self.titleEdgeInsets.top + self.titleEdgeInsets.bottom);
}

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

Ви не вказали, як ви встановлюєте вставки, тому я гадаю, що ви використовуєте titleEdgeInsets, тому що я бачу той же ефект, який ви отримуєте. Якщо я використовую contentEdgeInsets, замість цього він працює належним чином.

- (IBAction)ChangeTitle:(UIButton *)sender {
    self.button.contentEdgeInsets = UIEdgeInsetsMake(0,20,0,20);
    [self.button setTitle:@"Long Long Title" forState:UIControlStateNormal];
}

А для Свіфт працював так:

extension UIButton {
    override open var intrinsicContentSize: CGSize {
        let intrinsicContentSize = super.intrinsicContentSize

        let adjustedWidth = intrinsicContentSize.width + titleEdgeInsets.left + titleEdgeInsets.right
        let adjustedHeight = intrinsicContentSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom

        return CGSize(width: adjustedWidth, height: adjustedHeight)
    }
}

Love U Swift

Цей потік трохи старий, але я просто натрапив на це сам і зміг його вирішити, використовуючи негативну вставку. Наприклад, замініть потрібні значення прокладки тут:

UIButton* myButton = [[UIButton alloc] init];
// setup some autolayout constraints here
myButton.titleEdgeInsets = UIEdgeInsetsMake(-desiredBottomPadding,
                                            -desiredRightPadding,
                                            -desiredTopPadding,
                                            -desiredLeftPadding);

У поєднанні з правильними обмеженнями для автоматичного розміщення, ви закінчуєте кнопку автоматичного зміни розміру, яка містить зображення та текст! Видно нижче та desiredLeftPaddingвстановлено 10.

Ви можете бачити, що фактичний кадр кнопки не охоплює мітку (оскільки мітка зміщена на 10 точок праворуч, поза межами меж), але ми досягли 10 точок прокладки між текстом і малюнком.

Для Swift 3 на основі відповіді pegpeg :

extension UIButton {

    override open var intrinsicContentSize: CGSize {

        let intrinsicContentSize = super.intrinsicContentSize

        let adjustedWidth = intrinsicContentSize.width + titleEdgeInsets.left + titleEdgeInsets.right
        let adjustedHeight = intrinsicContentSize.height + titleEdgeInsets.top + titleEdgeInsets.bottom

        return CGSize(width: adjustedWidth, height: adjustedHeight)

    }

}

Все вище не працювало для iOS 9+ , що я робив:

• Додайте обмеження по ширині (для мінімальної ширини, якщо на кнопці немає тексту. Кнопка автоматично масштабується, якщо текст наданий)
• встановити відношення до великого чи рівного

Тепер для додавання рамки навколо кнопки просто скористайтеся методом:

button.contentEdgeInsets = UIEdgeInsetsMake(0,20,0,20);

Я хотів додати пробіл у 5 кпт між моєю піктограмою UIButton та міткою. Ось як я цього досяг:

UIButton *infoButton = [UIButton buttonWithType:UIButtonTypeCustom];
// more button config etc
infoButton.contentEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 5);
infoButton.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 0, -5);

Те, як contentEdgeInsets, titleEdgeInsets і imageEdgeInsets співвідносяться один з одним, вимагає трохи віддачі та прийому від кожного вставки. Тож якщо ви додасте кілька вводів зліва від заголовка, ви повинні додати негативну вставку праворуч та забезпечити трохи більше місця (через позитивну вставку) праворуч на вміст.

Додавши правильну вставку вмісту, яка відповідає зміні вставки заголовка, мій текст не виходить за межі кнопки.

Опція також доступна у програмі для створення інтерфейсів. Див. Вкладку. Я встановив ліворуч і праворуч на 3. Працює як шарм.

Я використовую рішення - додати обмеження на ширину кнопки. Потім десь під час ініціалізації після встановлення тексту оновіть обмеження ширини так:

self.buttonWidthConstraint.constant = self.shareButton.intrinsicContentSize.width + 8;

Де 8 - це все, що є вашою вставкою.

виклик sizeToFit () гарантує, що contentEdgeInset набуває чинності

extension UIButton {

   open override func draw(_ rect: CGRect) { 
       self.contentEdgeInsets = UIEdgeInsets(top: 10, left: 40, bottom: 10, right: 40)
       self.sizeToFit()
   }
}