2012-05-18 13 views
13

L'utilità fornita sembra scadente, ad esempio non consente di eseguire "Salva con nome" o di disegnare diversi stati dei pulsanti con affettazioni simili.Come creare 9 patch in Photoshop? Cos'è la codifica 9.png?

È possibile disegnare 9.png in Photoshop? Ho notato che il png generato contiene solo pixel neri nel bordo esterno. È questo che contrassegna le fette?

Cosa succede se i pixel neri si presentano in due bordi opposti, come funziona?

I bordi esterni vengono tagliati se visualizzati su Android?

risposta

45

Sì, eseguo tutte le mie nove patch in Photoshop. Ecco le regole di base per creare un 9-patch:

  1. L'esterno margine 1px può contenere solo 100% nero (RGB 0, 0, 0) o completamente trasparente.

  2. I pixel neri per il margine superiore e il margine sinistro definiscono i punti di stiramento e devono essere una linea continua, un punto singolo o due punti separati. Se due punti sono definiti, si allungheranno equamente tra i due.

  3. I pixel neri per il margine inferiore e il margine destro definiscono l'area del contenuto. Questi pixel devono essere una linea contigua.

  4. Durante il salvataggio, assicurarsi di aggiungere l'estensione .9.png.

Spero che questo aiuti. :)

MODIFICA: E sì, quelli non verranno visualizzati se utilizzati nei layout, a condizione che siano formattati correttamente e che siano stati salvati come .9.png.

enter image description here

enter image description here

Ok, così la parte superiore sarebbe un semplice nove patch per un filatore. le linee trasversali e discendenti nella seconda immagine mostrano quali righe/colonne di pixel verrebbero duplicate. Il rettangolo blu nella seconda immagine mostra l'area in cui Android consente il posizionamento dei contenuti. Quindi il testo, ad esempio, si avvolgerebbe semplicemente in questo rettangolo.

+0

E qual è la differenza tra area di allungamento e area di contenuto? Suppongo che 9 patch contengano 3x3 = 9 fette in cui la parte centrale è per il contenuto e lo stretching, 4 spigoli si estendono 2 verticalmente e 2 orizzontalmente, e 4 angoli sono fissi. Quindi, solo la porzione centrale deve essere definita, quindi bastano solo due righe nere. A cosa servono gli altri due? –

+0

L'area di stiramento determina quali righe e colonne verranno ripetute. Cioè, se selezioni un pixel su una delle colonne più in alto, se la nove patch deve essere allargata, espanderà semplicemente quella colonna (duplicherà quella colonna di pixel) e allargherà i due lati che la circondano. Lo stesso con le righe. L'area del contenuto: pensala come una definizione di riempimento. Se hai una parte delle nove patch che non dovrebbero contenere contenuti (di testo, in genere), non posizionerai i pixel in quell'area. Proverò a mettere un esempio grafico a breve. – kcoppock

+0

Sembra che ce l'ho fatta –