Android Question Designer Code to space buttons apart

[aaronk]

Hello,

I am trying to create a layout using the designer and need some help with the code in the designer.

First of all I am trying to display 12 buttons on the screen and spacing them all apart evenly.
I need to have 3 buttons per line and I am trying to place them in a panel.

I have changed the parent for each of the buttons to be in the panel rather then the Activity.

When the panel is re-sized I need the buttons to move closer etc.

Here is what I am trying to do:

The layout on the left is when it's full screen, and the layout on the right is when I re-size the panel.
The size of the buttons should stay the same size just need them to move closer to each other when the panel is re-sized.

I can't seem to work out how to space the buttons apart and then when I re-size the panel it make it follow.

The panel is called 'Keys' and each of the buttons are just called Key1, Key2 etc..

Here is what I have done so far:

Keys.Width = 100%x
Keys.Height = 100%y 
Keys.Top = 0dip
Keys.Left = 0dip

Key1.Top = 100%y / 4
Key2.Top = 100%y / 4
Key3.Top = 100%y / 4
Key4.Top = 100%y / 4 + 20%y
Key5.Top = 100%y / 4 + 20%y
Key6.Top = 100%y / 4 + 20%y
Key7.Top = 100%y / 4 + 40%y
Key8.Top = 100%y / 4 + 40%y
Key9.Top = 100%y / 4 + 40%y
Key10.Top = 100%y / 4 + 60%y
Key11.Top = 100%y / 4 + 60%y
Key12.Top = 100%y / 4 + 60%y

Key1.Left = (Keys.HorizontalCenter / 3)  - Key1.Width
Key2.Left = Keys.HorizontalCenter - Key2.Width 
Key3.Left = (Keys.HorizontalCenter / 3) + Key3.Width + 100dip

Key4.Left = (Keys.HorizontalCenter / 3)  - Key4.Width
Key5.Left = Keys.HorizontalCenter - Key5.Width 
Key6.Left = (Keys.HorizontalCenter / 3) + Key6.Width + 100dip

Key7.Left = (Keys.HorizontalCenter / 3)  - Key7.Width
Key8.Left = Keys.HorizontalCenter - Key8.Width 
Key9.Left = (Keys.HorizontalCenter / 3) + Key9.Width + 100dip

Key10.Left = (Keys.HorizontalCenter / 3)  - Key10.Width
Key11.Left = Keys.HorizontalCenter - Key11.Width 
Key12.Left = (Keys.HorizontalCenter / 3) + Key12.Width + 100dip

When I run the above code it looks like this:

Then when I change the size of my panel to:

Keys.Width = 100%x
Keys.Height = 100%y 
Keys.Top = 0dip
Keys.Left = 0dip

The layout then looks like the following:

I am guessing I am doing something wrong but I can't work out how to space them correctly.

Anyone able to help me out spacing the buttons evenly in the panel no matter what size the panel is ?

 

[DonManfred]

100%x and 100%y seems not to be 100%x/y from panel keys. It seems to be always the variant-size 100%

You set the keys position and size with

Keys.Width = 100%x
Keys.Height = 100%y
Keys.Top = 0dip
Keys.Left = 0dip

and then you setup the size/positions of keyX with

Key1.Top = 100%y / 4
Key2.Top = 100%y / 4
Key3.Top = 100%y / 4

you are not referencing the panel size. You are referencing the VARIANT-size... The Top-Position of your KeyXs seems tobee the same....

don´t know but locically it should be

Keys.Width = 100%x
Keys.Height = 100%y
Keys.Top = 0dip
Keys.Left = 0dip

Key1.Top = Keys.Height / 4
Key2.Top = Keys.Height / 4
Key3.Top = Keys.Height / 4
[..]

The same adapt to the LEFTs from you KeyXs... They have to be relative to panel.width not variant-width

 

[LucaMs]

I have a doubt about the fixed size of buttons, as on the display of 3 "and a 10" you would get less than ideal results.

However, I would not use the Script Designer (if it is not the new one) but I would put in the code of the activity:

