web-dev-qa-db-fra.com

Comment puis-je augmenter la surface de frappe pour UIButton?

J'utilise UIButton avec la mise en page automatique. Lorsque les images sont petites, la zone de prise est également réduite. Je pourrais imaginer plusieurs approches pour résoudre ce problème: 

  1. augmentez la taille de l'image, c'est-à-dire placez une zone transparente autour de l'image. Ce n'est pas bon, car lorsque vous positionnez l'image, vous devez garder à l'esprit la bordure transparente supplémentaire.
  2. utilisez CGRectInset et augmentez la taille. Cela ne fonctionne pas bien avec la mise en page automatique, car celle-ci revient à la taille d'origine de l'image.

Outre les deux approches ci-dessus, existe-t-il une meilleure solution pour augmenter la surface de prise d'un UIButton?  

iosobjective-cswiftuibutton
34
Sven Bauer

Vous pouvez simplement ajuster le contenu du bouton pour obtenir la taille souhaitée. En code, cela ressemblera à ceci:

button.contentEdgeInsets = UIEdgeInsets (en haut: 12, à gauche: 16, en bas: 12, à droite: 16)

// ou si vous souhaitez spécifiquement ajuster l'image, utilisez plutôt button.imageEdgeInsets

Dans le constructeur d'interface, cela ressemblera à ceci:

interface builder

41
Travis

Très facile. Créez une classe UIButton personnalisée. Puis substituez la méthode pointInside ... et modifiez la valeur à votre guise.

#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

Il faudra plus de zone tactile de 10 points pour tous les côtés.

10
Syed Sadrul Ullah Sahad

Vous pouvez définir le bouton EdgeInsets dans le storyboard ou via le code. La taille du bouton doit être plus grande en hauteur et en largeur que l'image définie pour le bouton.

Remarque: après Xcode8, la définition du contenu est disponible dans Inspecor  UIEdgeInseton UIButton

Vous pouvez également utiliser la vue d'image avec le geste de toucher pour agir tout en tapant sur la vue d'image. Cochez la case Interaction utilisateur activée pour que l’image visualise le storyboard afin que les gestes fonctionnent . Agrandissez l’affichage de l’image plus grande que l’image et réglez-la sur l’image./constructeur d'interface.

 Using image view with tap action and image set on it as center mode Vous pouvez appuyer sur l'image pour effectuer une action.

J'espère que ça vous sera utile.

7
user2094867

Swift 4 • Xcode 9

Vous pouvez sélectionner par programme comme

Pour image - 

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

Pour le titre - 

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

Je confirme que la solution de Syed fonctionne bien, même avec l'autolayout. Voici la version 4.x de Swift:

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

Sous-classe UIButton et ajouter cette fonction 

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