Italian Layout Variants, un pò di chiarezza...

[t3radm]

Buonasera a tutti, come da titolo ho un piccolo problema con la definizione dei Layout Variants ad oggi settato "ad intuito" a 720x1280 scale = 2 per il mio Galaxy S3.

Il valori di cui sopra sono stati inseriti nel rispetto della risoluzione dello schermo dichiarati dal costruttore, e il scale = 2 ad intuizione, perchè con la risoluzione a scale = 1 creava uno schermo il doppio più grande.

Il problema nasce ora, quando definendo un nuovo WebView della risoluzione esatta della pagina da visualizzare (640x480) vedo solamente 1/4 esatto della pagina reale (diviso 2 nella risoluzione orizzontale e verticale)

Allora ora mi chiedo...

1) la risoluzione effettiva del display è un quarto di quella dichiarata dal costruttore?
2) Basic4android non gestisce risoluzioni differenti da uno standard per cui bisogna scalare la risoluzione per ottenere una corrispondenza
3) Sto usando malissimo (PROBABILISSIMO) la definizione dei layout

Si può avere un minimo di chiarezza ?

Ovviamente ho già utilizzato il tastino cerca :sign0013:

Grazie

PS. in ogni caso che differenza c'è nell'utilizzare ad esempio 720x1280 scale = 2 o 360x640 scale = 1 ? ma soprattutto se così è, come visualizzo una webview larga 640px orizzontale ?!?

 

[ivanomonti]

Buonasera a tutti, come da titolo ho un piccolo problema con la definizione dei Layout Variants ad oggi settato "ad intuito" a 720x1280 scale = 2 per il mio Galaxy S3.

Il valori di cui sopra sono stati inseriti nel rispetto della risoluzione dello schermo dichiarati dal costruttore, e il scale = 2 ad intuizione, perchè con la risoluzione a scale = 1 creava uno schermo il doppio più grande.

Il problema nasce ora, quando definendo un nuovo WebView della risoluzione esatta della pagina da visualizzare (640x480) vedo solamente 1/4 esatto della pagina reale (diviso 2 nella risoluzione orizzontale e verticale)

Allora ora mi chiedo...

1) la risoluzione effettiva del display è un quarto di quella dichiarata dal costruttore?
2) Basic4android non gestisce risoluzioni differenti da uno standard per cui bisogna scalare la risoluzione per ottenere una corrispondenza
3) Sto usando malissimo (PROBABILISSIMO) la definizione dei layout

Si può avere un minimo di chiarezza ?

Ovviamente ho già utilizzato il tastino cerca :sign0013:

Grazie

PS. in ogni caso che differenza c'è nell'utilizzare ad esempio 720x1280 scale = 2 o 360x640 scale = 1 ? ma soprattutto se così è, come visualizzo una webview larga 640px orizzontale ?!?

non è tutto cosi semplice, proprio oggi mi sono fatto un tools per vedere come lavorare con i px e dip, primo non si lavora solo in formato px 720x1280 ma bensì in formato lmdi o mmdi o hdmi o xmdi sono formati standart low, medio, alto, altissima definizione.

esempio un 64x6x px diventano

1) 48x48 = lmdi rapporto 0.75x
2) 64x64 = mmdi rapporto 1.0x
3) 96x96 = hdmi rapporto 1.5x
4) 128x128 = xhdmi rapporto 2.0x

quindi se tu hai un telefono con 720x1280 per avere una piena pagina con rapporto 2 il tuo oggetto dovrebbe essere
1440x2360

Ma questo non ci starebbe nel tuo video, pertanto devi ragionare a % o dip, per semplificare basta dare la massima dimensione usando 100%x,100%y e troverai il tuo object a piena pagina.

Diverso con i px (immagini) li devi lavorare di calcolo, nel senso che se vuoi ottimizzare dovresti fare 4 immagini per singola icona, una per possibile scenario.

Qui trovi il mio tools e una spiegazione precisa la trovi in developer android qui

Spero di essermi spiegato in modo semplice e comprensivo.

 

[t3radm]

ivanomonti, grazie per la risposta.

Penso di aver più o meno capito, la necessità di esprimere i valori di risoluzione in percentuale o in dip nasce per riuscire ad adattare il layout in funzione al device su cui il software è installato e che può avere diverse risoluzione.

Intanto solo per il momento questo non mi interessa più di tanto (nel senso che il software girerà esclusivamente sul mio s3) ma anche convertendo il tutto mi rimane questo problema:

Anche se esprimo le dimensioni del mio webview in % o in dip, le proporzioni sul display sono esatte, ma il contenuto è sempre visualizzato nelle medesime proporzioni, impedendomi di vedere all'interno della mia webview tutta la immagine, cerco di fare un esempio pratico.


