Italian B4A: Come centrare ImgView dentro panel?

XorAndOr

Active Member
Licensed User
Longtime User
Ciao
Nel designer ho cercato in tutte le combinazioni possibili con anchor ma niente
le ImageView sono sempre spostate o a destra o a sinistra rispetto al panel o alla schermata telefono.
Quando si tratta di label o button che hanno al massimo 2 view, non ho problemi
ma in questo caso le ImageView sono vicine e non so proprio come gestire sta cosa.
Qualcuno sa come fare? grazie
ImgCentro.png

allego esempio...
 

Attachments

  • CentraPanelView.zip
    26.2 KB · Views: 52

sirjo66

Well-Known Member
Licensed User
Longtime User
ho provato a modificare gli anchor delle 20 imageview e a me sembra funzionare.
ho messo anchor sinistra-destra-sopra
ecco il risultato:
 

Attachments

  • Screenshot_20231112_150816.jpg
    Screenshot_20231112_150816.jpg
    306.6 KB · Views: 49
Last edited:

XorAndOr

Active Member
Licensed User
Longtime User
ho provato a modificare glil anchor delle 20 imageview e a me sembra funzionare.
ho messo anchor sinistra-destra-sopra
ecco il risultato:
grazie @sirjo66 della risposta
il tuo screenshot è perfetto
ma sul mio telefono sono spostate a sinistra, cioè c'è piu' spazio a destra delle icone
Quando dici sinistra-destra-sopra non ho ben capito come devo metterle
 

LucaMs

Expert
Licensed User
Longtime User
a me non sembrano centrati le icone sul panel
Io ti ho solo suggerito come centrare il pannello che contiene le ImageView, non queste nel pannello, perché avevo letto soltanto:
ma sul mio telefono sono spostate a sinistra, cioè c'è piu' spazio a destra delle icone

Il compito non è mai facilissimo, "grazie" al fatto che i maledetti produttori non si decidono a standardizzare il rapporto base/altezza, come è per i televisori, per i quali è fisso a 16:9 (immagina se ogni TV avesse un rapporto diverso, come diavolo gli pare; come si vedrebbero i programmi/film? Ecco!).

Il problema è che tu hai ancorato i lati sx e dx del panel, cosa che si può fare e in molti casi serve. Questo comporta che il pannello su alcuni schermi avrà un certo rapporto base/altezza, su altri uno diverso.

Devi per forza scrivere dello scritpt. Calcolare la dimensione massima del lato delle ImageView (tutte uguali e quadrate, giusto?), quindi calcolare gli spazi orizzontali e verticali e posizionare le ImageView.

C'è una "novità" creata da Erel: DSE Designer Script Extensions. Uno degli esempi credo faccia proprio al caso tuo (non l'ho provato, nemmeno installato).
 
Last edited:

LucaMs

Expert
Licensed User
Longtime User
C'è una "novità" creata da Erel: DSE Designer Script Extensions. Uno degli esempi credo faccia proprio al caso tuo (non l'ho provato, nemmeno installato).
L'ho scaricato, modificato leggermente il layout, in modo che abbia 20 button, 5 righe x 4 colonne come nel tuo caso, ed effettivamente si posizionano bene (ed anche in B4J... provare).

Ovviamente non sono stato lì a cambiare i Text dei button!
 

Attachments

  • DSExampleNumpad.zip
    19.4 KB · Views: 40

LucaMs

Expert
Licensed User
Longtime User
L'ho scaricato, modificato leggermente il layout, in modo che abbia 20 button, 5 righe x 4 colonne come nel tuo caso, ed effettivamente si posizionano bene (ed anche in B4J... provare).

Ovviamente non sono stato lì a cambiare i Text dei button!
Come non detto (colpa della fretta). Quello va bene per posizionare le View (i Button, in questo caso) ma non ne conserva la forma quadrata.

Quindi dovresti scrivere il tuo script nel layout, come ti ho scritto in un post precedente, o modificare quello di Erel, nella B4XMainPage.
 

sirjo66

Well-Known Member
Licensed User
Longtime User
ti dico quello che ho fatto io: ho selezionato tutte e 20 le imageview e poi ho selezionato l'ancoraggio destra-sinistra, come nella immagine qui di seguito

ImmagineB4X.png
 

LucaMs

Expert
Licensed User
Longtime User
ti dico quello che ho fatto io: ho selezionato tutte e 20 le imageview e poi ho selezionato l'ancoraggio destra-sinistra, come nella immagine qui di seguito
Non va bene, così ottieni soltanto che la colonna di destra avrà sempre la stessa distanza dal bordo destro del pannello, ma a seconda della larghezza di quest'ultimo, sarà più o meno distante dalla penultima colonna di view.

Cmq, un modo semplice e veloce, ma dipende se a te vada bene il risultato finale, è semplicemente di disancorare entrambi i bordi del pannello, lasciare solo l'ancoraggio di default sinistro, e scrivere quel:

