Android Question [SOLVED]Visual Designer..arranging multiple buttons.. not arranging in the correct position??

[eric19740521]

Visual Designer.. arranging multiple buttons.. not arranging in the correct position??

I use two Layouts to do..one for display. one for button function

I use script to calculate all button positions..for example 20%y,40%y,60%y,80%y

I noticed that the button position is not as I thought..

i think. it might be in decimal point
100%y=977
977*0.40=390.8
977*0.60=586.2
977*0.80=781.6

attach my source code

'Variant specific script: 320x480,scale=1
'c 2 3 4
btn1.SetTopAndBottom(0,20%y)
btn2.SetTopAndBottom(0,20%y)
btn3.SetTopAndBottom(0,20%y)
btn4.SetTopAndBottom(0,20%y)
btn1.SetLeftAndRight(0%x,25%x)
btn2.SetLeftAndRight(25%x,50%x)
btn3.SetLeftAndRight(50%x,75%x)
btn4.SetLeftAndRight(75%x,100%x)

'7 8 9
num7.SetTopAndBottom(20%y ,40%y)
num8.SetTopAndBottom(20%y ,40%y)
num9.SetTopAndBottom(20%y ,40%y)
btn5.SetTopAndBottom(20%y ,40%y)
num7.SetLeftAndRight(0%x,25%x)
num8.SetLeftAndRight(25%x,50%x)
num9.SetLeftAndRight(50%x,75%x)
btn5.SetLeftAndRight(75%x,100%x)

'4 5 6
num4.SetTopAndBottom(40%y,60%y)
num5.SetTopAndBottom(40%y,60%y)
num6.SetTopAndBottom(40%y,60%y)
btn6.SetTopAndBottom(40%y,60%y)
num4.SetLeftAndRight(0%x,25%x)
num5.SetLeftAndRight(25%x,50%x)
num6.SetLeftAndRight(50%x,75%x)
btn6.SetLeftAndRight(75%x,100%x)

'1 2 3
num1.SetTopAndBottom(60%y,80%y)
num2.SetTopAndBottom(60%y,80%y)
num3.SetTopAndBottom(60%y,80%y)
btn7.SetTopAndBottom(60%y,100%y)
 
num1.SetLeftAndRight(0%x,25%x)
num2.SetLeftAndRight(25%x,50%x)
num3.SetLeftAndRight(50%x,75%x)
btn7.SetLeftAndRight(75%x,100%x)

'0 & .
num0.SetTopAndBottom(80%y,100%y)
num10.SetTopAndBottom(80%y,100%y)
num0.SetLeftAndRight(0%x,50%x)
num10.SetLeftAndRight(50%x,75%x)
'btn7.SetTopAndBottom(75%x,100%x)

 

[Erel]

