Android Question % of parent sizing with Designer

Discussion in 'Android Questions' started by Arf, Mar 11, 2015.

  1. Arf

    Arf Active Member Licensed User

    I need to create a menu with 4 square buttons around the centre 1/2 (ish), that maintain their squareness and spacing when orientation changes.
    So I thought best to put them on a panel, and control the aspect ratio, size and positioning of the panel, then as children the buttons will always be right.
    I'm trying to set the top left button to the following position in my panel, in the design script for that layout:
    TopLeftButton.SetLeftAndRight(5%x, 45%x)
    TopLeftButton.SetTopAndBottom(5%y, 45%y)

    TopLeftButton is a child of my panel, however the % settings seem to apply to the total screensize, and not the parent.

    How can I set the %'s to be that of the parent instead of the screen size? Hope this makes sense!
     
  2. TheJinJ

    TheJinJ Active Member Licensed User

    You can reference the panel and get it's width, height, bottom, top etc. if your panel is sized as you need you can split it up for the children

    eg.
    TopLeftButton.SetLeftAndRight(panel.left, panel.width / 2)
    TopLeftButton.SetTopAndBottom(panel.top, panel.height / 2)

    TopRightButton.SetLeftAndRight(TopLeftButton.right, TopLeftButton.width)
     
    Arf and Erel like this.
  3. Arf

    Arf Active Member Licensed User

    Thanks, getting there but having a bit of brain failure:

    I'm trying to end up with something like this:
    [​IMG]

    The ButtonPanel (square panel forced to 1:1 aspect ratio) seems to be in the right place, but my bottoms are way off to the right for some reason. ButtonPanel is set to be parent of all the buttons. Ignore the PcConnect button above, thats just floating around for the moment as it goes elsewhere

    [​IMG]

    Here's my script:
    Code:
    'Variant specific script: 961x552,scale=1
    BackPanel.SetLeftAndRight(0%x100%x)
    BackPanel.SetTopAndBottom(
    0%y100%y)

    ButtonPanel.SetTopAndBottom(
    10%y90%y)
    ButtonPanel.SetLeftAndRight(
    50%x - ButtonPanel.Height/2,50%x + ButtonPanel.Height/2)

    ForcedButton.SetLeftAndRight(ButtonPanel.Left, ButtonPanel.HorizontalCenter)
    ForcedButton.SetTopAndBottom(ButtonPanel.Top, ButtonPanel.VerticalCenter)
    PatientsButton.SetLeftAndRight(ButtonPanel.HorizontalCenter, ButtonPanel.Right)
    PatientsButton.SetTopAndBottom(ButtonPanel.Top, ButtonPanel.VerticalCenter)
    SettingsButton.SetLeftAndRight(ButtonPanel.Left, ButtonPanel.HorizontalCenter)
    SettingsButton.SetTopAndBottom(ButtonPanel.VerticalCenter, ButtonPanel.Bottom)
    CalibrationButton.SetLeftAndRight(ButtonPanel.HorizontalCenter, ButtonPanel.Right)
    CalibrationButton.SetTopAndBottom(ButtonPanel.VerticalCenter, ButtonPanel.Bottom)
     
  4. RandomCoder

    RandomCoder Well-Known Member Licensed User

    Try this...
    Code:
    'All variants script
    AutoScaleAll
    'Variant specific script: 961x552,scale=1
    BackPanel.SetLeftAndRight(0%x100%x)
    BackPanel.SetTopAndBottom(
    0%y100%y)

    ButtonPanel.SetTopAndBottom(
    10%y90%y)
    ButtonPanel.SetLeftAndRight(
    50%x - ButtonPanel.Height/2,50%x + ButtonPanel.Height/2)

    '5dip around and between buttons requires an additional 15dip!
    ForcedButton.Width=ButtonPanel.Width/2 - 15dip
    ForcedButton.Height=ButtonPanel.Height/
    2 - 15dip

    ForcedButton.Left = 
    5dip
    ForcedButton.Top = 
    5dip
    SettingsButton.SetLeftAndRight(ForcedButton.Left, ForcedButton.Right)
    SettingsButton.SetTopAndBottom(ForcedButton.Bottom+
    5dip, ButtonPanel.Height - 5dip)
    PatientsButton.SetLeftAndRight(ForcedButton.Right + 
    5dip, ButtonPanel.Width - 5dip)
    PatientsButton.SetTopAndBottom(ForcedButton.Top, ForcedButton.Bottom)
    CalibrationButton.SetLeftAndRight(PatientsButton.Left, PatientsButton.Right)
    CalibrationButton.SetTopAndBottom(SettingsButton.Top, SettingsButton.Bottom)
     
    Arf likes this.
  5. Arf

    Arf Active Member Licensed User

    Awesome, it works - thank you very much.
    So I gather my code wasnt working because I should have set the size of the buttons before positioning them.
     
  6. RandomCoder

    RandomCoder Well-Known Member Licensed User

    No it is in fact because the ButtonPanel.HorizontalCenter and VerticalCenter positions are returning the value from the Parent View. It took me a moment to work out as I don't normally use the Designer or its scripts although I intend to on my latest project. Here is your code but with the HorizontalCenter and VerticalCenter values replaced with the ButtonPanel Width and Height...
    Code:
    'All variants script
    AutoScaleAll
    'Variant specific script: 961x552,scale=1
    BackPanel.SetLeftAndRight(0%x100%x)
    BackPanel.SetTopAndBottom(
    0%y100%y)

    ButtonPanel.SetTopAndBottom(
    10%y90%y)
    ButtonPanel.SetLeftAndRight(
    50%x - ButtonPanel.Height/2,50%x + ButtonPanel.Height/2)

    ForcedButton.SetLeftAndRight(
    0dip, ButtonPanel.Width/2)
    ForcedButton.SetTopAndBottom(
    0dip, ButtonPanel.Height/2)
    PatientsButton.SetLeftAndRight(ButtonPanel.Width/
    2, ButtonPanel.Width)
    PatientsButton.SetTopAndBottom(
    0dip, ButtonPanel.Height/2)
    SettingsButton.SetLeftAndRight(
    0dip, ButtonPanel.Width/2)
    SettingsButton.SetTopAndBottom(ButtonPanel.Height/
    2, ButtonPanel.Height)
    CalibrationButton.SetLeftAndRight(ButtonPanel.Width/
    2, ButtonPanel.Width)
    CalibrationButton.SetTopAndBottom(ButtonPanel.Height/
    2, ButtonPanel.Height)
     
    Arf likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice