Android: come estendere una ImageView in larghezza adattando l’altezza in modo proporzionale

Può capitare, sviluppando una app per dispositivi Android, di avere l’esigenza di estendere le dimensioni di una immagine in modo da farle coprire orizzontalmente tutto lo schermo disponibile, mantenendo inalterate le sue proporzioni. Questo significa che l’altezza dell’immagine suddetta dovrà adattarsi in modo proporzionale alla larghezza, così da mantenere inalterato l’aspect ratio originario.

Il problema

Ottenere questo risultato in HTML è estremamente semplice: è sufficiente impostare la width dell’immagine in questione al 100%, omettendo qualsiasi informazione in merito alla height e lasciando così che sia il browser a determinarla in modo proporzionale. Sfortunatamente, in Android la questione è più complessa: nell’elemento ImageView altezza e larghezza sono due parametri obbligatori, che è possibile valorizzare con un numero fisso in px, dp o altro, in base al contenitore mediante il comando match_parent oppure in base al contenuto mediante il comando wrap_content. In tutti e tre i casi non è possibile definire un comportamento dell’altezza realmente proporzionale rispetto al contenuto. Il meglio che è possibile fare utilizzando una normale ImageView è impostare gli attributi android:layout_widthandroid:layout_height e android:scaleType in modo che si adattino automaticamente alle dimensioni del layout contenitore nel seguente modo:

Questo metodo consente di ottenere il risultato sperato nella maggior parte degli scenari, ma ha il grande difetto di non funzionare allo stesso modo su tutti i dispositivi Android e con tutte le immagini.

La soluzione

Chi ha detto che è necessario utilizzare una normale ImageView? Questo interessantissimo post su StackOverflow mostra come è possibile estendere una View per ottenere un risultato analogo a quello che stiamo cercando. Partendo da quell’esempio possiamo quindi sviluppare una estensione della classe ImageView che dimensioni automaticamente l’altezza sulla base del ridimensionamento della larghezza in modo proporzionale rispetto all’aspect ratio dell’immagine originaria.

Questo il codice completo:

 

E questa è l’implementazione all’interno di un layout XML:

Ricordate, in entrambi gli esempi, di sostituire com.my.namespace con il  namespace utilizzato nella vostra applicazione.

Felice sviluppo!

 

RELATED POSTS

About Ryan

IT Project Manager, Web Interface Architect e Lead Developer di numerosi siti e servizi web ad alto traffico in Italia e in Europa. Dal 2010 si occupa anche della progettazione di App e giochi per dispositivi Android, iOS e Mobile Phone per conto di numerose società italiane.

View all posts by Ryan