In una pagina del mio software (orientamento portrait) ho una webview che dovrebbe farmi vedere l'immagine di una IPCAM (risoluzione 640x480px) ma nella mia webview ne viene mostrata 1/4 e devo scrollare all'interno per vederla tutta.
Questo a prescindere se nelle proprietà della webview esprimo la risoluzione in dip o % o px

Spero di essere stato un po più chiaro

GRAZIE

 

[ivanomonti]

ivanomonti, grazie per la risposta.

Penso di aver più o meno capito, la necessità di esprimere i valori di risoluzione in percentuale o in dip nasce per riuscire ad adattare il layout in funzione al device su cui il software è installato e che può avere diverse risoluzione.

Intanto solo per il momento questo non mi interessa più di tanto (nel senso che il software girerà esclusivamente sul mio s3) ma anche convertendo il tutto mi rimane questo problema:

Anche se esprimo le dimensioni del mio webview in % o in dip, le proporzioni sul display sono esatte, ma il contenuto è sempre visualizzato nelle medesime proporzioni, impedendomi di vedere all'interno della mia webview tutta la immagine, cerco di fare un esempio pratico.


In una pagina del mio software (orientamento portrait) ho una webview che dovrebbe farmi vedere l'immagine di una IPCAM (risoluzione 640x480px) ma nella mia webview ne viene mostrata 1/4 e devo scrollare all'interno per vederla tutta.
Questo a prescindere se nelle proprietà della webview esprimo la risoluzione in dip o % o px

Spero di essere stato un po più chiaro

GRAZIE

certo che sei stato chiaro, molto probabilmente hai associato la tua webviewer in un costesto diverso, esempio

1) activity
2) webviewer 100%x, 100%y del suo parent ma pare ovvio che se il parent e

1) activity
2) panel
3) webviewer 100%x, 100%y del suo parent (panel) si adatta a questo e alle sue dimensioni naturali.

Per ovviare il problema potresti usare quasta classe tipo

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
      ' eredity object
      Dim v As View
      v = pn.GetView(i)
        ' 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 layout object
        pn.GetView(i).SetLayout(xleft,xtop,xwidth,xheight)
    Next

End Sub

questa classe ridimensiona tutto ciò che passi come parent, e funziona in quanto la uso e mi va bene dal un samsung con 120 dpi, tablet note 10, compreso S Ace 160, samsung Galaxy s2 ecc ecc.

Sub Activity_Create(FirstTime As Boolean)
   ' setta il pannello
   Activity.LoadLayout("Main")
   Panel1.Width = 100%x
   Panel1.Height = 100%y
   Setting.SettingLayoutPanel(Activity,Panel1)
end Sub

Sempre se il problema dipende dagli object e non da altro, ma ricordati che il setting devi farlo ogni qual volta che tu giri il device da V a H.

Fammi sapere, se vuoi mi trovi anche su Skype.

 

[ivanomonti]

Tutorial autoimpaginazione

Come detto da Arena sto studiandomi le varianti di un layout, ovviamente questo e il mio, ma l'esempio vale anche per i vostri.

Secondo Android developer, ogni variante di densità dovrebbe avere le proprie icone, in questo esempio ho voluto scrivere tutto a codice, quindi nessuna form, codice e basta e ottimizzo tutto dalle dimensioni alla scelta icone.

Ho creato un esempio con 4 righe di codice dove 2 metodi servono per impaginare gli elementi dimensioni e proporzioni oltre che posizione, in altri 2 frammenti determino le icone da utilizzare.

ovvio che qui ho messo solo 2 tipi di icone, ma il gioco vale lo studio.

Ho dovuto correggere il codice in quanto dava problemi nel ridimensionarsi su alcuni device... ora dovrebbe essere perfetto, ovviamente in base al mio layout.

#Region  Project Attributes 
   #ApplicationLabel: B4A Example
   #VersionCode: 1
   #VersionName: 
   'SupportedOrientations possible values: unspecified, landscape or portrait.
   #SupportedOrientations: portrait
   #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes 
   #FullScreen: False
   #IncludeTitle: True
#End Region

Sub Process_Globals
   'These global variables will be declared once when the application starts.
   'These variables can be accessed from all modules.

End Sub

Sub Globals
   Dim panelglobal As Panel
   Dim panelbar(5) As Panel
   Dim panelscreen As Panel
   Dim panelbuttom(4) As Panel
End Sub

