Quando la modalità contenuti UIButton è "centro", immagine di sfondo è sgranata

Question

Ecco come sto impostando l'immagine di sfondo e la modalità di contenuti:

[btn setBackgroundImage:[UIImage imageNamed:@"dots_game_horiz_blue.png"] 
       forState:UIControlStateNormal]; 
[btn setContentMode:UIViewContentModeCenter]; 

C'è una ragione per cui l'immagine di sfondo sarebbe pixelated? La cornice è leggermente più grande della dimensione dell'immagine e voglio solo che l'immagine sia centrata.

Answer 1

Immagino che un'immagine di sfondo non sia considerata "content" da UIButton, quindi la modalità di contenuto non si applica all'immagine di sfondo. Invece, ho impostato l'immagine del pulsante e ha funzionato bene:

[btn setImage:[[UIImage alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"dots_game_horiz_blue" ofType:@"png"]] forState:UIControlStateNormal]; 
[btn setContentMode:UIViewContentModeCenter]; 

Answer 2

Si potrebbe anche implementare - (CGRect)backgroundRectForBounds:(CGRect)bounds per controllare come lo sfondo è disegnata.

Answer 3

Avevo bisogno di creare pulsanti arrotondati per le foto di avatar e ho trovato le risposte a questa domanda per aiutare ma non mi hanno fatto arrivare fino in fondo. Ho implementato il metodo backgroundRectForBounds e ridimensionato l'immagine per adattarla e funziona bene.

Ho il codice su GitHub.

https://github.com/brennanMKE/CircleButton

Il metodo è anche elencato di seguito. È importante impostare l'immagine di sfondo e non l'immagine per il pulsante che non funziona con questo metodo.

- (CGRect)backgroundRectForBounds:(CGRect)bounds { 
    UIImage *backgroundImage = [self backgroundImageForState:self.state]; 
    if (backgroundImage) { 
     CGFloat maxWidth = CGRectGetWidth(self.frame); 

     CGFloat xDelta = maxWidth/backgroundImage.size.width; 
     CGFloat yDelta = maxWidth/backgroundImage.size.height; 
     CGFloat delta = xDelta > yDelta ? xDelta : yDelta; 

     CGFloat x = floorf((self.bounds.size.width - (backgroundImage.size.width * delta))/2); 
     CGFloat y = floorf((self.bounds.size.height - (backgroundImage.size.height * delta))/2); 

     return CGRectMake(x, y, backgroundImage.size.width * delta, backgroundImage.size.height * delta); 
    } 
    else { 
     return [super backgroundRectForBounds:bounds]; 
    } 
} 

Answer 4

La soluzione corretta è modificare il tipo da Sistema a Personalizzato. Quindi l'immagine di sfondo rispetterà il tipo di contenuto invece del solo centraggio. Nel mio caso l'ho impostato su Aspect Fill e ho applicato un angolo di raggio di 45 gradi per arrotondarlo. Semplice e funziona perfettamente.

Answer 5

Nel vostro XI ter/storyboard, in Attributi, è necessario:

1. impostare il tipo di UIButton-Custom
2. impostare l'immagine nella proprietà Image, non Background
3. Convalida fase 2 , puoi vedere la cornice del pulsante cambiata in base al set di immagini. Impostare il frame come si vuole che sia, l'immagine verrà ridimensionata per sé per adattarsi in
4. Selezionare Image per la proprietà Edge al fine di applicare inserto per l'immagine del pulsante
5. Immettere valori di offset necessari. Se si imposta 5-Top, Bottom, Left, Right, l'immagine sarà centrata all'interno del pulsante, con un bordo di 5

Potete vedere i cambiamenti nel XI ter/visualizzazione storyboard, non c'è bisogno di lanciare un debug.

Suggerimento: Inset è la stessa per ogni immagini del tasto (State Config)