Italian Soluzione definitiva per la creazione di app con layout "universale"

[select]

Ciao a tutti,

mi sto perdendo fra le varie guide per creare un layout delle app che sia adattabile ad ogni dimensione di schermo.

Sarà che non afferro qualche concetto nei vari tutorial non conoscendo poi così bene l'inglese ma potreste aiutarmi a capire se c'è un metodologia migliore delle altre da seguire per creare delle app che "calzino" perfettamente e si adattino ad ogni dimensione di schermo?

grazie!

 

[LucaMs]

Certo, che ci vuole, ti rispondo subito.

Ho lottato due anni interi su questa faccenda e la soluzione...

semplicemente non c'è.

Ovvero, non c'è una soluzione ideale, per il "semplice" fatto che le case produttrici di dispositivi Android non hanno mai pensato che sarebbe "cosa buona e giusta" produrre display standard, come il 16:9 per i TV. Immagina se i televisori avessero rapporti base/altezza (ratio) diversi, la marca x produce uno schermo 14:9, la marca y un 15:7 e così via; sai che robaccia vedremmo! A proposito, se oggi guardi un vecchio film o programma TV registrato in formato 4:3, come lo vedi sul TV? O fai uno zoom, perdendo i bordi, oppure imposti il 4:3 sul Tv, vedendo contemporaneamente anche bordi neri intorno!
Stesso problema con i dispositivi Android.

Quindi il problema è che appunto questo rapporto varia da modello a modello.

Teoricamente, si dovrebbero creare layout completamente differenti a seconda se l'app giri su uno smartphone (quindi display relativamente piccolo) e tablet.
Diversi nel senso che si dovrebbero fare proprio cose diverse; cioè, se per esempio hai una lista di nomi e clicando su un nome fai comparire una lista di dati relativi a quel nome, mentre su un tablet potresti visualizzare le due liste affiancate, su uno smartphone dovresti implementare un layout differente, tipo un tabhost oppure addirittura usare due activity.

Se invece vuoi ottenere lo stesso identico aspetto dovrai usare le percentuali (puoi trovare tanti esempi sul forum a questo riguardo).

Un altro metodo decente, SECONDO ME, è usare un pannello come base del layout, ancorare le view e, grazie al pannello, "tirandolo" per un angolo, vedere l'effetto degli ancoraggi, come in questo video:
https://www.b4x.com/android/forum/threads/designer-anchors-video-example.36507/

 

[LordZenzo]

quoto appieno LucaMs
anche io mi sono scervellato su questo problema
oltretutto molti dispositivi hanno una densità che permette, sebbene microscopici, di mantenere le "dimensioni" relative, su altri invece e' impossibile
la mia soluzione sta in due layout, uno per dispositivi da oltre 1600 pixel (tablet ed alcuni smartphone) e uno per dispositivi da 320/640 pixel molto comune nei telefonini o smartphone di fascia bassa
nota in oltre che il problema si aggrava molto con i testi che divengono illeggibili o perché troppo piccoli o perché "scompaiono" uscendo dalle label/text/liste/button

 

[sirjo66]

quoto Luca e LordZenzo, purtroppo l'adattabilità dello schermo è una dei grossi problemi per i programmatori Android.
Personalmente ho scelto di creare due layout per ogni form: uno per i telefoni e uno per i tablet, e sinceramente la cosa funziona discretamente.
Ovviamente la cosa fondamentale è di mettere un "AutoScale" nel designer, ma questo dovrebbe già essere attivo per default.

Un'altra soluzione è quella di utilizzare una funzione che ha scritto "non mi ricordo chi" che serve proprio per scalare le form in base al dispositivo, ma non riesco a trovarla, per cui chiedi a Luca se ne posta una copia, lui ce l'ha di sicuro

Sergio

 

[LucaMs]

per cui chiedi a Luca se ne posta una copia, lui ce l'ha di sicuro

Beh ci sarebbe anche il modulo di Klaus, necessario soprattutto se aggiungi delle view tramite codice, in quanto in questo caso non puoi sfruttare le potenzialità del Designer (scale e anchor).

https://www.b4x.com/android/forum/threads/autoscale-code-module.23750/#content

 

[LucaMs]