Sub Activity_Create(FirstTime As Boolean)
   panelglobal.Initialize("")
   panelglobal.Color = Colors.ARGB(128,220,220,220)
   ' button action
   Dim xtop As Int = 0
   Dim xleft As Int = 0
   For i=0 To 4
      panelbar(i).Initialize("panelbar" & i)
      panelbar(i).Color = Colors.ARGB(255,Rnd(50,200),Rnd(50,200),Rnd(50,200))
      panelglobal.AddView(panelbar(i),xleft,xtop,(100%x/5),(100%x/5))
      xleft = xleft + (100%x/5)
   Next
   ' panel screen
   panelscreen.Initialize("panelscreen")
   panelscreen.Color = Colors.ARGB(255,Rnd(50,200),Rnd(50,200),Rnd(50,200))
   panelglobal.AddView(panelscreen,0,(100%x/5),100%x,100%y-((100%x/5)+(100%x/4)))
   ' button lert
   xleft = 0
   xtop = 100%y-100%x/4
   For i=0 To 3
      panelbuttom(i).Initialize("panelbuttom" & i)
      panelbuttom(i).Color = Colors.ARGB(255,Rnd(50,200),Rnd(50,200),Rnd(50,200))
      panelglobal.AddView(panelbuttom(i),xleft,xtop,(100%x/4),(100%x/4))
      xleft = xleft + (100%x/4)
   Next
   ' icone
   setting.imagePanelBar(panelbar)
   setting.imagePanelBotton(panelbuttom)
   ' imposta in base device
   Activity.AddView(panelglobal,0,0,100%x,100%y)
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

i setting per le icone

Sub imagePanelBar(panelbar() As Panel)

   Select Case Density
   
   Case .75
    panelbar(0).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_48.png"))
    panelbar(1).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_48.png"))
    panelbar(2).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_48.png"))
    panelbar(3).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_48.png"))
    panelbar(4).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_48.png"))
   Case 1
    panelbar(0).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_64.png"))
    panelbar(1).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_64.png"))
    panelbar(2).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_64.png"))
    panelbar(3).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_64.png"))
    panelbar(4).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_64.png"))
   Case 1.5
    panelbar(0).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_96.png"))
    panelbar(1).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_96.png"))
    panelbar(2).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_96.png"))
    panelbar(3).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_96.png"))
    panelbar(4).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_96.png"))
   Case 2
    panelbar(0).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_128.png"))
    panelbar(1).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_128.png"))
    panelbar(2).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_128.png"))
    panelbar(3).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_128.png"))
    panelbar(4).SetBackgroundImage(LoadBitmap(File.DirAssets,"Camera2_128.png"))
   
   End Select

End Sub

Sub imagePanelBotton(panelbutton() As Panel)

   Select Case Density
   
   Case .75
    panelbutton(0).SetBackgroundImage(LoadBitmap(File.DirAssets,"School_60.png"))
    panelbutton(1).SetBackgroundImage(LoadBitmap(File.DirAssets,"School_60.png"))
    panelbutton(2).SetBackgroundImage(LoadBitmap(File.DirAssets,"School_60.png"))
    panelbutton(3).SetBackgroundImage(LoadBitmap(File.DirAssets,"School_60.png"))
   Case 1
    panelbutton(0).SetBackgroundImage(LoadBitmap(File.DirAssets,"School_80.png"))
    panelbutton(1).SetBackgroundImage(LoadBitmap(File.DirAssets,"School_80.png"))
    panelbutton(2).SetBackgroundImage(LoadBitmap(File.DirAssets,"School_80.png"))
    panelbutton(3).SetBackgroundImage(LoadBitmap(File.DirAssets,"School_80.png"))
   Case 1.5
    panelbutton(0).SetBackgroundImage(LoadBitmap(File.DirAssets,"School_120.png"))
    panelbutton(1).SetBackgroundImage(LoadBitmap(File.DirAssets,"School_120.png"))
    panelbutton(2).SetBackgroundImage(LoadBitmap(File.DirAssets,"School_120.png"))
    panelbutton(3).SetBackgroundImage(LoadBitmap(File.DirAssets,"School_120.png"))
   Case 2
    panelbutton(0).SetBackgroundImage(LoadBitmap(File.DirAssets,"School_160.png"))
    panelbutton(1).SetBackgroundImage(LoadBitmap(File.DirAssets,"School_160.png"))
    panelbutton(2).SetBackgroundImage(LoadBitmap(File.DirAssets,"School_160.png"))
    panelbutton(3).SetBackgroundImage(LoadBitmap(File.DirAssets,"School_160.png"))
   End Select

End Sub

QUI IL TOOLS PER CONOSCERE LE ICONE QUANTO DEVONO ESSERE GRANDI

FATEMI SAPERE, sopratutto su note2 e galaxy s3, su Ace va bene, su Note 10 va bene u galaxy s2 va bene.

 

[ivanomonti]

Ecco il risultato del codice sopra su un note 10, domani metto quello di un 160 dpi e 120 dpi e 240 dpi

Galaxy SII - 240 dpi (480x800)

 

[arenaluigi]

Bravo Ivano.