PnlConView.HorizontalCenter = 50%x

Sul mio smartphone:
1.jpg
 

Filippo

Expert
Licensed User
Longtime User
Prova a scrivere una cosa del genere nello scritpt:
B4X:
'All variants script
AutoScaleAll

spazio = (PnlConView.Width - ImageView1.Width * 4) / 2

'prima riga
ImageView1.Left = spazio
ImageView2.Left = ImageView1.Right
ImageView3.Left = ImageView2.Right
ImageView4.Left = ImageView3.Right

'seconda riga
ImageView5.Left = spazio
ImageView6.Left = ImageView5.Right
ImageView7.Left = ImageView6.Right
ImageView8.Left = ImageView7.Right

'terza riga
'...
'...

1699817800536.png
 

XorAndOr

Active Member
Licensed User
Longtime User
Cmq, un modo semplice e veloce, ma dipende se a te vada bene il risultato finale, è semplicemente di disancorare entrambi i bordi del pannello, lasciare solo l'ancoraggio di default sinistro, e scrivere quel:

PnlConView.HorizontalCenter = 50%x
Si in questo modo mi funziona benissimo ty;)
 

XorAndOr

Active Member
Licensed User
Longtime User
Prova a scrivere una cosa del genere nello scritpt:
B4X:
'All variants script
AutoScaleAll

spazio = (PnlConView.Width - ImageView1.Width * 4) / 2

'prima riga
ImageView1.Left = spazio
ImageView2.Left = ImageView1.Right
ImageView3.Left = ImageView2.Right
ImageView4.Left = ImageView3.Right
'...
'...
grazie @Filippo provo anche la tua soluzione..
 

sirjo66

Well-Known Member
Licensed User
Longtime User
anche io avevo pensato una soluzione come quella di @Filippo, e sinceramente mi stavo chiedendo se non c'è un sistema per farlo tutto con un ciclo FOR e gli indici

..... cioè: c'è un sistema per accedere alle view tramite il loro nome ??
ad esempio, in VB.NET io scrivo:
B4X:
Me.Controls("Imageview4").Left = .........

Si era parlato tempo fa di creare una List e mettere le view dentro a questa list e poi così poterla ciclare, ma come facciamo a mettere le view dentro qui senza dover scrivere 20 righe di codice ??
 

Sagenut

Expert
Licensed User
Longtime User
anche io avevo pensato una soluzione come quella di @Filippo, e sinceramente mi stavo chiedendo se non c'è un sistema per farlo tutto con un ciclo FOR e gli indici

..... cioè: c'è un sistema per accedere alle view tramite il loro nome ??
ad esempio, in VB.NET io scrivo:
B4X:
Me.Controls("Imageview4").Left = .........

Si era parlato tempo fa di creare una List e mettere le view dentro a questa list e poi così poterla ciclare, ma come facciamo a mettere le view dentro qui senza dover scrivere 20 righe di codice ??
In teoria con questo
https://www.b4x.com/android/forum/threads/b4x-dse-designer-script-extensions.141312/
Ma personalmente non l'ho ancora provato.
 

LucaMs

Expert
Licensed User
Longtime User
Si era parlato tempo fa di creare una List e mettere le view dentro a questa list e poi così poterla ciclare, ma come facciamo a mettere le view dentro qui senza dover scrivere 20 righe di codice ??
Sono certo che sai che puoi "ciclarle" (e quindi, volendo, anche inserirle in una List o Map) usando il metodo GetAllViewsRecursive del contenitore.

Usando quel DSE puoi scrivere una routine facilmente riutilizzabile, in una classe.

La faccenda "nome delle view"... fu la prima di cui rimasi sorpreso... 10 anni fa! 😄 All'epoca sarà stato quasi certamente uno dei miei primi post, prime domande.
 

LucaMs

Expert
Licensed User
Longtime User
Cercavo altro e mi sono imbattuto in questo:

https://www.b4x.com/android/forum/threads/b4x-dse_layout-align-and-spread-controls.144438/

Che poi, anche se non l'ho provato, è ciò che dovremmo fare tutti noi: creare le nostre B4XLib di utilità, grafiche ma non solo.


Cercavo... non so se ho "sognato" ma mi pare di ricordare che "recentemente" sia stata aggiunta la possibilità di scrivere un ciclo For anche nello script del Designer.
Ne sono sicuro al... 1%, tanto è vero che stavo cercando 😊 (e per ora non ho trovato; magari provoLO direttamente, faccio prima).


P.S. Ho provato. Sognavo. Credo che la novità che avevo notato non fosse il ciclo For ma If - End If.
 

sirjo66

Well-Known Member
Licensed User
Longtime User
Sono certo che sai che puoi "ciclarle" (e quindi, volendo, anche inserirle in una List o Map) usando il metodo GetAllViewsRecursive del contenitore.

Grazie mille, non mi ricordavo più il GetAllViewsRecursive !!!
 
Top