ios - guideline - iPhone UIButton-posizione dell'immagine




xcode add textfield (9)

Basandosi su risposte precedenti. Se si desidera avere un margine tra l'icona e il titolo del pulsante, il codice deve cambiare leggermente per evitare di fluttuare dell'etichetta e dell'icona sopra i limiti dei pulsanti di dimensioni intrinseche.

let margin = CGFloat(4.0)
button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, 0, button.imageView.frame.size.width);
button.imageEdgeInsets = UIEdgeInsetsMake(0, button.titleLabel.frame.size.width, 0, -button.titleLabel.frame.size.width)
button.contentEdgeInsets = UIEdgeInsetsMake(0, margin, 0, margin)

L'ultima riga di codice è importante per il calcolo della dimensione intrinseca del contenuto per il layout automatico.

Ho un UIButton con il testo "Esplora l'app" e UIImage (>) In Interface Builder assomiglia a:

[ (>) Explore the app ]

Ma ho bisogno di mettere questa UIImage DOPO il testo:

[ Explore the app (>) ]

Come posso spostare la UIImage a destra?


Che dire della sottoclasse di UIButton e della sovrascrittura di layoutSubviews ?

Quindi post-elaborazione delle posizioni di self.imageView e self.titleLabel


Forzare "da destra a sinistra" per il pulsante non è un'opzione se la tua app supporta sia "da sinistra a destra" sia da "da destra a sinistra".

La soluzione che ha funzionato per me è una sottoclasse che può essere aggiunta al pulsante nello Storyboard e funziona bene con i vincoli (testati in iOS 11):

class ButtonWithImageAtEnd: UIButton {

    override func layoutSubviews() {
        super.layoutSubviews()

        if let imageView = imageView, let titleLabel = titleLabel {
            let padding: CGFloat = 15
            imageEdgeInsets = UIEdgeInsets(top: 5, left: titleLabel.frame.size.width+padding, bottom: 5, right: -titleLabel.frame.size.width-padding)
            titleEdgeInsets = UIEdgeInsets(top: 0, left: -imageView.frame.width, bottom: 0, right: imageView.frame.width)
        }

    }

}

Dove 'padding' sarebbe lo spazio tra il titolo e l'immagine.


Impostare imageEdgeInset e titleEdgeInset per spostare i componenti all'interno dell'immagine. È anche possibile creare un pulsante utilizzando tali elementi grafici di dimensioni complete e utilizzarli come immagine di sfondo per il pulsante (quindi utilizzare titleEdgeInsets per spostare il titolo attorno).


La mia soluzione a questo è abbastanza semplice

[button sizeToFit];
button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, 0, button.imageView.frame.size.width);
button.imageEdgeInsets = UIEdgeInsetsMake(0, button.titleLabel.frame.size.width, 0, -button.titleLabel.frame.size.width);

La risposta di Raymond W è la migliore qui. Sottoclasse UIButton con layout personalizzati. Estremamente semplice da fare, ecco un'impaginazione di layout che ha funzionato per me:

- (void)layoutSubviews
{
    // Allow default layout, then adjust image and label positions
    [super layoutSubviews];

    UIImageView *imageView = [self imageView];
    UILabel *label = [self titleLabel];

    CGRect imageFrame = imageView.frame;
    CGRect labelFrame = label.frame;

    labelFrame.origin.x = imageFrame.origin.x;
    imageFrame.origin.x = labelFrame.origin.x + CGRectGetWidth(labelFrame);

    imageView.frame = imageFrame;
    label.frame = labelFrame;
}

Su iOS 9 in poi, sembra che un modo semplice per raggiungere questo obiettivo sia forzare la semantica della vista.

O programmaticamente, usando:

button.semanticContentAttribute = .ForceRightToLeft

Un altro modo semplice (che NON è solo iOS 9) è quello di sottoclasse UIButton per sovrascrivere questi due metodi

override func titleRectForContentRect(contentRect: CGRect) -> CGRect {
    var rect = super.titleRectForContentRect(contentRect)
    rect.origin.x = 0
    return rect
}

override func imageRectForContentRect(contentRect: CGRect) -> CGRect {
    var rect = super.imageRectForContentRect(contentRect)
    rect.origin.x = CGRectGetMaxX(contentRect) - CGRectGetWidth(rect)
    return rect
}

contentEdgeInsets è già preso in considerazione usando super.


button.semanticContentAttribute = UISemanticContentAttributeForceRightToLeft;
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;




imageedgeinsets