Inviato dal mio GT-I9300 con Tapatalk 2

 

[ivanomonti]

Sono stra contento di essermi impuntato, sono riuscito a fare quello che volevo, nessun form da design ma tutto da codice.

Maggior controllo, migliore pulizia, scrivi di più ma non perdi tempo nell'impaginare, inquadri la situazione maggiormente e i risultati sono ottimi.

In unica ativity riesco a monitorare ben 5 attività diverse oltre che 4 attività specifiche per MIMMSos.

Ora e solo beta test, e perfezionamento, ma ho tutto in chiaro.

Screen da Samsung Ace s-5830i da 160 dpi

 

[arenaluigi]

Lo ripeterò fino alla morte:
codice..codice..codice..codice..codice..codice..codice..codice..codice.. e solo codice

 

[t3radm]

Buongiorno.
Rinnovo i ringraziamenti per la gentilezza e disponibilità a ivanomonti, ma devo purtroppo replicare il post in quanto non ho ancora risolto il mio problema, che probabilmente è stato equivocato, cerco quindi di spiegarmi meglio e con esempi pratici.

Con le diverse soluzioni proposte da ivanomonti e altre trovate nei forum, più quelle da me sperimentate si riesce a "impaginare" correttamente oggetti e icone sullo schermo del device a prescindere dalla sua dimenzione e risoluzione nativa, ma il problema è un'altro.

Una volta impaginata correttamente la mia WebView che si ridimenziona correttamente in funzione alla risoluzione del device, il suo CONTENUTO mostrato risulta non correttamente proporzionato alla ipotetica risoluzione della finestra WebView.

Ho fatto questa prova, ho inserito all'interno di un programmino di test datomi gentilmente da ivanomonti un WebView figlia del panel correttamente dimensionato, ho caricato come url la home page di questo sito [WebView1.LoadUrl("http://www.b4x.com")] ed ho controllato la porzione di pagina che veniva mostrata nella WebView.
Ho caricato sul pc la stessa pagina, e dopo aver fatto un printscreen ho ritagliato con photoshop la stessa porzione visualizzata sul cellulare, e guarda caso i pixel della porzione corrispondevano esattamente a 320x240 anziche 640x480px.

Potete fare una prova velocissima, su qualunque vostro progetto perfettamente settato ed impaginato semplicemente aggiungete una banalissima WebView e fategli visualizzare qualsiasi cosa (Pagina HTML, immagine JPG, Video etcc) poi controllate la porzione visualizzata e ditemi se vi corrisponde alla risoluzione che avete dimensionato !

Quindi nuovamente riassumo, non sono gli oggetti all'interno del layout a non dimensionarsi correttamente, ma il contenuto grafico di una WebView qualsiasi che mostra il suo contenuto con una dimenzione quadruplicata rispetto alla risoluzione aspettata.

PS stamattina avevo già pubblicato un messaggio molto simile e non so perchè è sparito

Aspetto con curiosità una possibile risposta

GRAZIE :sign0098:

 

[arenaluigi]

Prova a non usare la webview, usa un intent che apre una pagina web.

Inviato dal mio GT-I9300 con Tapatalk 2

 

[t3radm]

arenaluigi, utilizzando un intent le dimenzioni del contenuto sono corrette, ma per la mia applicazione non posso utilizzarla almeno che non sia configurabile come una webview, quindi eliminando ogni traccia di menù di navigazione, potendola ridemensionare e spostare arbistrariamente. :sign0013:

Probabilmente il problema è nella webview, ho comunque notato che mentre nella pagina aperta da intent è possibile fare un zoom in o zoom out rispetto alla visualizzazione iniziale, con la webview è possibile eseguire solo un zoom in, nel senso che dalle dimensioni iniziali si può solo ingrandire, e una volta ingrandito puoi fare un zoom out per rimpicciolire il contenuto, ma solo fino alle dimensioni iniziali

intanto sto cercando qualche libreria esterna per capire se così è possibile risolvere

Saluti

 

[t3radm]

Ho parzialmente risolto il problema della webview provando la libreria
"WebViewSettings"

In pratica prima di caricare la pagina Url con "WebView.LoadUrl("http://etc..")
aggiungo la linea di codice "WebViewSetting.setDefaultZoom(WebView, "FAR")

Dicevo parzialmente perchè tale metodo accetta solamente tre parametri :

"CLOSE", una sorta di zoom macro
"MEDIUM" penso sia l'impostazione di default se non si utilizza questo metodo
"FAR" Il massimo del zoom out possibile

Purtroppo neanche "FAR" porta ad avere la risoluzione della WebView 1:1 con quella del dispositivo, per cui ho ancora bisogno di "scrollare" l'interno della pagina visualizzata dalla webview, anche se molto meno.

Al prossimo aggiornamento