koobas.hobune.stream
How to override Vertical Layout Group Child Alignment?
TLDR: Is there a method to remove the child alignment from the Vertical Group Child Alignment? For Example: One child align to the right side and another align to the left
The Long Story: I've been attempting to try and re-create a UI interface that is a lot like regular phone texting apps, with sent messages on the right and received messages on the left.
I first tried to create a message bubble which the text goes inside of that re-sizes depending on how much text is inside of it. I created an image with the components "Vertical Layout Group" and "Layout Element". The Vertical Layout Group to Control the Child Size with padding and the Layout Element to add a minimum height and width for the bubble. The Text component was added to the Image with no extra components. The Image the child of an empty GameObject with the "Vertical Layout Group" with spacing added.
It looks and works almost exactly how I would like it but the forced child alignment to only one side is what I'd like to change.
Is there anything I can do?
After some tinkering I was able to get it to work for me:
Short answer: I was unable to find a way to override Child Alignment and had to make my own script.
Long answer: My code consisted of instantiating a text bubble, which would have varying height depending on the how much text was inside the bubble. The bubble's height was determined by the empty parent object with Vertical Layout Group component attached.
The initial problem was that whenever I tried to grab the height of the bubble it would return 0. The solution was to use a coroutine to wait a frame and then grab the height of the bubble and it then worked. It seems as though it takes the Vertical Layout Group at least a frame to set the height of it's children.
Now that I could instantiate the messages at the right height I then created a boolean which determined which side the message would be positioned (sender and receiver).
Kind of a basic run-down of how I got it to work but if there's anyone interested in a more detailed explanation please let me know.
Can you share your solution? I'm interested in how you instantiate and positioning them. I have bubbles that can change size based on text in it but I don't know how to place them like sender and receiver in different sides of chat zone
