简体   繁体   中英

how can I fit toggles/buttons into scrolled panel on different screens

I am trying to make a game in Unity3d 5. What I am trying to do right now is to make a scrollable panel filled with toggles/buttons. The panel should fit the frame on the screen and is masked so it hides under image frame. The concept is under this link: https://www.dropbox.com/s/9zxwx33orz46q60/Screenshot2.png?dl=0

As you can see I managed to make toggles fill the panel, but not exactly as it should be. I us content size fitter on panel with both vertical and horizontal fitting set as preferred size. Also I put LayoutElement on panel and set min width and min height as 200. There is VerticalLAyoutGroup with only "Height" checked. The panel is filled during runtime with quite simple prefab. It has preferred width also set at 200.

So it would not be much problem but when I buid it and run on Galaxy S5 it looks like this:

https://www.dropbox.com/s/9zrv6kyf4n0ueam/Screenshot1.png?dl=0

So question is: how can I make it to always fit the panel? I was changing a lot of different setting and what I once managed to do was that toggles/prefabs did fit the width of the panel but did not keep aspect ratio about 3 (they were flat and unreadable. On other instances the panels overlap partially or completely.

Please help.

EDIT

I managed to achieve this:

https://www.dropbox.com/s/6w80qnuekqyrx96/Screenshot3.png?dl=0

With settings as:

Panel:

* Content Fitter:  horizontal - unconstrained, veertical - preferred size
* Child Force expand - both height and width checked
* Anchors and size stretched to fit scroll rect

Once again I struggle with something for few days, finally post a question here... and solve a problem in few minutes.

So the problem was in keeping aspect ration while resizing the prefab. When it was resized horizontally to fit panel it might be resized vertically too, but the position was not adjusted to compensate this change. So what was needed was to change the preferred height of the prefab on the basis of panel width (could not use toggle width, since it was not right yet (not resized yet)). In the code where I create togges for every toggle I had to put (3f is my aspect ratio):

float width = contentPanel.GetComponent<RectTransform> ().rect.width;
newPower.GetComponent<LayoutElement> ().preferredHeight = width / 3f;

Other settings are: Panel uses vertical fit as preffered and horizontal as unconstricted Toggle uses aspect ratio fitter set as Width controls height and aspect as 3

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM