[4.6] UI not stretching correctly?

Questions & Answers
1

I wanted to make a simple platformer touch input for Android, and thought it would really easy to make this as UI buttons now with the new UI by making them invisible… Well, instead of it being really simple it happened to be bonkers. I’ve put my buttons to stretch and placed them on canvas, now intuitively I thought that the buttons should literally stretch together with height and width… But they don’t!

alt text

I set them up properly, anchors on edges, stretch…

alt text

But when I reduce the width of the game window, the buttons get smaller by double, instead of keeping with the width of the canvas. At one point buttons will flip around after they pass into negative width. On the other hand when I increase the size, the stretch and eventually overlap. The same goes if you put buttons vertically.

alt text

Eventually, I wanted to resize the buttons from code, but the TransformRect.rect is read only, unfortunately.

I have spent 2 hours trying to figure this out, but I can’t… Is there something I am doing wrong?

2

Try adding a Horizontal Layout Group and a Content Size Fitter on the parent of the buttons and then Layout Element on each button. Adjust the layout element settings to get a desired fitting.

If you are using Reference Resolution component (you should be really), matching Width has so far worked better for me when designing for landscape orientation.

3

I’m pretty sure you have to put the anchors on the edges of the buttons themselves in order for them to scale correctly.
See this answer for a good solution: [Unity 4.6 Beta] Anchor snap to button (New UI System) - Unity Answers

4

Although there is a better way to solve the whole problem, you can change a rect by using rect.Set(float left, float top, float width, float height)