Is there a trick to getting the UI and other elements to match up perfectly?

1

Hey, currently making my first plug-in, encountering issues with the UI and having different window sizes/widths, which makes elements bounding boxes match up differently. just looking for a tip on how to calculate the sizes of my elements so they stay consistent. Just as an example, say I’m dividing my container to have one element on the left and one on the right.

Im using getWidth() * 0.2 for the left element, but if this results in a number that isn’t a whole number its rounding in some way that makes my UI kind of janky in some places. I’m kind of noticing this effect in different areas, sometimes there are little ghost lines on highlights here and there that I am assuming is because of this same effect. I’m just looking for a one-size-fits-all solution rather then experimenting with different things all over my program but then not addressing the problem directly, does anyone have any advice on how I could calculate the positions to either control rounding or avoid it?

2
  • Use Grid and FlexBox where possible
  • In other cases, use the removeFrom* methods on Rectangle to create bounds rectangles which are always flush with one another, e.g.
    auto b = getLocalBounds();
foo.setBounds (b.removeFromLeft (juce::roundToInt (getWidth() * 0.2)));
bar.setBounds (b);
3 Likes