Author Topic: Centre-aligning grouped content  (Read 6935 times)

Tallen

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 5
    • View Profile
Centre-aligning grouped content
« on: April 29, 2016, 09:02:25 AM »
I've searched this forum as thoroughly as I can, but can't find a solution to what seems like a simple problem:



I have buttons what contain a currency icon (sprite), and a variable numerical amount. Is it possible to align the parent of these game objects (labelled as Group Container) so that they stay centre-aligned inside the Button Parent, regardless of the size of the label?

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Centre-aligning grouped content
« Reply #1 on: April 29, 2016, 12:48:37 PM »
UIWrapContent can do that for you, but you should use it on a sibling, not the parent:

GameObject (common container)
- Background (UIWrapContent)
- GameObject (content root)
-- UISprite (icon)
--- UILabel (icon text)
-- UILabel (number label)

In the hierarchy above, UIWrapContent on the Background sprite would be targeting the "Content Root" object.

Tallen

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 5
    • View Profile
Re: Centre-aligning grouped content
« Reply #2 on: May 03, 2016, 06:28:31 AM »
Thanks for the reply. Unfortunately, I can't get this to work for me. I've set up a test scene with the following hierarchy:



However, changing the string in the 'Text' of the UIlabel text has no effect on the positioning of any of the content, either in the editor or with the scene running. I assume I'm missing something, but consulting the help for UIWrap Content didn't provide any clues about what that might be.

I made the whole content the child of a gameobject with a Scroll View component attached, as UIWrap Content warned that it wouldn't work properly without it. My test project is using Unity 4.7.1 and NGUI 3.9.8.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Centre-aligning grouped content
« Reply #3 on: May 03, 2016, 02:03:19 PM »
Sorry I meant EnvelopContent. Wrap Content is for scroll views.

EnvelopContent is what can be used to do what you seek. You can right-click it to make it execute in the editor.

Tallen

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 5
    • View Profile
Re: Centre-aligning grouped content
« Reply #4 on: May 05, 2016, 08:36:07 AM »
Thank you for the update. I've been tinkering with my test scene for a few hours now, and I can't get this to work as expected. Here's an assembled screenshot of the results of two different label sizes:



Each time I execute the Envelope Content script, the Transform that it's attached to acquires either a positive or negative X value, despite being initially set to 0. The Content Root Transform inherits the same X value, despite being anchored to the left and right of Envelope Content. If I repeatedly execute the script with the scene running, Envelope Content creeps a little more to the left or right. In addition, the children of Content Root (Icon and Label) are also offset visually, despite their transforms showing as 0.

Can what I want be achieved without any additional code, or do I need a custom script in the scene to reposition the content? I'm an artist, not a programmer, and I'm trying to get this to work without having to get the code team involved if I can. I assume I'm just doing something silly, but I've exhausted all the permutations of anchors/pivots etc. that I can think of.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Centre-aligning grouped content
« Reply #5 on: May 05, 2016, 05:06:01 PM »
Why is your content root anchored to the envelope? That makes zero sense. Your envelope resizes itself based on the content root, and you have content root resize itself based on the envelope? How is that supposed to work? Get rid of that anchor.

Tallen

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 5
    • View Profile
Re: Centre-aligning grouped content
« Reply #6 on: May 06, 2016, 04:20:13 AM »
Why is your content root anchored to the envelope? That makes zero sense. Your envelope resizes itself based on the content root, and you have content root resize itself based on the envelope? How is that supposed to work? Get rid of that anchor.

Then how do I manipulate the position of Content Root? All I end up with is a game object that is set to the size of Content Root, but no means of repositioning Content Root itself or any of its children? I realise I'm probably missing something obvious, but being able to change the size of the Envelope Content gameobject seems to offer me no means to influence the positioning of its siblings.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Centre-aligning grouped content
« Reply #7 on: May 07, 2016, 11:30:48 PM »
Anchor it to the Container object if you must. Not sure why you need to anchor it at all to be honest. You can always adjust its position as you see fit. Don't need an anchor for that.

Tallen

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 5
    • View Profile
Re: Centre-aligning grouped content
« Reply #8 on: May 13, 2016, 03:47:33 AM »
In which case, as I initially suspected, it's not possible to do what I want without additional support from our code team. My problem is that the label could be a different length each time the scene loads, so manually adjusting its position isn't a solution.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Centre-aligning grouped content
« Reply #9 on: May 14, 2016, 06:29:00 PM »
If you want to do it without a coder, simply add that "O" shaped sprite as a symbol to your font. You can then use that symbol in your label to make it appear. This way both your "O" symbol and the text will be printed using the same label, saving you the trouble of trying to align the sprite to a label.