- Home /
Content Size Fitter woes (Solved: Link to download you may want)
Hi all, here are my problems.
(making an app for a table top RPG I play often)
I have a scroll rect, that is working perfectly and that I use to display various information on the player's character depending on what menu they want to look at (stats, gear, combat etc), one of said menus is the XP Spending menu. There are two lists I want to display here; the first is the character's xp purchases during character creation and then their xp purchases after that (things are purchased with different XP costs during each of these stages hence the need for two separate lists).
This menu is called XPSpending in my hierarchy, and inside there are two objects, CreationSpending and NormalSpending.
Both have objects inside them that displays the appropriate heading for each and then another object called PurchaseContainer that have Content Size Fitters and Vertical Layout Groups that work properly, that is they change size when more Purchase objects are created and childed to them, I just need their parent, XPSpending to then change size with them so that it works properly with the Scroll Rect since scrolling bounds are determined by the size of the object's rect transform.
To sum things up, in case I lost anyone in the explanation, here is a layout of the hierarchy with the components on each object:
-XPSpending - (Content Size fitter , Vertical Layout Group)
- CreationSpending - (Layout Element)
- Heading - (Layout Element)
-PurchaseContainer - (Content Size Fitter, Vertical Layout Group)
- Purchase (Layout Element)
- Normal Spending- (Layout Element)
- Heading - (Layout Element)
-PurchaseContainer - (Content Size Fitter, Vertical Layout Group)
- Purchase (Layout Element)
The PurchaseContainer changes size with it's children, naturally, and I then need the XpSpending object to change it's size based on that size of both of it's children. I've tried a couple of setups. This is the one I'm trying now.
Before this, both of the Creation /Normal Spending objects had Content Size Fitters and Vertical Layout Groups (I tried with both, and one at a time). I was thinking that the their parent would only read stuff about the size of their direct children, so I was thinking I could pass the size up from the container, to the middle object and then to XpSpending. But that didn't work, and if it does normally then I am doing something wrong.
Another problem I am having is trying to minimize said menus by clicking on the heading object, and then have the other menu move to fill the space left by the other. I sort of have this working. I made a script that changes the scale of the objects when I press a button to either 1 or 0, this change is lerped, but the menu bellow doesn't move to fill the void because the content size fitter of the first menu doesn't actually change size with the scale of the object (If I make it less that one at least). This means that XPSpending's vertical layout group thinks that both menus are where they should be.
I thought I could fake it by having the lower menus follow an object that is in the above menu that "moves" when the scale of the parent is changed. This worked in that the lower menu went where I wanted it to go but since the Content Size Fitter/ Vertical Layout Group thing didn't change it's size, it meant that when I scrolled the menu, there was a lot of empty space that I could still scroll through which I am trying to eliminate.
My third problem is my parents never hug me, but I think this is the wrong place for that sort of help.
I know that I could eliminate both of these problems by having tabs in the various menus, but that would mean that there would be a LOT of tabs since there are a lot of menus that I need this system for. While this solution would only be tedious, I am trying to have the player navigate the app with as few clicks/touches as possible. Good UI design and all that. It is simply a must. I mainly need helps with just the first issue since it should naturally solve the second one. But I could be wrong so I am asking just in case.
Thanks in advance, let me know if I didn't explain anything clearly enough.
~Martin
UPDATE:
I may have solved it. Post your answers anyway, for those of you who are curious I removed the PurchaseContainer objects and just had content size fitters on the Creation/Normal Spending objects. Seem to get what I want. Will let you know for sure when I do :)
It doesn't seem to solve the minimizing menu issue I am having
Answer by MartinTV · Dec 30, 2015 at 05:26 AM
Don't worry guys, I solved it. Here is an example project so you can check out my Canvas setup and code. I hope it proves useful for ya'll.
If anyone has any suggestion on how to make it better, let me know :)
https://www.dropbox.com/s/tkqdfgz28gdpz1t/UI_MultipleVerticalContentSizeFitters.zip?dl=0