Search Unity

Unity UI Image next to dynamic Text (centered)

Discussion in 'UGUI & TextMesh Pro' started by Noblauch, Jun 2, 2021.

  1. Noblauch

    Noblauch

    Joined:
    May 23, 2017
    Posts:
    275
    Hi, I found multiple threads regarding this issue, but none of them were properly solved.
    Since this is an issue for years I want to dig again. Most of the time it can be solved with TMP inline sprites, but this is not an option in my case.

    Here is what I need to achieve:
    mySearch.png
    There is an icon as a text prefix and a text. Both must be centered inside their domain / parent / layout group. Also the text length is dynamic and can change any time @RunTime.

    This example works using a setup that should be made for this, but in fact doesn't:
    Yellow = Horizontal Layout Group (all checks off + alignment middle center)
    Red = Image
    Green = Text with content size fitter (horizontal fit: preferred size)
    mySearch.png

    In theory this is the perfect setup. But Unity already warns:
    In the editor when changing the text the layout already falls apart while sometimes adjusting somewhat. In runtime this doesn't work at all. This is because the yellow layout group doesn't understand the changes. I would have to disable and enable it via script for it to update to the new dimensions, which is of course not a solution.
    Disabling and enabling the checkbox of the layout group also fixes it in the editor for you to test.

    Did anyone ever solve this? Remember TMP sprites is not an option.

    Greeeeetings from Germany!
     
  2. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    Why can't you use inline graphics / TMP Sprite Assets to display those icons?
     
  3. Noblauch

    Noblauch

    Joined:
    May 23, 2017
    Posts:
    275
    Because we can't include the spritesheets, since the app size can't get any larger. Other thing is, that our app is skinned, meaning these icons can potentially be different for different skins. These skins are loaded via remote bundles (can't be included in build).
     
  4. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    Font Assets and Sprite Assets can be loaded via bundles. This would enable you to access these icons from either font assets or sprite assets. Since these icons would be part of the text, it would also simplify your layout issue.
     
  5. Noblauch

    Noblauch

    Joined:
    May 23, 2017
    Posts:
    275
    Oh really? I was pretty certain, that this is not possible. I evaluated it months ago and TMP seems to exclusively load their sprite assets from the Resource folder. Even the TMP Settings back that:
    TMP Sprite Settings.png
    As you can see you have no choice but put your TMP_Sprite Assets into the Resources/ folder. The documentation also says:
    How would they be able to load a TMP_Sprite Asset if its in a bundle somewhere? Remember, I just type
    <sprite="common" name="search"> as a string into my text.
    I still would be interested in that, since this could potentially free some space from existing sprite assets that we are currently using!
    How would one go about it?


    Fix for the original question:
    Okay, meanwhile me and my colleague figured a way out to solve the problem above (hold on to your pepperonis everybody, because this works 100%):

    The Result:
    Layout Mess.png
    Yellow = Horizontal Layout Group
    Blue = Empty
    Red = Image (right aligned on that empty)
    Green = Text

    The trick is to add a Layout Element component to each the blue empty and the green text.
    Now check "Flexible Width" and set it to a high value (I used 999).
    Additionally you have to set a "Min Width" as-well for the blue thing that represents your image width. Otherwise the empty will be just squashed to death.

    This is your hierarchy for this (you can set the Horizontal Layout to a fitting size inside your button)
    Bildschirmfoto 2021-06-03 um 11.21.18.png
    Setup your Horizontal Layout Group like this:
    Bildschirmfoto 2021-06-03 um 11.30.12.png

    Enjoy.
     
    snometa, xxluky, Rrawrr and 6 others like this.
  6. davidborsicecz

    davidborsicecz

    Joined:
    Jul 30, 2022
    Posts:
    1
    Does this work with sprites instead of images? It looks like the sprite doesnt move like the text.

    Nevermind, just use Rect Transform component.
     
    Last edited: Oct 4, 2022
  7. zhaozony

    zhaozony

    Joined:
    Jan 7, 2020
    Posts:
    29
    Yeah this works if you have fixed-structured images and texts. But how to insert random images into random text at random place?