it-roy-ru.com

Как я могу увеличить площадь касания для UIButton?

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

  1. увеличить размер изображения, то есть разместить прозрачную область вокруг изображения. Это не хорошо, потому что, когда вы размещаете изображение, вы должны помнить о дополнительной прозрачной границе.
  2. используйте CGRectInset и увеличьте размер. Это не очень хорошо работает с автоматической разметкой, потому что при использовании автоматической разметки она вернется к исходному размеру изображения.

Помимо двух вышеуказанных подходов, есть ли лучшее решение для увеличения площади ответвления кнопки UIB?  

34
Sven Bauer

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

button.contentEdgeInsets = UIEdgeInsets (вверху: 12, слева: 16, снизу: 12, справа: 16)

// или, если вы специально хотите настроить изображение, используйте button.imageEdgeInsets

В конструкторе интерфейса это будет выглядеть так:

interface builder

41
Travis

Очень просто. Создайте пользовательский класс UIButton. Затем переопределите метод pointInside ... и измените значение по своему усмотрению.

#import "CustomButton.h"

@implementation CustomButton

-(BOOL) pointInside:(CGPoint)point withEvent:(UIEvent *)event
{
    CGRect newArea = CGRectMake(self.bounds.Origin.x - 10, self.bounds.Origin.y - 10, self.bounds.size.width + 20, self.bounds.size.height + 20);

    return CGRectContainsPoint(newArea, point);
}
@end

Это займет больше 10 точек касания области для каждой стороны.

10
Syed Sadrul Ullah Sahad

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

Примечание: после Xcode8, настройка содержимого вставки доступна в размере inspecor  UIEdgeInseton UIButton

Или вы также можете использовать просмотр изображения с жестом касания для действия при касании просмотра изображения. Обязательно установите флажок «Взаимодействие с пользователем включено» для просмотра изображений на раскадровке, чтобы жест работал ……. Сделайте так, чтобы изображение отображалось больше, чем изображение, чтобы установить его, и установите для него изображение ……. Теперь установите режим просмотра изображений, чтобы центрировать его на раскадровке./Интерфейсный конструктор.

 Using image view with tap action and image set on it as center mode Вы можете нажать на изображение, чтобы сделать действие.

Надеюсь, это будет полезно.

7
user2094867

Swift 4 • Xcode 9

Вы можете выбрать программно как

Для изображения -

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

Для Заголовка -

button.titleEdgeInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
2
Jack

Я подтверждаю, что решение Syed хорошо работает даже с autolayout. Вот версия Swift 4.x:

import UIKit

class BeepSmallButton: UIButton {

    // MARK: - Functions

    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        let newArea = CGRect(
            x: self.bounds.Origin.x - 5.0,
            y: self.bounds.Origin.y - 5.0,
            width: self.bounds.size.width + 10.0,
            height: self.bounds.size.height + 20.0
        )
        return newArea.contains(point)
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}
1
Glenn

Подкласс UIButton и добавить эту функцию 

override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
    let verticalInset = CGFloat(10)
    let horizontalInset = CGFloat(10)

    let largerArea = CGRect(
        x: self.bounds.Origin.x - horizontalInset,
        y: self.bounds.Origin.y - verticalInset,
        width: self.bounds.size.width + horizontalInset*2,
        height: self.bounds.size.height + verticalInset*2
    )

    return largerArea.contains(point)
}
0
Lucas Chwe