I would put the buttons in a List (or Map)

The size and position of the panel (width, height, top, left)
the button size (width and height)
variables with the distances between the buttons expressed in percentages of the panel dimensions.
For example:
BtnXshift = panel.width * 0.05 ' (5% panel.width)
BtnYshift = panel.width * 0.05
the position of the first button (top left) as a percentage of the size of the panel
and then two nested loops
x from 0 to 2
y from 0 to 3
in which to calculate the top and left of each button, adding BtnXshift and BtnYshift.

In the code of the app, you could also use the Klaus' module, which contains suitable functions.

If you really want to use the designer ... I have to think a bit

 

[mangojack]

Here is my two cents worth ...
This works for your example using 12 Buttons / Keys
Dips and Layouts are not my strongest suit .. !

Sub ResizePanel

'  ***  Alter the Panel Size  to see the results  ......
Keys.Width = 80%x
Keys.Height = 80%y
Keys.Top = 0dip
Keys.Left = 0dip

'------------------------------------------

Dim xSize As Int = keys.Width
Dim Xpos As Int = xsize / 6

Dim YSize As Int = keys.Height
Dim Ypos As Int = YSize / 8

Dim keyWidth As Int = Key1.Width / 2
Dim keyHeight As Int = Key1.Height /2

Key1.Top = Ypos - keyHeight
Key2.Top = Ypos - keyHeight
Key3.Top = Ypos - keyHeight
Key4.Top = Ypos * 3 - keyHeight
Key5.Top = Ypos * 3 - keyHeight
Key6.Top = Ypos * 3 - keyHeight
Key7.Top = Ypos * 5  - keyHeight
Key8.Top = Ypos * 5 - keyHeight
Key9.Top = Ypos * 5 - keyHeight
Key10.Top = Ypos * 7 - keyHeight
Key11.Top = Ypos * 7 - keyHeight
Key12.Top = Ypos * 7 - keyHeight

Key1.Left = Xpos  - keyWidth
Key2.Left = Xpos * 3 - keyWidth
Key3.Left = Xpos * 5 - keyWidth

Key4.Left = Xpos  - keyWidth
Key5.Left = Xpos * 3 - keyWidth
Key6.Left = Xpos * 5 - keyWidth

Key7.Left = Xpos  - keyWidth
Key8.Left = Xpos * 3 - keyWidth
Key9.Left = Xpos * 5 - keyWidth

Key10.Left = Xpos  - keyWidth
Key11.Left = Xpos * 3 - keyWidth
Key12.Left = Xpos * 5 - keyWidth

End Sub

** Edit .. I'm sure you could add and space the buttons dynamically with more concise code within a loop

Cheers mj

 

[klaus]

Why do you want to do it in the Designer ?
I would do it in the code.

Attached a small test program with your approach.
Code:

Sub Globals
    Dim Keys As Panel
    Dim Key1, Key2, Key3, Key4, Key5, Key6, Key7, Key8, Key9, Key10, Key11, Key12 As Button
    Dim Key(12) As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("PanelButtons")
    Key = Array As Button(Key1, Key2, Key3, Key4, Key5, Key6, Key7, Key8, Key9, Key10, Key11, Key12)
End Sub

Sub ResizePanel(Width As Int, Height As Int)
   Dim x0, dx, y0, dy As Float
   Dim h, v, j As Int

   Keys.Width = Width
   Keys.Height = Height
   x0 = (Keys.Width - 3 * Key1.Width) / 4
   dx = x0 + Key1.Width
   y0 = (Keys.Height- 4 * Key1.Height) / 5
   dy = y0 + Key1.Height
 
   For v = 0 To 3
    For h = 0 To 2
       j = v * 3 + h
       Key(j).Left = x0 + h * dx
       Key(j).Top = y0 + v * dy
     Next
   Next
End Sub

The routine could be optimized to also adapt the button size automatically.

The problems in your code are:
- You use %x and %y values, these refer to the screen size, in the DesignerScripts they refer to the parent view !
- You set the Top property to 100%y / 4, which means at the top quarter of the screen !