Le viste di nidificazione peggiorano la qualità delle immagini

Question

Mi sono imbattuto in questo problema in un progetto recente quando i ragazzi del dipartimento artistico hanno notato un deterioramento della qualità dell'immagine. Non sono sicuro di ciò che sta causando, tuttavia siamo stati in grado di risolvere il problema rimuovendo la ScrollView in cui è stata inserita. Ma questa non è una soluzione praticabile poiché avremo bisogno di nidificare le immagini all'interno di viste annidate all'interno di scrollviews.

Il mio codice sembrava qualcosa di simile:

<View> 
    <ScrollView> 
     <View> 
       <ImageView image="someImage.png" /> 
     </View> 
    </ScrollView> 
</View> 

Quando abbiamo rimosso l'ImageView sia dal ScrollView nidificato e la sua vista controllante diretta rende bene. Ho creato un repository con un semplice progetto che illustra questo. L'effetto opacizzante è più evidente sulla colorazione delle lettere, l'ombra bianca sul testo e la sfocatura del bordo grigio.

https://bitbucket.org/bwellons/blurry-images

È questo un bug che ha bisogno di segnalazione o c'è la documentazione da qualche parte che dice "non farlo in questo modo" che io non conosco?

saluti Brant

Answer 1

Credo che questo è causato non definendo limiti (larghezza, altezza) e tasselli (superiore, sinistro, destro, inferiore) di viste in modo coerente, per esempio, se solo cambiamento questo:

".parent": { 
    width: '100%', 
    height : 59, 
} 

A tal:

".parent": { 
    top : 0, 
    width: '100%', 
    height : 59 
} 

L'offuscamento va via. Penso che questo stia accadendo perché stai mescolando tecniche di layout di vista relative e assolute (percentuali e pixel assoluti) in una scatola strettamente vincolata (la vista diparte è esattamente la stessa altezza della vista immagine del bambino) che sta causando i calcoli di layout sotto fudge un po 'quando disegnano l'immagine all'interno della vista genitore.

dico questo perché questo funziona anche per eliminare notevolmente la sfocatura, consentendo più spazio per l'errore trasformazione:

".parent": { 
    width: '100%', 
    height : 62 // Added 3 pixels of padding 
} 

Ecco alcuni altri metodi che funzionano pure, sia utilizzando lo stesso meccanismo layout per larghezza e altezza, o dare più spazio per le trasformazioni:

".parent": { 
    width: '100%', 
    height : '50%' // Dont do this, but shows the point 
} 

".parent": { 
    bottom : 0, 
    width: Ti.UI.FILL, // I use Ti.UI.FILL instead of 100% generally 
    height : 59 
} 

Quindi in generale, stare lontano dalla miscelazione percentuali e valori assoluti in nidificazione vista catene dimensioni, a meno che non si è disposti a dare un po 'di spazio di manovra nel genitore, o definire le ancore (in alto, a sinistra, a destra, in basso) per far funzionare le trasformazioni del disegno.

Disclaimer: Baso questa affermazione solo su circa 15-20 diversi test di layout limitato e sulla mia esperienza (non ho ancora attraversato il codice nativo), quindi non si tratta affatto di scienza.