UISwitch personalizzato con immagine

Question

Devo implementare un commutatore personalizzato in un progetto. Attualmente quello che ho trovato è che non possiamo alterare con UISwitch in modo da implementare come mostrato nell'immagine qui sotto. Ho seguito i post e ho cercato su google tramite StackOverflow e altri blog ma non ho trovato una soluzione come desiderato. Un modo è utilizzare il controllo UISegmented come nel post this, ma anche questo non risolve il mio problema.

Grazie in anticipo per qualsiasi aiuto

Answer 1

Cosa c'è di così difficile nel creare il proprio switch? Un UISwitch è un controllo, essenzialmente solo una vista che invia un messaggio - con due stati. Si potrebbe configurarlo in questo modo:

• vista del contenitore: una semplice visione con gli angoli arrotondati (impostare il cornerRadius dello strato della vista) e un colore di sfondo

• immagine a sinistra: una vista un'immagine che visualizza l'immagine che si desidera visualizzare sul lato sinistro, cioè il segno di spunta per il tuo esempio

• immagine giusta: la visualizzazione di un'immagine che visualizza l'immagine che si desidera visualizzare sul lato destro, cioè il segno X per il tuo esempio

• cursore: la visualizzazione di un'immagine che mostra la parte di cursore dell'interruttore, posto sopra le altre due viste dell'immagine

Quando l'utente tocca o swipes controllo, utilizzare Core Animation per spostare il cursore verso l'altro lato di l'interruttore e aggiornare lo stato del controllo e fare una dissolvenza rapida al colore di sfondo per il nuovo stato. Invia l'azione del controllo al bersaglio.

Answer 2

Sembra che si vuole solo il vostro controllo per avere solo 2 stati - abilitata e disabilitata.

Un modo semplice per questo sarebbe creare 2 immagini PNG e utilizzare un UIButton personalizzato con un'immagine di sfondo e sostituire semplicemente queste 2 immagini ogni volta che si tocca il pulsante.

È questo che stai cercando di fare o ho frainteso qualcosa?

Answer 3

Come gasparuff dice, si può anche fare con un UIButton, è sufficiente impostare le immagini:

[button setImage:[UIImage imageNamed:@"image_on"] forState:UIControlStateSelected]; 
[button setImage:[UIImage imageNamed:@"image_off"] forState:UIControlStateNormal]; 

e quando è sfruttato solo attivare o disattivare la proprietà selezionata.

- (void) buttonTap { 
    button.selected = !button.selected; 
} 

che cambierà automaticamente le immagini.

Answer 4

Sai di -[UISwitch setOnImage:] e -[UISwitch setOffImage:], giusto? Anche -[UISwitch setTintColor]. Circa l'unico inconveniente che posso vedere è che l'interruttore, di per sé, sarà lo switch iOS standard (pulsante rotondo) ma, in caso contrario, questa sarebbe la soluzione più simile a iOS.

Quando si implementa la propria immagine on/off, ricordare le restrizioni sulle dimensioni e anche che il lato dell'immagine verso lo switch è concavo. tintColor può essere utilizzato per fare in modo che il resto dell'interruttore rifletta la combinazione di colori. È possibile tenere traccia dell'evento valueChanged in modo da modificare il colore della tinta.

Se è necessario l'aspetto esatto visualizzato nella domanda (pulsante interruttore quadrato), è probabile che si desideri utilizzare un controllo personalizzato, come suggerito da @Caleb.