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

Bullet point list

Discussion in 'Unity UI & TextMesh Pro' started by artaka, Mar 24, 2015.

  1. artaka

    artaka

    Joined:
    Feb 19, 2013
    Posts:
    116
    Hey all,
    I want to achieve a simple "bullet point list" like layout such as below:
    • Item 1 - long text here that will wrap according to it's window size
    • Item 2 - another long text here
    • Item 3 - etc.
    I'm using an Image for the bullet point and Text right next to it. And just like a simple list, as the width of the window changes, the items' vertical position should change to accommodate for the wrapping of the text. Is there a way to achieve this with existing UI components? I've tried using a combination of Vertical Layout Group and Content Size Fitter but had no success.
    All help is appreciated.
     
  2. theolagendijk

    theolagendijk

    Joined:
    Nov 12, 2014
    Posts:
    103
    Hi artaka,

    I achieved this effect by using a GameObject with the VerticalLayoutGroup script.
    Screen Shot 2016-05-19 at 10.46.07.png

    Containing per bullet a GameObject with the HorizontalLayoutGroup script.
    Screen Shot 2016-05-19 at 10.48.19.png

    ... with as first child a GameObject with Image script ( for the bullet image ) and LayoutElement script.
    Screen Shot 2016-05-19 at 10.55.52.png

    ... and as second child a GameObject with Text script.



    So in the Scene hierarchy this looks like;
    Screen Shot 2016-05-19 at 10.57.55.png


    Works perfect for me!
    The bullet lists behaves exactly as you would expect. Bullets images and text lines are aligned to the upper left corner of there available space and as the width of the window decreases the bullets vertical positions change to accommodate for the wrapping of the text.

    Hope this helps. Cheers.
     
  3. theolagendijk

    theolagendijk

    Joined:
    Nov 12, 2014
    Posts:
    103
    Here's what that item list looks like in Unity UI;
    Screen Shot 2016-05-19 at 11.03.59.png
     
    artaka likes this.
  4. artaka

    artaka

    Joined:
    Feb 19, 2013
    Posts:
    116
    Thanks theolagendijk! I ended up doing something very similar.
     
  5. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Just in case you would like to achieve the same results more efficiently without having to use a dozen or so objects, here is an example using TextMesh Pro which only uses a single text object.



    upload_2016-5-24_22-18-35.png

    This uses a single TextMesh Pro text object which contains one child since I am using a different font for the Mariko GmbH. This is done by using the <font> tag or in this case <font="Avalon Bold SDF">MARIKO GmbH</font>.

    The lines of text which contain bullets are enclosed in the <margin-left> tag which is this case was <margin-left=1em>... </margin>. This allows indenting them as a block.

    The bullets are done by simply using the UTF16 character \u2022. The indentation of the bullets is done by using the <indent> tag. So in this case the bullets lines are something like "\u2022<indent=3em>The text that will be indented.</indent>". Multiple levels of indentation is also possible.

    Here is another example combining the <indent> and <sprite> tag. Note that changing the size of the RectTransform still results in the correct formatting and word wrapping of the text.

     
    Last edited: May 25, 2016
    artaka and theolagendijk like this.
  6. artaka

    artaka

    Joined:
    Feb 19, 2013
    Posts:
    116
    That's really cool.. Thanks Stephan, I'll look into TextMesh Pro...
     
  7. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Thanks and feel free to reach out to me should you have any questions.
     
  8. twin_digital

    twin_digital

    Joined:
    Jul 26, 2018
    Posts:
    5
    Hi everyone !

    sorry to digger such an old thread but i've had a realy good use of ur solution above and i was wondering if there was anyway to have filled square bullet ? i've tested every utf 16 character that is a square bullet and in every case it's unfilled, as the round bullet is filled is was wondering if i was doing something wrong or anything ? i'm using offical ghotic ttf file !

    thanks :)