Come gestire la scala dell'immagine su tutte le risoluzioni disponibili per iPhone?

Quali dimensioni sarebbero le migliori da usare per le immagini: background.png, background@2x.png e background@3x.png se vogliamo utilizzare questa immagine, ad esempio per coprire l'intera larghezza e metà altezza dello schermo su tutte le risoluzioni per App per ritratti per iPhone?

Questo è quello che abbiamo ora:

Device          Points    Pixels     Scale  Physical Pixels   PPI   Ratio   Size
iPhone XS Max   896x414   2688x1242  3x     2688x1242         458   19.5:9  6.5"
iPhone XR       896x414   1792x828   2x     1792x828          326   19.5:9  6.1"
iPhone X        812x375   2436x1125  3x     2436x1125         458   19.5:9  5.8"
iPhone 6 Plus   736x414   2208x1242  3x     1920x1080         401   16:9    5.5"
iPhone 6        667x375   1334x750   2x     1334x750          326   16:9    4.7"
iPhone 5        568x320   1136x640   2x     1136x640          326   16:9    4.0"
iPhone 4        480x320   960x640    2x     960x640           326   3:2     3.5"
iPhone 3GS      480x320   480x320    1x     480x320           163   3:2     3.5"

Alcune persone dicono che per un'immagine da bordo a bordo (come un banner in basso dal bordo sinistro a destro dello schermo) per iPhone 6 Plus preparerebbero back@3x.png con larghezza 1242 e per iPhone 6 back@2x.png con larghezza 750 per adattarsi alle dimensioni dello schermo dell'iPhone 6, tuttavia non penso che questa sia una buona idea perché 1242/3 = 414 e 750/2 = 375 quindi nominarli come @ 2x e @ 3x non ha senso. E poi quale larghezza dovrebbe avere back.png - 375 o 414?

I nomi grafici utilizzano i suffissi @ 2x e @ 3x, quindi se ad esempio image@3x.png ha una risoluzione di 30x30, pensare logicamente che image@2x.png dovrebbe avere una risoluzione di 20x20 e image.png dovrebbe essere 10x10. Ciò significa che se vogliamo avere un'immagine nitida a tutta larghezza per ogni schermo, probabilmente dovremmo creare back@3x.png con larghezza 414 3 = 1242px, back@2x.png con larghezza 414 2 = 828px e back.png con larghezza 414px . Ciò tuttavia significa che su tutti gli iPhone ad eccezione dell'iPhone 6 Plus dovrai configurare le tue immagini ui per utilizzare ad esempio la modalità di contenuto adattato all'aspetto e verranno ridotte, quindi questa non è di nuovo una soluzione perfetta e probabilmente rallenterebbe davvero l'applicazione se usiamo molto scalling sui dispositivi più vecchi.

Quindi quale pensi che sarebbe la soluzione migliore per risolvere questo problema?

Non è necessario avere ciascuna immagine in tutte le scale se non verrà utilizzata. Crea solo le dimensioni che ti servono e nominali in base alla loro larghezza. Per immagini verticali a tutta larghezza del dispositivo, sono necessari 320 px di larghezza a 1x e 2x, 375 px di larghezza a 2x e 414 px di larghezza a 3x.

4 "dispositivi hanno utilizzato il suffisso" -568h "per denominare le immagini di avvio, quindi consiglierei uno schema di denominazione simile:

• ImageName-320w (@ 1x e @ 2x)
• ImageName-375w (@ 2x)
• ImageName-414w (@ 3x)

Quindi scopri quale immagine ti serve in fase di esecuzione:

NSNumber *screenWidth = @([UIScreen mainScreen].bounds.size.width);
NSString *imageName = [NSString stringWithFormat:@"name-%@w", screenWidth];
UIImage *image = [UIImage imageNamed:imageName];

Ciò potrebbe interrompersi se in futuro verranno aggiunte altre larghezze, ma finora Apple ha sempre richiesto la ricostruzione dell'app per supportare nuovi display, quindi immagino che sia abbastanza sicuro presumere che continueranno a farlo.

Io personalmente farò:

ImageName @ 2x iPhone 4 / 4s
ImageName-568h @ 2x iPhone 5 / 5s
ImageName-667h @ 2x iPhone 6
ImageName-736h @ 3x iPhone 6Plus

La logica alla base di questo è che mostra una differenza tra tutti i dispositivi, mentre la larghezza condivide lo stesso valore su iPhone 5s e iPhone 4s

Modificare:

