I am trying to write an on-screen keyboard but I am having difficulties to get a nice layout. I sketched how I imagine the layout to look like. The keys of the keyboard can come in a few different sizes. They are all multiples from a default key size. Because keys can have different sizes, not all rows have the same “width”. I want each row of keys to have an equal amount of space to the right and to the left side. Basically rows as a unit should be centered. When the window is resized, the widest row of buttons should take up all available space and the other rows should also change their size accordingly.
This is what it is supposed to look like:
I found a solution but it seems over-complicated and has a problem with resizing the window.
I thought I would just make a grid and calculate the max size of all rows. The unit of measurement is “defaultKeySize” Then I calculate the starting point of each row and add the keys of each row. For the row with the max_length for example it starts at position 0. Now it can happen, that a row is just one key size shorter. To center even these cases properly the number of colums of the grid is twice the max_length of all rows. That way I can move those rows inwards one column, which equals half a keysize. Then I set the size of all columns homogenous and get a neat looking layout. The only problem with that is that I can not shrink it to the size I need to fit it on a small screen (Pinephone).
My first idea was to use a vertical box to store a horizontal box filled with the buttons. I can easily center those horizontal boxes but then I was unable to to get the buttons of all rows to change size uniformly.
Does anybody know the solution to my problem?
Bonus: Another great thing would be to shrink/expand the font size with the size of the buttons