Italian vista fill

ivanomonti

Expert
Licensed User
Longtime User
coem posso avere una vista che si auto adatta in base al dispositivo, esempio ho un galaxy sII un Ace e un next, monitor diversi, vorrei che la form si centrasse da sola e si auto adatta, e possibile farlo o devo fare un form per ogni tipo di display :sign0085:
 

Bergum

Member
Licensed User
Longtime User
Ciao, hai provato ad usare gli script nel designer?
Se per esempio hai un panel chiamato pan, nella metà superiore della finestra degli script scrivi:

pan.left = 0
pan.top = 0
pan.right = 100%x
pan.botton = 100%y
 

Dominex

Active Member
Licensed User
Longtime User
Io credo che con la frammentazione di Android è fondamentale ragionare durante lo sviluppo il più possibile in termini di proporzioni percentuali, in questo modo l'app si adatterà sempre a qualsiasi dispositivo.

Ho sviluppato TapDroid per prendere confidenza con B4A, è stata in pratica la mia prima app, è propri scrivendo quella che ho capito l'importanza del concetto "adattabilità". Con la marea di display di diverse dimensioni e densità è fondamentale secondo il mio punto di vista.

Se usi il Designer, comincia a prendere confidenza con gli script.
 

ivanomonti

Expert
Licensed User
Longtime User
Io credo che con la frammentazione di Android è fondamentale ragionare durante lo sviluppo il più possibile in termini di proporzioni percentuali, in questo modo l'app si adatterà sempre a qualsiasi dispositivo.

Ho sviluppato TapDroid per prendere confidenza con B4A, è stata in pratica la mia prima app, è propri scrivendo quella che ho capito l'importanza del concetto "adattabilità". Con la marea di display di diverse dimensioni e densità è fondamentale secondo il mio punto di vista.

Se usi il Designer, comincia a prendere confidenza con gli script.

Ti do ragione, ma una base di partenza ci vuole (esempi e tutorial bel descritti) poi sono convinto che una volta trovato ee capito il concetto del uso dpi e non px sono convinto di non avere problemi, anche se credo B4A dovrebbe prevedere l'uso di una funzione di questo tipo.

Grazie per il tuo consiglio.
 

Dominex

Active Member
Licensed User
Longtime User
Provo a farti un esempio.

Supponiamo che tu voglia fare un gioco di tipo platform dove hai un personaggio principale che se ne va in giro nel mondo che creerai. Questo personaggio vorrai che sia di una certa dimensione, per esempio alto il 25% dell'altezza del display, pertanto e su questa dimensione che si baserà il mio esempio.

B4X:
Dim bmpPersonaggio as Bitmap
Dim vWidth,vHeight as Int
Dim imvPersonaggio as ImageView
'Carichiamo l'immagine del personaggio
bmpPersonaggio = LoadBitmap(File.DirAssets,"personaggio.png")
'Definiamo l'altezza del personaggio
vHeight = 25%y
'Proporzioniamo la larghezza
vWidth = vHeight *(bmpPersonaggio.Width/bmpPersonaggio.Height)
'Visualizziamo sul display il personaggio proporzionato alle coordinati xy che preferisci
Activity.addview(imvPersonaggio,x,y,vWidth,vHeight)

A prescindere dalla dimensione e densità del display, il tuo personaggio sarà sempre alto il 25% dell'altezza del display.
 

coslad

Well-Known Member
Licensed User
Longtime User
ciao

il mio dubbio é come ridefinire i parametri top e left . Per le dimensioni infatti ci vengono in aiuto %x %y ma per riposizionare l oggetto che si fa ?
grazie

Inviato dal mio GT-I9100 con Tapatalk 2
 

Dominex

Active Member
Licensed User
Longtime User
ciao

il mio dubbio é come ridefinire i parametri top e left . Per le dimensioni infatti ci vengono in aiuto %x %y ma per riposizionare l oggetto che si fa ?
grazie

Inviato dal mio GT-I9100 con Tapatalk 2

E' semplice tanto come per le dimensioni.
B4X:
' Vuoi che il tuo personaggio sia orizzontalmente al centro dello schermo?
imvPersonaggio.Left = 50%x-(imvPersonaggio.Width/2)

' Vuoi che il tuo personaggio tocchi il fondo dello schermo?
imvPersonaggio.Top = 100%y-imvPersonaggio.Height

Devi sempre ragionare in termini di percentuale. Io lo faccio anche con il testo. Ho notato che in questo modo mi viene tutto più facile.
 

coslad