(not related but I don't recommend using variant specific scripts)

Make sure that AutoScaleAll is disabled. The values are casted to ints (without rounding if I remember correctly). Try to add 0.5 to the values and see if it helps.

 

[eric19740521]

thanks,Erel.

I have put..
AutoScaleAll is disabled,

Then,I wrote log.

To Display the "num4 bottom" and "num1 top" values

 Log("100%y= "& (100%y) )
 Log("num4 bottom= "& (num4.Top + num4.Height) )
 Log("num1 top= "& num1.Top )

100%y= 704
num4 bottom= 294
num1 top= 295

"num4 bottom" and "num1 top" should be the same value.

num4.SetTopAndBottom(40%y,60%y)
num1.SetTopAndBottom(60%y,80%y)

In "VisualDesigner Script", I don't understand 60%y and 40%y, why would it cause a problem??
This is my first attempt to design with "VisualDesigner Script"

 

[Erel]

This is not the gap that you are seeing.

 

[Sagenut]

Post your project if possible so there will be chance to check for other issues.

 

[eric19740521]

Sorry! I thought I posted... I added the source code

Where it happens will be different on different phones!!

Suppose there are three mobile phones. (horizontal normal, vertical abnormal) or (horizontal abnormal, vertical normal) ...
or (horizontal normal, vertical normal) ...

The file is as follows:

Calculator B4A Source Code

Buttons and labels use CustomView ..xyzUI Lib(xyzButton.xyzLabel ) ..B4J Source Code,

 

[Sagenut]

Share your project using the Attach File command of the forum posting.

 

[eric19740521]

Calculator.Zip ==> Calculator B4A Source Code

xyzUI.zip ==> Buttons and labels use CustomView ..xyzUI Lib(xyzButton.xyzLabel ) ..

 

[Sagenut]

The project is missing the .BAL Designer files.
Did you exported it using the EXPORT AS ZIP function of the B4A IDE?

 

[eric19740521]

No...Sorry
After the file is compressed, the .zip file is large. So some of them were deleted by me
I checked, bal was deleted by me

 

[Sagenut]

It looks like the same example without BAL has been attached.
Sorry but I am calling myself out.

 

[klaus]

You should create the zip file in the IDE menu !

 

[eric19740521]

klaus:​

thx..I use b4a packaging tool. Re-upload .I download the file. And check if it contains bal...(layout.bal,func.bal)

Sagenut:​

sorry..I have checked.. but the uploaded files are always missing..

 

[klaus]

On my device it does not look as on yours.
But I see too a small difference in the line.
I replaced for the left buttons the code like below and it seems to look better:
num4.SetTopAndBottom(y4,y6)
by
num4.Height = y2
num4.Top = num7.Bottom
and for the bottom ones.
num0.Height = 100%y - num1.Bottom
num0.Top = num1.Bottom
Try the same code to see if it looks better on your devices.
I checked only for the left row of buttons, you need to modify the code for the others.

 

[eric19740521]

klaus:​

1.I tried your method. There is still something abnormal on a certain mobile phone..

So I changed the way...Increase the spacing size

2.

I give up the power of Visual Designer..​

I try to write in B4A

No problem with this.. but need to take some care to maintain various equipment sizes

    '按鈕
    btn1.Height = PaneFunc.Height /5
    btn1.Width = PaneFunc.Width /4
  
    btn1.Top = 0
    btn2.Top = 0
    btn3.Top = 0
    btn4.Top = 0
    btn1.Height = PaneFunc.Height /5
    btn2.Height = btn1.Height
    btn3.Height = btn1.Height
    btn4.Height = btn1.Height
  
  
  
  
    num7.Top = btn1.Top + btn1.Height
    num8.Top = num7.Top
    num9.Top = num7.Top
    btn5.Top = num7.Top
    num7.Height = btn1.Height
    num8.Height = btn1.Height
    num9.Height = btn1.Height
    btn5.Height = btn1.Height

    num4.Top = num7.Top + num7.Height
    num5.Top = num4.Top
    num6.Top = num4.Top
    btn6.Top = num4.Top
    num4.Height = btn1.Height
    num5.Height = btn1.Height
    num6.Height = btn1.Height
    btn6.Height = btn1.Height
  
    num1.Top = num4.Top + num4.Height
    num2.Top = num1.Top
    num3.Top = num1.Top
    btn7.Top = num1.Top
    num1.Height = btn1.Height
    num2.Height = btn1.Height
    num3.Height = btn1.Height
    btn7.Height = 100%y-num1.Top
  
    num0.Top = num1.Top + num1.Height
    num10.Top = num0.Top
    num0.Height = PaneFunc.Height - num0.Top
    num10.Height = num0.Height
  
  

    btn1.Left = 0
    btn2.Left = btn1.Left+btn1.Width
    btn3.Left = btn2.Left+btn1.Width
    btn4.Left = btn3.Left+btn1.Width
    btn2.Width = btn1.Width
    btn3.Width = btn1.Width
    btn4.Width = btn1.Width
  
    num7.Left = 0
    num8.Left = btn1.Left+btn1.Width
    num9.Left = btn2.Left+btn1.Width
    btn5.Left = btn3.Left+btn1.Width
    num7.Width = btn1.Width
    num8.Width = btn1.Width
    num9.Width = btn1.Width
    btn5.Width = btn1.Width

    num4.Left = 0
    num5.Left = btn1.Left+btn1.Width
    num6.Left = btn2.Left+btn1.Width
    btn6.Left = btn3.Left+btn1.Width
    num4.Width = btn1.Width
    num5.Width = btn1.Width
    num6.Width = btn1.Width
    btn6.Width = btn1.Width
  
    num1.Left = 0
    num2.Left = btn1.Left+btn1.Width
    num3.Left = btn2.Left+btn1.Width
    btn7.Left = btn3.Left+btn1.Width
    num1.Width = btn1.Width
    num2.Width = btn1.Width
    num3.Width = btn1.Width
    btn7.Width = btn1.Width
  
    num0.Left = 0
    num10.Left = num3.left
    num0.Width = btn1.Width+btn2.Width
    num10.Width = btn1.Width

 

[klaus]

I suppose that you modified only the code I suggested you in post #14.
You need, of course, to modify the code for all buttons with the same principle.

 

[eric19740521]

@klaus:​

1.I tried your method. There is still something abnormal on a certain mobile phone..
I'm sure all buttons are modified

I'll check again tomorrow

 

[klaus]

If the buttons for 5 and 2 are defined the same way as the buttons for 4 and 1, I do not understand the difference in appearance of the line in between.
The same for buttons 6 and 3.

 

[eric19740521]

klaus:​

thx.Test several devices. The screen buttons are arranged normally

I refer to klaus' opinion...
Because of the location. I try not to use SetTopAndBottom and SetLeftAndRight

Visual Designer has a good design method. It takes more thought to adopt traditional design. Visual Designer can do preview. And he is more comfortable

Below is the correction I made

'
btn1.Height = 20%y
btn1.Width = 25%x
H1 = btn1.Height         '<------
W1 = btn1.Width          '<-----
'c 2 3 4
btn1.SetTopAndBottom(0,H1)
btn2.SetTopAndBottom(0,H1)
btn3.SetTopAndBottom(0,H1)
btn4.SetTopAndBottom(0,H1)


'7 8 9
num7.Top = btn1.Bottom
num7.Height = H1
num8.Top = btn1.Bottom
num8.Height = H1
num9.Top = btn1.Bottom
num9.Height = H1
btn5.Top = btn1.Bottom
btn5.Height = H1
 

'4 5 6
num4.Top = num7.Bottom
num4.Height = H1
num5.Top = num7.Bottom
num5.Height = H1
num6.Top = num7.Bottom
num6.Height = H1
btn6.Top = num7.Bottom
btn6.Height = H1
 

'1 2 3
num1.Top = num4.Bottom
num1.Height = H1
num2.Top = num4.Bottom
num2.Height = H1
num3.Top = num4.Bottom
num3.Height = H1
btn7.Top = btn6.Bottom
btn7.Height = 100%y- btn7.Top
 

'0 & .
num0.Top = num1.Bottom
num0.Height = 100%y-num0.Top
num10.Top = num1.Bottom
num10.Height = 100%y-num0.Top
 
'C 7 4 1 0
'btn1.SetLeftAndRight(0%x,W1)
'num7.SetLeftAndRight(0%x,W1)
'num4.SetLeftAndRight(0%x,W1)
'num1.SetLeftAndRight(0%x,W1)
'num0.SetLeftAndRight(0%x,W1)
btn7.Left = 0%x
num7.Left = 0%x
num4.Left = 0%x
num1.Left = 0%x
'num0.Left = 0%x

btn7.Width = W1
num7.Width = W1
num4.Width = W1
num1.Width = W1
'num0.Width = W1

'/ 8 5 2
btn2.Left = btn1.Right
num8.Left = num7.Right
num5.Left = num4.Right
num2.Left = num1.Right
btn2.Width = W1
num8.Width = W1
num5.Width = W1
num2.Width = W1

'X 9 6 3
btn3.Left = btn2.Right
num9.Left = num8.Right
num6.Left = num5.Right
num3.Left = num2.Right
btn3.Width = W1
num9.Width = W1
num6.Width = W1
num3.Width = W1

'<- - + =
btn4.Left = btn3.Right
btn5.Left = num9.Right
btn6.Left = num6.Right
btn7.Left = num3.Right
btn4.Width = W1
btn5.Width = W1
btn6.Width = W1
btn7.Width = W1

'
num0.Left = num1.Left
num0.Width = num2.Right
'num0.Right = num2.Right     'this is false
num10.Left = num0.Right
num10.Width = W1