Android Question Relative units %X, %Y

Martin Larsen

Active Member
Licensed User
As I understand it, the relative units in the designer is relative to the parent container.

However it doesn't seem to be the case. In a simple layout with a panel and a button I have the follow designer script:

B4X:
'All variants script
AutoScaleAll
Panel1.Width = 80%X
Panel1.Height = 80%Y
Panel1.HorizontalCenter = 50%X
Panel1.VerticalCenter = 50%Y

Button1.Width = 80%X
Button1.Height = 80%Y
Button1.HorizontalCenter = 50%X
Button1.VerticalCenter = 50%Y
The output is this which is not what I expect:

upload_2019-9-27_16-46-31.png


I would expect Button1 to be centered inside Panel1 one with a margin of 10% of the panel's width and height.

EDIT: Now I after listening to th DIP tutorial again at 4.55 I reaIize that Erel says the units are relative to the control, eg. a panel, that loads the layout. So I misunderstood it.

But wouldn't it be more logical that these coordinates are relative to the parent container? (the way I first understood it).

I think it would make building nested layouts easier. Especially because you can't refer to a control's parent in the designer script like this:

B4X:
Button1.Width = Button1.Parent.Width * 0.8 ' Invalid
 

sorex

Expert
Licensed User
to make sure it fits the parent you better use

B4X:
Button1.Width = panel1.width*.8
Button1.Height = panel1.height*.8
Button1.HorizontalCenter = panel1.width*.5
Button1.VerticalCenter = panel1.height*.5
it becomes a habbit to think like that.
 

klaus

Expert
Licensed User
As I understand it, the relative units in the designer is relative to the parent container.
No, the units are relative to the parent view where the layout is loaded with LoadLayout.

You could use anchors.
 

Martin Larsen

Active Member
Licensed User
@sorex
Yes, this is what I would do instead, but I need 9 copies of the container incl. children (copy/paste). Now I have to edit the lines according to the actual container (Panel2, Panel3) etc. If the units were relative to the parent, it would be much easier:

B4X:
Button1.Width = 80%X
Button1.Height = 80%Y
Button1.HorizontalCenter = 50%X
Button1.VerticalCenter = 50%Y

Button2.Width = 80%X
Button2.Height = 80%Y
Button2.HorizontalCenter = 50%X
Button2.VerticalCenter = 50%Y
In html/css the units are relative to the parent unless you use position: absolute. I believe it would be preferable for the designer script as well.
 

sorex

Expert
Licensed User
if you need 9 copies you better do it all in code with a small loop. it would be a few lines longer than the code you already showed.
 

sorex

Expert
Licensed User
maybe it's beginners advice? All my games were recoded to XUI some time ago and none of them use layout files.

You can still have a look at that later.

Or is it a customer XUI view you're creating? (if that exists)
I don't have any experience with that.
 

Martin Larsen

Active Member
Licensed User
It's just a standard view with 9 buttons in a 3 x 3 grid.

Changing X% to work like I suggest would break a lot of code, so Erel could instead use something like %XP and %YP (P for parent).

Erel, this is now officially a wish :)
 

sorex

Expert
Licensed User
here's what it takes to do that in code (it's B4J so change prefwidth to width etc)

B4X:
Dim p As Pane
p.Initialize("")
MainForm.RootPane.AddNode(p,0,0,MainForm.Width*.8,MainForm.Height*.8)

For y=0 To 2
 For x=0 To 2
  Dim b As Button
  b.Initialize("btn")
  Dim bXui As B4XView=b
  bXui.Text=x &"-"& y
  bXui.tag=x &"-"& y
  p.AddNode(bXui,x*(p.prefWidth/3),y*(p.prefHeight/3),p.prefWidth/3,p.prefHeight/3)
 Next
Next


Sub btn_Click
 Dim b As B4XView=Sender
 Log(b.Tag)
End Sub
 
Top