Best Practice - UIButtons that are children to ScrollViews (anchors in general)

[par]

I'm having a heck of a hard time trying to anchor UIButtons such that everything about them stays in roughly the same area regardless of the screen size.

I'm using a UIGrid inside of a UIScrollView.  I have 5 "cells" inside the Grid.  From the UIRoot down to the Cells of the Grid, everything resizes just fine regardless of the resolution (i.e. everything is exactly how I want them to be).  Inside each Cell is a different matter.

Basically what I'm trying to do is have a sliding set of pages like you see in Angry Birds where each page is the size of the screen.  Each page (or cell as I described above) has some labels describing the page and a bunch of buttons that the user can choose from.  All components inside these cells need to be anchored but I'm having one heck of a hard time getting them to stay in the correctly spots when the UI is resized (Aspect Ratio changes).  The BoxColliders get all fouled up, the button sprites grow at weird sizes and get placed in weird spots.  The labels act the worst... all over the place.

I have been playing w/ the anchoring and I have yet to find a formula or pattern that helps keeps things in the correct spot.  I have tried unified on the overall UIRoot.  I have tried unified on the Cell.  I have tried to create a widget just inside the cell (the UIDragScroll object) and put all buttons and labels inside that and have them resize to their parent.  I've used advanced and different combinations of "Set to Current Position". 

I have found that one combination of anchor stuff that seems to work on a UIButton (and its children) that is located on the left side of the screen does not work with another UIButton (and its children) on the right side of the screen.  Needless to say I have tried many many combinations and I have yet to find one that keeps the buttons in the correct position in the Cell and have their bounds (including images or labels) grow and shrink proportionately to the cell itself.

Any and all help or suggestions would be greatly appreciated!

Thanks!

PAR

Here is my setup:

UIRoot
- UIScrollView
- - UIGrid
- - - UIDragScroll/BoxCollider/UICenterOnClick/UIWidget (what I am calling a Cell)
- - - - UIWidget (container)
- - - - - UILabel
- - - - - UIButton/BoxCollider/UIWidget
- - - - - - Animation
- - - - - - - UILabel
- - - - - - - UISprite
- - - - - UIButton/BoxCollider/UIWidget
- - - - - - Animation
- - - - - - - UILabel
- - - - - - - UISprite
- - - - - UIButton/BoxCollider/UIWidget
- - - - - - Animation
- - - - - - - UILabel
- - - - - - - UISprite
- - - UIDragScroll/BoxCollider/UICenterOnClick/UIWidget (what I am calling a Cell)
- - - - UIWidget (container)
- - - - - UILabel
- - - - - UIButton/BoxCollider/UIWidget
- - - - - - Animation
- - - - - - - UILabel
- - - - - - - UISprite
- - - - - UIButton/BoxCollider/UIWidget
- - - - - - Animation
- - - - - - - UILabel
- - - - - - - UISprite
- - - - - UIButton/BoxCollider/UIWidget
- - - - - - Animation
- - - - - - - UILabel
- - - - - - - UISprite

[par]

Ok, so to elaborate a bit more on the Cell itself (the UIWidget/UIDragScroll/BoxCollider/UICenterOnClick object).

The labels and buttons inside need to be positioned at runtime (regardless of screen resolution) as they are positioned originally.

What I have found (by trial and error... and a LOT of trial and error) is that all items inside the Cell object should have each of their anchors set to the empty UIWidget Container just under the Cell object itself.  This UIWidget container has its anchor set to the Cell object and Left/Right/Bottom/Top is equal to 0 so that it covers the whole Cell.

All of the objects below the UIWidget container (the Labels and Sprites that are actually inside the button objects) are all anchored to this object.  If they are set to their immediate parents (i.e. the button object itself) their positions and sizes are all over the place.

I have also found (through trial and a lot of error) is that depending on the position of the object on the screen, the anchors for left/right/bottom/top are different.  Meaning, if an object (and its children) are on the LEFT side of the screen, the anchors look like:

• LEFT=LEFT
• RIGHT=CENTER
• BOTTOM=SET AT CURRENT POSITION
• TOP= SET AT CURRENT POSITION

If they are in the CENTER of the screen:

• LEFT=CENTER
• RIGHT=CENTER
• BOTTOM=SET AT CURRENT POSITION
• TOP= SET AT CURRENT POSITION

And if they are on the RIGHT of the screen:

• LEFT=CENTER
• RIGHT=RIGHT
• BOTTOM=SET AT CURRENT POSITION
• TOP= SET AT CURRENT POSITION

Now, I'm going into a lot of detail here because although this "seems" to work, I think I am just getting lucky on these settings.  Their positions don't really match exactly where they need to be but this is the best combination I could get working.  There are a lot of moving parts here and... to be honest I'm not confident I am doing it correctly.

Thanks!

PAR

Here is my setup:

UIRoot
- UIScrollView
- - UIGrid
- - - UIDragScroll/BoxCollider/UICenterOnClick/UIWidget (what I am calling a Cell)
- - - - UIWidget (container) (anchor set to Cell parent)
- - - - - UILabel (anchor set to UIWidget parent)
- - - - - UIButton/BoxCollider/UIWidget (anchor set to UIWidget parent)
- - - - - - Animation
- - - - - - - UILabel (anchor set to UIWidget grand parent)
- - - - - - - UISprite (anchor set to UIWidget grand parent)

[ArenMook]

If you want to anchor something to the right, set both left and right to the target's right. Leaving one anchor point as 'center' won't give you the expected results. In general it's a good idea to anchor hierarchically -- use the parent object as the anchor's target. It makes things a lot easier than anchoring everything to the UIRoot.

Also note that if you have an animation, then it's not a good idea to have things anchored to something that's not a child of this animation, as anchors likely won't work as you'll expect (due to conflicts between animation movement and anchor movement).

I'd also advise you to limit the amount of anchors you have if possible. A lot of anchors will result in worsened performance. In many cases it's a good idea to just use a fixed size UIRoot, and design the UI so that the aspect ratio changes don't pose much of an issue.

[par]

Thanks for the reply Mook.

The issue I am having is that the buttons represent area's on a map and if they do not line up exactly I'm pretty much in trouble.

When you say fixed UIRoot, what is a good width/height to fix it at?  I'm doing everything I can to be multiplatform... what kind of trouble do I get into if I do such a thing?

And thanks for the replies!

PAR

[ArenMook]

Fixed size UIRoot is based on height, so just set it to your target device's height, such as 640. It's the easiest way to cater to variable screen size.

[par]

Gosh Dangit!

Wasted a lot of time... didn't realize my UIRoot was on PixelPerfect.  Putting it on Fixed size has fixed ALL my issues.

Thanks man

PAR