Buttons same width, but one not scaling the same width

U

unba1300

Guest
Hi,

In the Designer, I have five buttons, all the same width. But when I apply this code (as per the Designer Scripts Tutorial), the button in the middle does scale to the same width as the others.

B4X: 
'All variants script

delta = ((100%x + 100%y) / (320dip + 480dip) - 1)
rate = 0.5 'value between 0 to 1. 
scale = 1 + rate * delta

btnSpeech.Width = btnSpeech.Width * scale
btnSpeech.Height = btnSpeech.Height * scale
btnSpeech.SetLeftAndRight(0, btnSpeech.Width * scale)
btnSpeech.SetTopAndBottom(100%y - btnSpeech.Height * scale, 100%y)

btnMainPlay.Width = btnMainPlay.Width * scale
btnMainPlay.Height = btnMainPlay.Height * scale
btnMainPlay.SetLeftAndRight(0, btnMainPlay.Width * scale)
btnMainPlay.SetTopAndBottom(btnSpeech.Top - btnMainPlay.Height * scale, btnSpeech.Top)

btnMainSettings.Width = btnMainSettings.Width * scale
btnMainSettings.Height = btnMainSettings.Height * scale
btnMainSettings.SetLeftAndRight(100%x - btnMainSettings.Width * scale, 100%x)
btnMainSettings.SetTopAndBottom(100%y - btnMainSettings.Height * scale, 100%y)

btnMainMedia.Width = btnMainMedia.Width * scale
btnMainMedia.Height = btnMainMedia.Height * scale
btnMainMedia.SetLeftAndRight(100%x - btnMainMedia.Width * scale, 100%x)
btnMainMedia.SetTopAndBottom(btnMainSettings.Top - btnMainMedia.Height * scale, btnMainSettings.Top)

btnMainModify.Width = btnMainModify.Width * scale
btnMainModify.Height = btnMainModify.Height * scale
btnMainModify.HorizontalCenter = 50%x
btnMainModify.SetTopAndBottom(btnMainPlay.Top, btnSpeech.Top)

The attached screen capture shows what it looks like at 480 x 800, scale = 1.
:sign0163:
 

Attachments

  • Buttons not same width.jpg
    12 KB · Views: 335
Sort by date Sort by votes
U

unba1300

Guest
Layout file attached.

I should have written my question a little different too. The issue is not with the middle button, but rather that all five buttons should be the same width.

Thanks.
 

Attachments

  • layoutmain.bal
    7.8 KB · Views: 228
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
This is not related to the issue you describe however I think that you should remove the 800x480, scale=1 variant. It is not really needed.

Here is the correct code:
B4X: 
delta = ((100%x + 100%y) / (320dip + 480dip) - 1)
rate = 0.5 'value between 0 to 1. 
scale = 1 + rate * delta

txtMainBanner.SetLeftAndRight(0, 100%x)
txtMainBanner.Top = 0
txtMainBanner.Height = txtMainBanner.Height * scale

'only the height is scaled with the scale formula.
btnSpeech.SetTopAndBottom(100%y - btnSpeech.Height * scale, 100%y)
btnSpeech.SetLeftAndRight(0, 33%x)
btnMainSettings.SetTopAndBottom(btnSpeech.Top, btnSpeech.Bottom)
btnMainSettings.SetLeftAndRight(66%x, 100%x)
btnMainPlay.SetLeftAndRight(0, btnSpeech.Right)
btnMainPlay.SetTopAndBottom(btnSpeech.Top - btnSpeech.Height, btnSpeech.Top)
btnMainModify.SetTopAndBottom(btnMainPlay.Top, btnMainPlay.Bottom)
btnMainModify.SetLeftAndRight(33%x, 66%x)
btnMainMedia.SetTopAndBottom(btnMainPlay.Top, btnMainPlay.Bottom)
btnMainMedia.SetLeftAndRight(66%x, 100%x)

btnSpeech.TextSize = btnSpeech.TextSize * scale
btnMainMedia.TextSize = btnSpeech.TextSize
btnMainModify.TextSize = btnSpeech.TextSize
btnMainPlay.TextSize = btnSpeech.TextSize
btnMainSettings.TextSize = btnSpeech.TextSize

txtMainStory.SetTopAndBottom(txtMainBanner.Bottom, btnMainPlay.Top)
txtMainStory.SetLeftAndRight(0, 100%x)
txtMainStory.TextSize = txtMainStory.TextSize * scale

You should understand when to use the "scale" function and when to use percentage.
In this case the buttons widths should be set with percentage not scale. Because the ratio between the device width and the buttons width is constant (3 in this case).

The height and the buttons text size should use the scale function.
 
Upvote 0
U

unba1300

Guest
This has worked well so far for my screens in portriat, but now when I switch to landscape, what is in 'All variants script' gets applied to landscape as well (by design, of course). However, my layouts in landscape are quite different than portrait. Mostly with having buttons on the side, rather than the bottom to provide more vertical room for lists. And if I use 'Variant specific script: 480x320,scale=1' that would only apply to that specifically and not the other landscape resolutions and scales, right? Can we put code in the Designer Scripts such as 'If landscape Then'? I've been looking at the 'About' example, but I think some of my screens are more complex. I attached a layout to show how what I did in Designer Scripts is good for portrait, but produces an undesirable result for landscape. Stuck again.
:sign0163:
Wish the Designer had 'All portrait variants script' and 'All landscape variants script' sections.
 

Attachments

  • layoutcoauthor.bal
    4 KB · Views: 237
Last edited by a moderator:
Upvote 0
You must log in or register to reply here.

Similar Threads

  • Article
B4J Code Snippet [B4X][DSE] Designer Script Extensions - Scaling Preserving Aspect Ratio
Replies
0
Views
3K
William Lancee
  • Locked
  • Article
B4A Library [B4X] BCTextEngine / BBCodeView - Text engine + BBCode parser + Rich Text View
7 8 9
Replies
166
Views
121K
Erel
  • Article
B4A Library ScaleImageView - Pan and zoom large images
2 3 4
Replies
63
Views
34K
Cebuvi
Games [XUI2D] Units and Scales
Replies
5
Views
5K
Erel
  • Article
B4J Library [B4X] [XUI] xChart Class and b4xlib
33 34 35
Replies
685
Views
219K
klaus
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…