Well-Known Member
Licensed User
Longtime User
OK,
Grazie sto facende delle prove e pare che funzioni tranne per una cosa, e ti spiego:

Sul designer impostato a 480x800 x 1.5 (240dpi) metto una label come left 100, così da lavorare con le percentuali , 100 corrisponde al 20.83% di 480 ,in modo che su uno schermo di 720 pongo a left sempre al 20.83% dello schermo e quindi a 150 .
Quando eseguo il codice nell'emulatore e controllo il parametro left prima di riposizionarlo ottengo : 100 quando l'emulatore e' settato 480x800 240 dpi (galaxy s2) , ma ottengo 133 quando lo esego nell'emulatore settato come galaxy s3 720x1280 @320 dpi , invece io mi aspetto sempre 100 perche' e' il valore che gli ho dato dal designer , per poi fare : 100 / 480(che e' un valore fisso che gia conosco) * 720 = 150 che sarebbe perfetto.
Venendo al punto: il problema non si pone se maualmente , view per view si scrive il setview con le percentuali, ma se si usa il designer e poi si vuole scrivere una routine che automaticamente riposizioni le view non s riesce.
Non so se sono stato chiaro.
Se sbaglio , vi prego di postare un esempio con una view inserita da designer ed una routine che la riadatti facendo lo stratching su un alto schermo.
Grazie


PS: Come fai ad usare le percentuali con il testo ?
Se per esempio usi un TEXTSIZE=14 su un S2 , come diventa su un S3 ?
Grazie ancora
 

Dominex

Active Member
Licensed User
Longtime User
Ho bisogno di capire meglio ciò che ti serve. Se anche ottieni un Left pari a 100 con schermo da 720, in che modo lo vuoi utilizzare. Quello che mi sfugge è l'utilità finale di questa cosa.

Per avere un testo sempre proporzionato usa questa Sub.

B4X:
Label1.TextSize = AltezzaFont(20) '=10%y

Sub AltezzaFont(PercentualeAltezza As Float) As Int
    Return PerYToCurrent(PercentualeAltezza/2)/Density '1 punto PercentualeAltezza equivale a 0.5%y
End Sub
 
Last edited:

coslad

Well-Known Member
Licensed User
Longtime User
Cerco di spiegarmi meglio.

Se scrivo : label1.left=20%x

Allora si adatta in automatico per ogni schermo.
Io invece non voglio calcolare manualmente questa percentuale ma voglio inserire graficamente la label nel designer non curandomi del valore del parametro left, che per esempio é 100.
E voglio scrivere una routine generica che mi scansioni l'activity e per ogni view l'adatti allo schermo.
Come dati ho : la risoluzione del designer, la risoluzione del dispositivo che esegue l'applicazione ed ho il parametro label1.left che il sistema mi restituisce.
Il punto è che mi aspetto che il sistema mi restituisca label1.left essere = 100 su ogni dispositivo, poi sarò io che con la formula label1.left/480 * 720 dove 480 è la ris. Del designer e 720 quella del dispositivo, mi adatterò la posizione, infatti dal calcolo esce che sul nuovo schermo la label dovrà avere left =150.
Invece il problema è che la label la inserisco tramite designer,il sistema mi restituisce 100 su un display 480 mentre restituisce 133 su un display 720.
Di fatto impedendomi di effetture il semplice calcolo label1.left/480*720 che non porterebbe come risultato 150.
In realtà il sistema tiene conto anche dei dpi ed infatti 320/240 =1.3.
Cè un modo per leggere i dpi dello schermo del dispositivo che esegue l'applicativo? Cosi da fare prima un rapporto fra dpi e poi fra le risoluzioni, quindi per esempio 240/ 320 (sono i dpi del s3) * label1.left/480+720?
 

ivanomonti

Expert
Licensed User
Longtime User
Cerco di spiegarmi meglio.

Se scrivo : label1.left=20%x

Allora si adatta in automatico per ogni schermo.
Io invece non voglio calcolare manualmente questa percentuale ma voglio inserire graficamente la label nel designer non curandomi del valore del parametro left, che per esempio é 100.
E voglio scrivere una routine generica che mi scansioni l'activity e per ogni view l'adatti allo schermo.
Come dati ho : la risoluzione del designer, la risoluzione del dispositivo che esegue l'applicazione ed ho il parametro label1.left che il sistema mi restituisce.
Il punto è che mi aspetto che il sistema mi restituisca label1.left essere = 100 su ogni dispositivo, poi sarò io che con la formula label1.left/480 * 720 dove 480 è la ris. Del designer e 720 quella del dispositivo, mi adatterò la posizione, infatti dal calcolo esce che sul nuovo schermo la label dovrà avere left =150.
Invece il problema è che la label la inserisco tramite designer,il sistema mi restituisce 100 su un display 480 mentre restituisce 133 su un display 720.
Di fatto impedendomi di effetture il semplice calcolo label1.left/480*720 che non porterebbe come risultato 150.
In realtà il sistema tiene conto anche dei dpi ed infatti 320/240 =1.3.
Cè un modo per leggere i dpi dello schermo del dispositivo che esegue l'applicativo? Cosi da fare prima un rapporto fra dpi e poi fra le risoluzioni, quindi per esempio 240/ 320 (sono i dpi del s3) * label1.left/480+720?

Ieri parlavamo di questo, ma per avere un layout che si autodimensiona (non testato su tutti ma su alcuni e va bene) ho usato questo codice che ho scritto usando la base di altro post qui riportato.

Post link http://www.b4x.com/forum/italian-forum/17017-strumento-per-il-calcolo-veloce-di-setlayout.html

Codice che poi ho trasformato in una classe che importo su tutti i miei progetti.. e devo dire che sono soddisfatto.

B4X:
Dim xleft, xtop, xwidth, xheight, lwidth, lheigh

lwidth = Activity.Width-lmar ' larghezza display
lheigh = Activity.Height-lmar ' altezza display

For i = 0 To pn.NumberOfViews-1
    ' calculate
    xleft = pn.GetView(i).Left * lwidth / pn.Width
    xtop = pn.GetView(i).Top * lheigh / pn.Height
    xwidth = pn.GetView(i).Width * lwidth / pn.Width
    xheight = pn.GetView(i).Height * lheigh / pn.Height
    ' setting object
    pn.GetView(i).SetLayout(xleft,xtop,xwidth,xheight)
Next

End Sub
 

Dominex

Active Member
Licensed User
Longtime User
Per ottenere il valore Left che hai impostato nel Designer a prescindere dalla risoluzione/densità, devi annullare la scala del display, e per ottenere questo puoi fare:

B4X:
'Entrambe le Label sono state impostate nel Designer con 100 di Left
Label1.Text = Label1.Left 'Questo valore viene modificato dalla scala
Label2.text = Scala(Label1.Left) 'Questo è il valore originario impostato nel Designer 

Sub Scala (valore As Int) As Int
   Return valore/Density
End Sub
 
Last edited:

coslad

Well-Known Member
Licensed User
Longtime User
Per ivanomonti:

Mi sa che la routine che proponi non funziona per le view aggiunte dramite designer, ho provato e non mi funziona ,mentre va bene per quelle aggiunte da codice.

Per Dominex:

Sei un grande ! era proprio il comando Density che mi mancava .

Grazie
 

ivanomonti

Expert
Licensed User
Longtime User
Per ivanomonti:

Mi sa che la routine che proponi non funziona per le view aggiunte dramite designer, ho provato e non mi funziona ,mentre va bene per quelle aggiunte da codice.

Per Dominex:

Sei un grande ! era proprio il comando Density che mi mancava .

Grazie

il codice che sto usando sembra funzionare, ma gli object devono essere imparentati con un panel 320x480

sicuro che e da rivedere e perfezionare, ma ad oggi sembra non dare problemi con Galaxy sii e Next e un i5500...
 

ivanomonti

Expert
Licensed User
Longtime User
Uffa non ne vengo a capo :BangHead:

Vediamo subito cosa combino

apro un nuovo form e tengo lo standar 320x480 160 dip
ci colloco un pannello 320x480
all'inteno dello stesso (parent) ci colloco 5 bottoni e 2 filed
i bottoni sono disposti a modo tastiera e 2 label a modo bandiera

bottone bottone
Bottone bottone
label
label

dimensioni bottoni 145x150
dimensioni label 300x40

ora in modo automatico cerco di riordinare o allargare o espandere o restringere il form a secondo dello schermo, ma oggi notavo che galxy S2 ha 220 dip e altri 160, altri ancora azzarola e qui mi va in merda tutto.

ho creato 2 codici ma i risultati non sono validi, sicuro che non valgono perchè sono io che sbaglio, mazza domani devo consegnare :sign0085::sign0085::sign0085::sign0085::sign0085:

B4X:
Sub ScalaLayOut (ac As Activity,pn As Panel) As Int

Dim xleft, xtop, xwidth, xheight, lwidth, lheigh

lwidth = ac.Width ' larghezza display
lheigh = ac.Height ' altezza display

For i = 0 To pn.NumberOfViews-1
   ' calculate
   xleft = pn.GetView(i).Left /Density
   xtop = pn.GetView(i).Top /Density
   xwidth = pn.GetView(i).Width /Density
   xheight = pn.GetView(i).Height /Density
   ' setting object
   pn.GetView(i).SetLayout(xleft,xtop,xwidth,xheight)
Next

End Sub

B4X:
Sub SettingLayoutPanel(ac As Activity,pn As Panel)

Dim xleft, xtop, xwidth, xheight, lwidth, lheigh

lwidth = ac.Width ' larghezza display
lheigh = ac.Height ' altezza display

For i = 0 To pn.NumberOfViews-1
   ' calculate
   xleft = pn.GetView(i).Left * lwidth / pn.Width
   xtop = pn.GetView(i).Top * lheigh / pn.Height
   xwidth = pn.GetView(i).Width * lwidth / pn.Width
   xheight = pn.GetView(i).Height * lheigh / pn.Height
   ' setting object
   pn.GetView(i).SetLayout(xleft,xtop,xwidth,xheight)
Next
 

klaus

Expert
Licensed User
Longtime User
Try this code:
B4X:
Sub SettingLayoutPanel(ac As Activity,pn As Panel)
    Dim xleft, xtop, xwidth, xheight, lwidth, lheigh As Int
    Dim ScaleX, ScaleY As Float

    lwidth = ac.Width ' larghezza display
    lheigh = ac.Height ' altezza display
    
    ScaleX = lwidth / 320 / Density
    ScaleY = lheigh / 430    / Density    ' 480 - 2 * 25  

    For i = 0 To pn.NumberOfViews-1
        ' calculate
        xleft = pn.GetView(i).Left * ScaleX
        xtop = pn.GetView(i).Top * ScaleY
        xwidth = pn.GetView(i).Width * ScaleX
        xheight = pn.GetView(i).Height * ScaleY
        ' setting object
        pn.GetView(i).SetLayout(xleft,xtop,xwidth,xheight)
    Next
End Sub
Best regards.
 

ivanomonti

Expert
Licensed User
Longtime User
Try this code:
B4X:
Sub SettingLayoutPanel(ac As Activity,pn As Panel)
    Dim xleft, xtop, xwidth, xheight, lwidth, lheigh As Int
    Dim ScaleX, ScaleY As Float

    lwidth = ac.Width ' larghezza display
    lheigh = ac.Height ' altezza display
    
    ScaleX = lwidth / 320 / Density
    ScaleY = lheigh / 430    / Density    ' 480 - 2 * 25  

    For i = 0 To pn.NumberOfViews-1
        ' calculate
        xleft = pn.GetView(i).Left * ScaleX
        xtop = pn.GetView(i).Top * ScaleY
        xwidth = pn.GetView(i).Width * ScaleX
        xheight = pn.GetView(i).Height * ScaleY
        ' setting object
        pn.GetView(i).SetLayout(xleft,xtop,xwidth,xheight)
    Next
End Sub
Best regards.

sembra avere problemi, puoi guardare se il mio modo va bene, replico una parte del progetto qui;

seems to have problems, you can watch if my way is fine, I reply a part of the project here;

http://www.ivanomonti.eu/___CreaButton_CSharp/AP009-FillSize.zip
 

klaus

Expert
Licensed User
Longtime User
What's the problem ?
I forgot to mention that I set in the main code
Panel1.Width = 100%x
Panel1.Height = 100%y

In your layout file the Panel height is 480 but on the device the height is only 430 !

Attached my test program. Tested (only portrait) with
Emulator 320 * 480 * 160
Nexus One 480 * 800 * 240
Asus TF700 1920 * 1200 * 240

Best regards.
 

Attachments

  • LayoutScale.zip
    7.6 KB · Views: 266
Last edited:

ivanomonti

Expert
Licensed User
Longtime User
What's the problem ?
I forgot to mention that I set in the main code
Panel1.Width = 100%x
Panel1.Height = 100%y

In your layout file the Panel height is 480 but on the device the height is only 430 !

Attached my test program. Tested (only portrait) with
Emulator 320 * 480 * 160
Nexus One 480 * 800 * 240
Asus TF700 1920 * 1200 * 240

Best regards.

WOW e perfect all 100% :sign0142::sign0142: :sign0098: :sign0142::sign0142:
 
Top