Ah, cmq, sarà un caso, ma i nuovi dispositivi prodotti da Google (e in vendita già all'estero, da noi nel 2017, perché ci considerano... beh, lasciamo stare) guarda caso hanno il display in formato 16:9 (1920 x 1080), come i TV. Speriamo si mettano d'accordo e lo facciano tutti.

 

[sirjo66]

trovato !!!
eccolo qui

 

[LordZenzo]

e come si usa?

 

[LucaMs]

e come si usa?

Normalmente aggiungi il modulo al tuo progetto e nell'Activity:

Scale.Initialize
Scale.ScaleAll(Activity, True)

Quindi scala tutte le view di quell'Activity.

Ora non so quale versione Sergio abbia postato, ma ci sono state varie modifiche e una riguarda il fatto che vengono presi in considerazione il full screen e show title, per cui l'inizializzazione era cambiata.

Cmq, la base è quella. Poi puoi invece scalare ogni singola view usando Scale.ScaleView, usare Scale.SetReferenceLayout al posto dell'inizializzazione se nel Designer non hai utilizzato il variant di default 320x480 e un bel po' di altra roba.

 

[LordZenzo]

il variant di default 320x480

mai usato, di solito uso quello per tablet

Scale.Initialize
Scale.ScaleAll(Activity, True)

Quindi scala tutte le view di quell'Activity.

ottimo

 

[3394509365]

ho aggiunto un modulo chiamandolo Scale, ma non mi scala niente come mai?

 

[sirjo66]

come lo hai chiamato ?

 

[udg]

come lo hai chiamato ?

Scale .. eheh

 

[LucaMs]

Scale .. eheh

Seh, e se fosse stato ascensore... col dito (in bocca) (vecchia, perfino più di me!)

 

[3394509365]

Divertentissimi, e grande senso dell' umorismo. Ma io non stavo scherzando ho veramente aggiunto un Modulo con il codice contenuto in Scale.bas.

Il modulo viene chiamato ed eseguito ma le view dell' activity non vengono ridimensionate.

Se non fa troppo ridere la richiesta, sapreste aiutarmi?

grazie

 

[LucaMs]

Come l'hai utilizzato?

Normalmente, tutto quello che c'è da fare è quanto ti ho scritto nel post #9. Ovvero, se il layout che carichi ha le dimensioni di default del Designer, è sufficiente scrivere, dopo il LoadLayout:

Scale.Initialize
Scale.ScaleAll(Activity, True)

Se invece il Variant ha dimensioni differenti, al posto di Scale.Initialize dovrai usare Scale.SetReferenceLayout, passando a questo metodo le dimensioni del variant.


Ah, non ho guardato quale versione tu abbia; da un certo punto in poi, l'inizializzazione dovrebbe richiedere anche due variabili booleane riguardanti il Full Screen ed il Title.

 

[LucaMs]

Voglio anche aggiungere che fino ad un anno fa, circa, pensavo che senza il modulo Scale non si potesse vivere (si fa per dire ); oggi, benché sappia non ci sia modo di automatizzare tutto, penso che usare bene il Designer ed i suoi script sia sufficiente per ottenere i migliori risultati possibili.

Inoltre, se nello script del Designer si imposta:

AutoScaleRate(1)
AutoScaleAll

penso che si ottenga lo stesso risultato che usando Scale.ScaleAll.

 

[3394509365]

infatti io uso il designer e mi trovo abbastanza bene. certo scalare il testo degli oggetti è più complicato. grazie per le info le proverò grazie

 

[Sagenut]

AutoScaleRate(1)
AutoScaleAll

Grazie a questo ottimo consiglio forse mi sono sbloccato dal Mostro del Layout.
Non avevo pensato di usare 2 comandi di Autoscale.
Avevo già provato di testa mia questi 2 comandi ma singolarmente e non ottenevo mai ciò che volevo.
Usandoli entrambi come consigliato da LucaMS sembra funzionare bene.
Tutto questo testando il risultato con UI Cloud...... Chissà se poi continua ad andare bene anche sui device reali.

 

[Sagenut]

Rimane il fatto che comunque per avere tutto visualizzato bene ho usato le percentuali %x e %y invece che usare i "dip" come più volte detto da Erel.
Ma forse ora funzionerebbe anche con i dip.
L'ennesima prova da fare.