Questa è solo la convenzione di denominazione che sto usando per le risorse che dipendono dal dispositivo, come un'immagine di sfondo che occupa l'intero schermo, il più delle volte tutto ciò che vuoi è:

ImageName @ 2x iPhone 4 / 4s / 5 / 5s / 6
ImageName @ 3x iPhone 6Plus / modalità Zoom

Per la discussione @ 2x e @ 3x, non devi preoccupartene. Fare attenzione alla dimensione in punti dello schermo e assicurarsi che ci siano risorse @ 2x con dimensioni in punti doppie e risorse @ 3x con dimensioni in punti tre volte superiori in pixel. Il dispositivo sceglierà automaticamente quello giusto. Ma leggendo il tuo post immagino che tu lo sappia già.

Per le immagini da bordo a bordo, sfortunatamente devi farlo per tutte le risoluzioni dello schermo. Quindi, per un iPhone ritratto, sarebbe 320 punti, 375 punti e 414 punti, dove quello da 414 punti dovrebbe essere @ 3x. Una soluzione migliore potrebbe essere quella di rendere le tue immagini scalabili impostando lo slicing in Interface Builder (se usi cataloghi di immagini, cioè). Tuttavia, a seconda dell'immagine, questa può o meno essere un'opzione, a seconda che l'immagine abbia una parte ripetibile o estensibile. Le immagini scalabili impostate in questo modo hanno un impatto minimo sulle prestazioni.

@ 2 e @ 3 non sono il ridimensionamento dell'immagine reale, ma rappresentano solo quanto pixel reali rappresentano un pixel virtuale sullo schermo, una sorta di hdpi / xhdpi / xxhdpi / blabla dall'universo Android. mostra solo al sistema quale immagine deve essere utilizzata per lo schermo di alcuni dispositivi.

quindi, se è necessario utilizzare un'immagine a schermo intero, prepararla in base alle dimensioni reali dello schermo.

A seconda della grafica in alcuni casi potrebbe funzionare bene quando usiamo solo una singola immagine, ad esempio un banner con dimensione 414 punti di larghezza x 100 punti di altezza (larghezza massima possibile e altezza fissa) e lo mettiamo in un UIImageView che è bloccato a il bordo sinistro e destro dello schermo, ha un'altezza fissa di 100 e imposta la modalità di riempimento dell'aspetto per quell'UIImageView. Quindi su dispositivi più piccoli verranno tagliati i lati sinistro e destro dell'immagine e vedremo solo la parte centrale dell'immagine.

Ho creato una categoria per questo:

+ (UIImage *)sizedImageWithName:(NSString *)name {
    UIImage *image;
    if (IS_IPHONE_5) {
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-568h",name]];
        if (!image) {
            image = [UIImage imageNamed:name];
        }
    }
    else if (IS_IPHONE_6) {
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-750w",name]];
    }
    else {
        image = [UIImage imageNamed:name];
    }
    return image;
}

puoi prendere il codice completo qui: https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5

Penso che la soluzione migliore per immagini da bordo a bordo oa schermo intero, sia preoccuparsi delle dimensioni reali dello schermo in pixel (non in punto), e devi controllare in fase di runtime il modello del dispositivo e scegliere l'immagine appropriata cioè:

image-iphone4-4s.png (640x960/2) for 1/2 screen height, image-iphone5-5c-5s.png (640x1136/2) for 1/2 screen height, image-iphone6-6s.png (750x1334/2) for 1/2 screen height, image-iphone6plus-6splus.png (1242x2208/2) for 1/2 screen height,

non è necessario @? x in questa situazione del richiedente.

Penso che dovremmo usare immagini di sfondo di dimensioni diverse per dispositivi diversi. Usa solo immagini in scala @ 3x per lo sfondo.

È possibile rilevare il dispositivo con le righe seguenti.

#define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
#define IS_RETINA ([[UIScreen mainScreen] scale] >= 2.0)

#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))
#define SCREEN_MIN_LENGTH (MIN(SCREEN_WIDTH, SCREEN_HEIGHT))

#define IS_IPHONE_4_OR_LESS (IS_IPHONE && SCREEN_MAX_LENGTH < 568.0)
#define IS_IPHONE_5 (IS_IPHONE && SCREEN_MAX_LENGTH == 568.0)
#define IS_IPHONE_6 (IS_IPHONE && SCREEN_MAX_LENGTH == 667.0)
#define IS_IPHONE_6P (IS_IPHONE && SCREEN_MAX_LENGTH == 736.0)