Autore Topic: [facile] Gestione di bitmap come background di Activity  (Letto 8240 volte)

Offline bradipao

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 4043
  • keep it simple
  • Respect: +567
    • Github
    • Google+
    • bradipao
    • Mostra profilo
  • Dispositivo Android:
    Nexus 5
  • Play Store ID:
    Bradipao
  • Sistema operativo:
    W7
[facile] Gestione di bitmap come background di Activity
« il: 04 Dicembre 2010, 18:52:57 CET »
+6
Livello di difficoltà: facile
Versione SDK utilizzata: tutti


Quando si comincia ad esplorare il mondo Android, una delle prime cose che viene spontaneo fare è cambiare il background della propria activity HelloWorld. Utilizzare un colore in tinta unita ci da' i risultati aspettati, ma al passo successivo, quando cerchiamo di usare una bitmap, cominciano le sorprese.

Questa è sundroid.png, l'immagine di partenza che useremo in tutto il tutorial. Vedremo come può essere applicata e manipolata per andare a formare il nostro background.



Il modo più semplice, o almeno quello che viene insegnato per primo, per applicare l'immagine al background della Activity è di richiamarla direttamente nella proprietà background dell'elemento padre del nostro layout XML.

Codice (XML): [Seleziona]
<?xml version="1.0"   encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:background="@drawable/sundroid" android:orientation="vertical"
  android:layout_width="fill_parent" android:layout_height="fill_parent" >  
</LinearLayout>

Il risultato è previdibilmente molto scadente, ed è proprio questa la sorpresa di cui parlavo prima. Chi viene dal mondo web dei file HTML non è abituato ad un comportamento di default che scala e deforma l'immagine per adattarla allo schermo.





Un primo modo per risolvere questo disastro è impedire che l'immagine venga deformata e adattata allo schermo. Stavolta invece che agire sulle proprietà dell'elemento padre del layout, cominceremo ad usare elementi Drawable. Nel folder delle risorse andiamo a creare un nuovo file XML di nome footerbmp.xml e dentro ci mettiamo questo codice.

Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
  android:src="@drawable/sundroid"   android:gravity="bottom" />

Abbiamo creato una BitmapDrawable di nome footerbmp, al cui interno richiamiamo la nostra immagine originaria e la allineiamo al bottom. Adesso non ci resta che richiamare come background della activity questa drawable.

Codice (XML): [Seleziona]
<?xml version="1.0"   encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:background="@drawable/footerbmp" android:orientation="vertical"
  android:layout_width="fill_parent" android:layout_height="fill_parent" >  
</LinearLayout>

Il risultato, benchè ci appaia in qualche modo incompleto e inadatto, è decisamente più gradevole all'occhio. Principalmente perchè adesso non c'è più la sgradevole deformazione.



Anche se l'immagine poco si presta ad essere posizionata e gestita in questo modo, proviamo alcune alternative. La prima espande orizzontalmente la bitmap sul fondo. La seconda la ripete (tile) su tutto lo sfondo.

Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
  android:src="@drawable/sundroid"   android:gravity="bottom|fill_horizontal" />



Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
  android:src="@drawable/sundroid"   android:tileMode="repeat"  
  android:gravity="bottom" />



Quello che abbiamo fatto negli esempi sopra riportati, è stato usare come sfondo non direttamente l'id dell'immagine, ma l'id di un drawable che manipola e gestisce l'immagine con molte più opzioni e libertà. Se avete compreso questo concetto, ora potete associare come sfondo della Activity uno qualsiasi di questi Drawable, che non si limitano alle immagini.



Ma torniamo al nostro sfondo, c'è un altro modo che Android ci mette a disposizione per gestire background su display di dimensioni non note e diverse, le ninepatch. Le ninepatch sono immagini PNG opportunamente modificate per indicare come debbano essere deformate per adattarsi al display.

Per creare una ninepatch si apre il tool DRAW9PATCH presente nell'SDK, se usate Windows, nella cartella tools lanciate draw9patch.bat, trascinateci una PNG e sul bordo in alto e a sinistra indicate rispettivamente le colonne e le righe che saranno estese per adattare l'immagine al display (le altre non saranno deformate). Abilitando show patches le vedrete evidenziate nel pannello di sinistra. Nel pannello di destra vedrete alcuni esempi di deformazione, così da rendervi conto se avrete l'effetto ldesiderato.



Nel nostro caso abbiamo chiesto di ripetere la riga blu scura in alto, per avere un bello sfondo blu scuro, e due colonne, una a sinistra e una a destra, perchè così la deformazione è distribuita egualmente dalle due parti. Quando si è soddisfatti si salva l'immagine ninepatch con un nuovo nome con estensione .9.png, per esempio ninedroid.9.png. E' importante non usare lo stesso nome di prima scrivendo sundroid.9.png perchè si crea un conflitto di id.

Salvata la ninedroid.9.png tra le risorse, si richiama direttamente come background della Activity, e questo è l'effetto finale, uno sfondo decoroso per una app.  ;-)




Un'avvertenza: L'uso delle ninepatch non è la panacea che risolve tutti i problemi. A seconda del risultato che si desidera ottenere la miglior scelta può essere la ninepatch, la bitmapdrawable allineata in basso oppure anche l'uso diretto della risorsa immagine.

NON rispondo a domande nei messaggi privati
Bradipao @ Play Store

Offline JD

  • Amministratore
  • Utente storico
  • *****
  • Post: 1600
  • Respect: +232
    • leinardi
    • Mostra profilo
  • Dispositivo Android:
    LG Nexus 5
  • Sistema operativo:
    L'ultima Ubuntu
Re:[facile] Gestione di bitmap come background di Activity
« Risposta #1 il: 04 Dicembre 2010, 19:05:23 CET »
0
Ottimo tutorial! :)
È stata trovata una soluzione al tuo problema?
Evidenzia il post più utile premendo . È un ottimo modo per ringraziare chi ti ha aiutato ;).
E se hai aperto tu il thread marcalo come risolto cliccando !

Offline ROS

  • Utente normale
  • ***
  • Post: 196
  • Respect: +5
    • Mostra profilo
  • Sistema operativo:
    Ubuntu 10.04
Re:[facile] Gestione di bitmap come background di Activity
« Risposta #2 il: 14 Settembre 2011, 22:47:14 CEST »
0
E se volessi riprodurre solo la parte centrale (e non laterale, come nell'esempio), come dovrei fare?

EDIT: mi rispondo da solo: Draw 9-patch | Android Developers
« Ultima modifica: 14 Settembre 2011, 23:12:08 CEST da Melanogaster »