Positioning and scaling percentually

cybernavidcybernavid ✭✭USMember ✭✭

Disclaimer: I used Xamarin Forms and C# for the first time for a project!

When doing that I noticed that my app looks very different on an phone and a tablet. I was in need for something to position and scale ui elements percentually in a general way. Therefor I came up with a couple of utility classes, which I thought to put out there for others who may need it.

An example Xamarin project can be found at github repo

I'm happy to know if you find it useful or useless :wink:

Posts

  • NMackayNMackay mod GBInsider, University mod
    edited September 2017

    Mmmmm

    You can use percentage values in a layout grid for example to take x percentage of the screen size.

              <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1.0*" />
                    <ColumnDefinition Width="1.9*" />
                    <ColumnDefinition Width="1.3*" />
                    <ColumnDefinition Width="3.2*" />
                    <ColumnDefinition Width="1.5*" />
                    <ColumnDefinition Width="1.1*" />
                </Grid.ColumnDefinitions>
    

    Also you can use Auto and Star * to leave it to the layout engine to best figure out how much space to allocate.

    Within these cells you can use layout options to in control layouts to center the x & y on the controls or fill to fill to the percentage width of the cell.

    Also in AbsoluteLayout you can layout controls using percentages to place then in a certain screen position irrespective of the screen size.

    For fonts you can specify Small, Medium, Large etc

    Ideally where possible you try and avoid using fixed sizes where possible although this isn't always possible.

    You have OnIdiom and OnPlatform to tweak you layout for tablet/mobile and device type.

    I'd investigate these techniques fully 1st to see if they meet your needs

  • cybernavidcybernavid ✭✭ USMember ✭✭

    Thank you for the explanation. I completely agree with you, in using grids with Star/Auto options.

    I even tried to use Relative-layouts but then found myself fiddling a lot (for a long time) with the positioning options.

    For example; I want to have an image (a logo) on top of the screen and it should take up lets say 1/10 of the screen. This was not possible, as you have to use absolute number of points (for Height/WidthRequest). While that did render correctly on a phone, on a tablet it was very small.

    Another problem was while defining margins and paddings, the same happend here as well. The margins were good on a phone but not on a tablet.

    Maybe it's possible to have a lots of layers of grids/layouts inside each other, but in my "opinion" such a hierarchy of elements would slow down the rendering process and be unmanageable in time.

    The same goes for font-sizes. The customer had a design and wanted a relatively "pixel perfect" implementation of it. And that was not possible with built-in font-sizes.

    For the next project I will definitely have a deeper look into AbsoluteLayouts.

Sign In or Register to comment.