Search Unity

  1. Get all the Unite Berlin 2018 news on the blog.
    Dismiss Notice
  2. Unity 2018.2 has arrived! Read about it here.
    Dismiss Notice
  3. We're looking for your feedback on the platforms you use and how you use them. Let us know!
    Dismiss Notice
  4. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  5. Improve your Unity skills with a certified instructor in a private, interactive classroom. Learn more.
    Dismiss Notice
  6. ARCore is out of developer preview! Read about it here.
    Dismiss Notice
  7. Magic Leap’s Lumin SDK Technical Preview for Unity lets you get started creating content for Magic Leap One™. Find more information on our blog!
    Dismiss Notice
  8. Want to see the most recent patch releases? Take a peek at the patch release page.
    Dismiss Notice

Unity UI layout groups

Discussion in 'Unity UI & TextMesh Pro' started by JeffreyA, Jun 8, 2018.

  1. JeffreyA

    JeffreyA

    Joined:
    Jun 6, 2017
    Posts:
    13
    Hallo,

    With Unity UI and as less scripting as possible i want to achieve a "chat dialogue" layout.

    Currently I have a scene where text-messages spawn left and right and below each other, just like chat applications have (e.g. Whatsapp layout).
    https://s15.postimg.cc/slcvuh3a3/chat_layout.png

    So far so good.

    The only thing that i cant create is the length of an individual text-bubble (blue or red panel).
    It does fit to the size of the text (shorter text = shorter bubble, longer text = longer bubble), but it has to stop
    halfway the screen.

    Unfortunately i cant give a MAX width to the chatbubble, which results in a chatbubble that behaves like:
    • It doesnt end where i want it to end (halfway parent panel) and it goes outside the screen (chatcontainer)
    • I can give it a preferred size which is halfway the screen. But in that case the blue "background" of the chat-bubble already has the size. If the text is shorter than that size, there is to much space on the right side of the text (in other words, the bubble is to large).

    How can I achieve this result? I am not afraid of programming, but if i can only use the layout-elements and UI elements of Unity itself, it is a bit easier.
    https://s15.postimg.cc/smmtnluqj/goal.png



    Currently is use the following settings and vertical, as said in the pictures, the textbox and background grow vertical when they need to. But horizontally, i have to give a preferred width, so when the text is really short like "OK", than the textbox is way to large.

    My hierarchy is:
    * Chatcontainer (is the parent of all and vertical layout group)
    *** Contentpanel (contains everything)
    *******npcMessageprefab (takes full width and is height of its child)
    **********Outline (is the chat-bubble itself and contains the text component, has to expend width till 60% and increase in height is necessary )
    *************Message (is the text itself and content size fitter)


    Can someone help me please? I am struggling with this problem for a couple days now and i cant find a solution on the internet.

    Below i have added screenshots of my setup and settings for the different objects for reference.

    https://s15.postimg.cc/47elmgo2z/Contentpanel.png
    Contentpanel = parent and vertical layout group to put the messages underneath its other.

    https://s15.postimg.cc/np9929fu3/npc_Message_Prefab.png
    npcMessagePrefab (and playerPrefab) contain the text and timestamp

    https://s15.postimg.cc/a8cajpaqz/Outline.png

    Outline contains the actually text-message component and is the chatbubble.
     
  2. Hosnkobf

    Hosnkobf

    Joined:
    Aug 23, 2016
    Posts:
    352
    Hi @JeffreyA ,
    with the next version of my Asset BetterUI this will be possible. Unfortunately it will take some time until I can release the next version because I am involved in another project which hinders me from doing anything else right now...

    However, I achieved it by extending the ContentSizeFitter and add an option for maximum width / height to it.
    I cannot post my code, because it is full of Better UI related stuff...
    but basically you can override SetLayoutHorizontal() call the base implementation and after that call rectTransform.SetSizeWithCurrentAnchors() to apply the maximum width if necessary.