Android 9 patch


Esempio

9 Le patch sono immagini estensibili in cui le aree che possono essere allungate sono definite da pennarelli neri su un bordo trasparente.

C'è un ottimo tutorial qui .
Nonostante sia così vecchio, è ancora così prezioso e ha aiutato molti di noi a comprendere a fondo le 9 patch.

Sfortunatamente, recentemente quella pagina è stata messa giù per un po '(è attualmente di nuovo attiva).

Quindi, la necessità di avere una copia fisica di quella pagina per gli sviluppatori Android sul nostro server affidabile / s.

Ecco qui.

UNA GUIDA SEMPLICE A 9-PATCH PER ANDROID UI 18 maggio 2011

Mentre stavo lavorando alla mia prima app per Android, ho trovato 9 patch (aka 9.png) per essere confuso e scarsamente documentato. Dopo un po ', alla fine ho capito come funziona e ho deciso di mettere insieme qualcosa per aiutare gli altri a capirlo.

Fondamentalmente, 9-patch usa la trasparenza png per fare una forma avanzata di 9-slice o scale9. Le guide sono dritte, linee nere da 1 pixel disegnate sul bordo dell'immagine che definiscono il ridimensionamento e il riempimento dell'immagine. Denominando il file immagine nome.9.png, Android riconoscerà il formato 9.png e utilizzerà le guide nere per ridimensionare e riempire i bitmap.

Ecco una mappa guida di base:

inserisci la descrizione dell'immagine qui

Come puoi vedere, hai delle guide su ciascun lato dell'immagine. Le guide TOP e LEFT servono per ridimensionare l'immagine (ad esempio 9 sezioni), mentre le guide RIGHT e BOTTOM definiscono l'area di riempimento.

Le linee guida nere sono troncate / rimosse dalla tua immagine - non verranno mostrate nell'app. Le guide devono avere un solo pixel, quindi se vuoi un pulsante 48 × 48, il tuo png sarà effettivamente 50 × 50. Qualsiasi cosa più spessa di un pixel rimarrà parte dell'immagine. (I miei esempi hanno guide larghe 4 pixel per una migliore visibilità e dovrebbero essere solo 1 pixel).

Le tue guide devono essere nere (# 000000). Anche una leggera differenza di colore (# 000001) o alpha causerà un errore e si allungherà normalmente. Anche questo fallimento non sarà ovvio *, fallisce silenziosamente! Sì. Veramente. Ora sai.

Inoltre, tieni presente che l'area rimanente del contorno di un pixel deve essere completamente trasparente. Questo include i quattro angoli dell'immagine - quelli dovrebbero essere sempre chiari. Questo può essere un problema più grande di quello che ti rendi conto. Ad esempio, se ridimensioni un'immagine in Photoshop, aggiungerai pixel anti-alias che potrebbero includere pixel quasi invisibili che causeranno anche il fallimento *. Se è necessario ridimensionare in Photoshop, utilizzare l'impostazione Vicini più vicini nel menu a discesa Ridimensionamento immagine (nella parte inferiore del menu a comparsa Dimensioni immagine) per mantenere i bordi nitidi sulle guide.

* (aggiornato 1/2012) Questa è in realtà una "correzione" nell'ultimo kit di sviluppo. In precedenza si manifestava quando tutte le altre immagini e risorse si rompevano all'improvviso, non l'immagine a 9 patch effettivamente rotta.

inserisci la descrizione dell'immagine qui

Le guide TOP e LEFT sono utilizzate per definire la porzione scalabile dell'immagine: SINISTRA per l'altezza di ridimensionamento, TOP per la larghezza di ridimensionamento. Usando l'immagine di un pulsante come esempio, questo significa che il pulsante può estendersi orizzontalmente e verticalmente all'interno della porzione nera e tutto il resto, come gli angoli, rimarrà della stessa dimensione. Ti consente di avere pulsanti che possono ridimensionare a qualsiasi dimensione e mantenere un aspetto uniforme.

È importante notare che le immagini a 9 patch non si ridimensionano, ma si scalano. Quindi è meglio iniziare il più piccolo possibile.

Inoltre, è possibile tralasciare porzioni nel mezzo della linea di scala. Ad esempio, se hai un pulsante con un bordo lucido e affilato nel mezzo, puoi lasciare alcuni pixel nel mezzo della guida LEFT. L'asse orizzontale centrale della tua immagine non si ridimensiona, solo le parti sopra e sotto di essa, così il tuo gloss non risulterà anti-alias o sfocato.

fill-zona

Le guide dell'area di riempimento sono facoltative e forniscono un modo per definire l'area per elementi come l'etichetta di testo. Riempi determina la quantità di spazio all'interno dell'immagine per posizionare il testo, un'icona o altre cose. 9-patch non è solo per i pulsanti, funziona anche per le immagini di sfondo.

Il precedente esempio di pulsante ed etichetta è esagerato semplicemente per spiegare l'idea del riempimento: l'etichetta non è completamente accurata. Per essere onesti, non ho esperienza di come Android fa le etichette su più righe poiché un'etichetta di pulsante è in genere una singola riga di testo.

Infine, ecco una buona dimostrazione di come le guide di scala e riempimento possono variare, come ad esempio LinearLayout con un'immagine di sfondo e lati completamente arrotondati:

inserisci la descrizione dell'immagine qui

Con questo esempio, la guida LEFT non viene utilizzata, ma dobbiamo ancora avere una guida. L'immagine di sfondo non si scala verticalmente; scala solo orizzontalmente (in base alla guida TOP). Osservando le guide di riempimento, le guide DESTRA e BASSA si estendono oltre il punto in cui incontrano i bordi curvi dell'immagine. Questo mi consente di posizionare i miei pulsanti rotondi vicino ai bordi dello sfondo per un look aderente e aderente.

Quindi è così. 9 patch è semplicissimo, una volta ottenuto. Non è un modo perfetto per eseguire il ridimensionamento, ma le guide della scala di riempimento e multilinea offrono una maggiore flessibilità rispetto al tradizionale 9-slice e scale9. Fare un tentativo e lo capirai rapidamente.