Android Question Relative units %X, %Y

[Martin Larsen]

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:

'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:

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:

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

 

[sorex]

to make sure it fits the parent you better use

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]

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]

@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:

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]

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.

 

[Martin Larsen]

It's for XUI. Erel recommends in the tutorial to stay in the designer as much as possible for XUI.

 

[sorex]

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]

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]

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

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

 

[Martin Larsen]

Thanks!