positioning display objects in a container - what's wrong with this code?

[greg886]

Any advice how to get this code working such that it will:

a) Align the scrollView’s left hand side up against the left hand side of the container?   In my code I have already set the anchorX for both scrollView and container to 0 however this does not seem to help?

b) Have the scrollView resize in the layout area of the code take effect?  In my code I reset the width/height of the scrollView however it doesn’t take effect?  I want to do this in a composer/storyboard view, where it will cater for orientation changes, portrait <=> landscape.  So question is whether the storyboard concept can be used, or whether I really have to recreate the whole scrollView each time there is an orientation change…

display.setStatusBar( display.HiddenStatusBar ) local displayW, displayH = display.contentWidth, display.contentHeight --Container local myContainer = display.newContainer(10, 10) -- Background (just to show where container is) local containerBackground = display.newRect( 0, 0, 1000, 1000 ) containerBackground.strokeWidth = 0 containerBackground:setFillColor( 1,0,0 ) myContainer:insert(containerBackground) -- ScrollView local widget = require( "widget" ) -- Create the widget local scrollView = widget.newScrollView {     top = 0,     left = 0,     width = 20,     height = 20,     scrollWidth = 200,     scrollHeight = 200,     backgroundColor = { 0.8, 0.8, 0.8 },     -- listener = scrollListener } myContainer:insert(scrollView) -- Layout myContainer.anchorX, myContainer.anchorY = 0, 0 myContainer.width, myContainer.height = 200,200 myContainer.x, myContainer.y = 0, 0 scrollView.anchorX, scrollView.anchorY = 0,0 scrollView:setScrollWidth(200) scrollView:setScrollHeight(200) scrollView.x, scrollView.y = 0,0  

[rob]

Is there a reason you’re putting a scrollView in a container, since they are in effect already a container?  Also a 10x10px object is pretty small.  Is that on purpose?

Rob

[greg886]

good point Rob, but I’m basically trying to come out with a solid approach in my head for

(a) laying out a business app type screen, so really trying to get the "position the left side of item X within group/container left hand side.   

(b) support for orientation changes, so the screen layout and change dynamically

Perhaps specific questions I could ask:

Q1 - Can the scrollView widget be sized (width/height) after already initialized?  .e.g after an orientation change.  It seems to be in can’t?   In which case in composer you shouldn’t even bother trying to dynamically relayout the UI components in the scrollView, as you’ll really need to destroy the scrollView and re-create it on orientation change? 

Q2 - Same question for containers here?  Can you resize them (width/height) after they’re created?  or are their gottchas and this should be avoided?

Q3- Am I right in thinking re having a more solid layout approach you would be better off with a container (and container within a container for hierachy) than groups?  With a container it seems to be more solid in terms of use of anchor points & the ability to say "layout this object against it’s right hand side, up against the right hand side of the parent container)

So overall trying to nail a good approach for (a) layout and (b) orientation changes re-layout.  Any advice greatly appreciated

[domskie13]

I have same problem with positioning the buttons inside the scrollview, i was trying to make the buttons in the left side the under scrollview but even object.x is not work it will still position center of scrollview.

obj.scrollView = external.widget.newScrollView
    {
        width = display.contentWidth*0.90,
        height = display.contentHeight*0.65,
        horizontalScrollDisabled = true,
        hideBackground = false,
        scrollHeight = display.contentHeight*0.65,
    }

button = widget.newButton{
        defaultFile = “images/blankPrev.png”,
        overFile    = “images/blankPrevOver.png”,
        width       = btn.width*0.3,
        height      = btn.width*0.3,
        id          = “additem”,
        onRelease   = func.btnEvent,
    }

    obj.scrollView:insert(button)

button.x = button.x - obj.scrollView.width*0.5 --even chaging in any direction still positioned in the center of the scrollview…

[primoz.cerar]

There are things to note and learn here about positioning and mask layers.

@greg886

Let’s start with Q2. Yes you can change the width height of containers BUT. As object position in a container is center based when you increase width you will in effect be adding borders half of the increase on the left and right, so you need the handle the contents if you want them to reposition or resize.

Q1: Now as for scroll views. You will have to try it out. You should be able to change it’s width or height as it is basically a container but I do not know what will happen to the content. If it does not stretch or skew you should be able to reposition things in it provided that you kep a reference to all the objects inside it. Also note that this might break scrolling so try it out.

Q3: That would be bad. Always avoid putting masked objects in other masked objects. Some of the objects that use masks:

scroll view, table view, container, text with widht or height limits. There is masking layer limit of 3 and i have seen it break at 3 miyself. This will get you white rectangles insted of your objects. For example doing this:

 - create scroll view

 - create container and insert into scrollview

 - create text with width limit and insert into container

this might break allready as there are 3 mask layers.

When it comes to positioning here is few notes:

• objects in containers are positioned relative to the center of the container. 0, 0 is center.

• objects in groups can be placed at any position and group just resizes to contain all of the items (note that when anchorChildren is false which is default in a group changing x, y does not move the objects in it). If you set anchorChildren to true you can change the position of the group and the objects in it will move with it. Note that changing position of objects in the group outside its current bounds will resize the group and that might change its relative position.

• mixing groups and containers (inserting them one in another) when positioning things is game of trial and error. At least I haven’t figured it out 100% yet how it should be set.

@domskie13

I think the problem you are having is that scroll view auto adjusts the size of the scroll area based on the items you put in it. And as I mentioned about group auto sizing based on objects in it that might give the behaviour you are seeing. Try placing more objects in it at different positions and it should change the behaviour you are seeing. If you know the size of the scroll area you need I suggest putting an invisible newRect the size of the scroll area you need in the scroll view first.

[greg886]

thanks primoz.cerar 

@primoz.cerar

• objects in groups can be placed at any position and group just resizes to contain all of the items (note that when anchorChildren is false which is default in a group changing x, y does not move the objects in it). If you set anchorChildren to true you can change the position of the group and the objects in it will move with it. Note that changing position of objects in the group outside its current bounds will resize the group and that might change its relative position.

Is does kind of seem that there isn’t the perfect solution (simple straight forward) to layout though hey.  Containers you can’t nest, and Groups do have these behaviours you mention above you have to deal with…  Like you can layout stuff dynamically, but you have to know your stuff is what I’ve found.   If you haven’t done any for several weeks and then come back to it I have to read up again re groups/containers, anchor points, etc etc…  

[primoz.cerar]

I run into positioning issues often and though most of the time when I really study what is going on I have a DUH moment, there are times when I just can’t figure out why my logic doesn’t work and use trial and error to get it to position right.

[bjsorrentino]

Hi all,

This isn’t new information, but I’ve recently updated the Groups Programming Guide with new diagrams, clarification, etc. This may help as your go-to reference. The first few sections are very “newbie”, but you may benefit from the sections on “group transforms” and “groups and anchor points”.

http://docs.coronalabs.com/guide/graphics/group.html

Best regards,

Brent

[greg886]

thanks Brent - actually which approach do you use when you want to layout display objects within display objects, in a sense that you can position them using concepts such as position object X left’s side against it’s parent container A’s left side, and then have containers A’s right side against it’s parent container’s B right side etc?  (i.e. container/group, anchor points, how to avoid positions getting muddles if you move an object within a group outside it’s current bounds so to speak)   

[bjsorrentino]

Hi Greg,

I can’t really provide specifics for your project, but I find that using the “contentBounds” properties + anchor points is useful when aligning one edge of an object with the edge of another object, i.e. aligning the top of one rectangle with the bottom of another one. As for containers, perhaps you’ll need to just calculate the bounds when you create it, stored in a local variable, and use that to align other objects around (and then nil out the variable if it’s no longer needed).

Brent

[primoz.cerar]

@Brent Thanks for that link it gave me more insight into why sometimes I am unable to determine logically how things get positioned.

I am little confused about the anchorClidren on groups though. I distinctly remember when reading about groups and containers when G2 came out that unless you set anchorChildren to true on a group the objects in it will not move when changing position of the group.

Now that I’ve read the guide in your link it seems that only anchor points are not respected when it’s false.

I think this was the origin of my troubles.

Sorry to hijack the thread.

[greg886]

thanks guys - there is one remaining aspect of my questions re resize for the scroll view - I’ve broken this out to a specific post at:  http://forums.coronalabs.com/topic/44938-newscrollview-does-it-support-resizing-for-orientation-changes-within-storyboardcomposer/ 

[rob]

Is there a reason you’re putting a scrollView in a container, since they are in effect already a container?  Also a 10x10px object is pretty small.  Is that on purpose?

Rob

[greg886]

good point Rob, but I’m basically trying to come out with a solid approach in my head for

(a) laying out a business app type screen, so really trying to get the "position the left side of item X within group/container left hand side.   

(b) support for orientation changes, so the screen layout and change dynamically

Perhaps specific questions I could ask:

Q1 - Can the scrollView widget be sized (width/height) after already initialized?  .e.g after an orientation change.  It seems to be in can’t?   In which case in composer you shouldn’t even bother trying to dynamically relayout the UI components in the scrollView, as you’ll really need to destroy the scrollView and re-create it on orientation change? 

Q2 - Same question for containers here?  Can you resize them (width/height) after they’re created?  or are their gottchas and this should be avoided?

Q3- Am I right in thinking re having a more solid layout approach you would be better off with a container (and container within a container for hierachy) than groups?  With a container it seems to be more solid in terms of use of anchor points & the ability to say "layout this object against it’s right hand side, up against the right hand side of the parent container)

So overall trying to nail a good approach for (a) layout and (b) orientation changes re-layout.  Any advice greatly appreciated

[domskie13]

I have same problem with positioning the buttons inside the scrollview, i was trying to make the buttons in the left side the under scrollview but even object.x is not work it will still position center of scrollview.

obj.scrollView = external.widget.newScrollView
    {
        width = display.contentWidth*0.90,
        height = display.contentHeight*0.65,
        horizontalScrollDisabled = true,
        hideBackground = false,
        scrollHeight = display.contentHeight*0.65,
    }

button = widget.newButton{
        defaultFile = “images/blankPrev.png”,
        overFile    = “images/blankPrevOver.png”,
        width       = btn.width*0.3,
        height      = btn.width*0.3,
        id          = “additem”,
        onRelease   = func.btnEvent,
    }

    obj.scrollView:insert(button)

button.x = button.x - obj.scrollView.width*0.5 --even chaging in any direction still positioned in the center of the scrollview…

[primoz.cerar]

There are things to note and learn here about positioning and mask layers.

@greg886

Let’s start with Q2. Yes you can change the width height of containers BUT. As object position in a container is center based when you increase width you will in effect be adding borders half of the increase on the left and right, so you need the handle the contents if you want them to reposition or resize.

Q1: Now as for scroll views. You will have to try it out. You should be able to change it’s width or height as it is basically a container but I do not know what will happen to the content. If it does not stretch or skew you should be able to reposition things in it provided that you kep a reference to all the objects inside it. Also note that this might break scrolling so try it out.

Q3: That would be bad. Always avoid putting masked objects in other masked objects. Some of the objects that use masks:

scroll view, table view, container, text with widht or height limits. There is masking layer limit of 3 and i have seen it break at 3 miyself. This will get you white rectangles insted of your objects. For example doing this:

 - create scroll view

 - create container and insert into scrollview

 - create text with width limit and insert into container

this might break allready as there are 3 mask layers.

When it comes to positioning here is few notes:

• objects in containers are positioned relative to the center of the container. 0, 0 is center.

• objects in groups can be placed at any position and group just resizes to contain all of the items (note that when anchorChildren is false which is default in a group changing x, y does not move the objects in it). If you set anchorChildren to true you can change the position of the group and the objects in it will move with it. Note that changing position of objects in the group outside its current bounds will resize the group and that might change its relative position.

• mixing groups and containers (inserting them one in another) when positioning things is game of trial and error. At least I haven’t figured it out 100% yet how it should be set.

@domskie13

I think the problem you are having is that scroll view auto adjusts the size of the scroll area based on the items you put in it. And as I mentioned about group auto sizing based on objects in it that might give the behaviour you are seeing. Try placing more objects in it at different positions and it should change the behaviour you are seeing. If you know the size of the scroll area you need I suggest putting an invisible newRect the size of the scroll area you need in the scroll view first.

[greg886]

thanks primoz.cerar 

@primoz.cerar

• objects in groups can be placed at any position and group just resizes to contain all of the items (note that when anchorChildren is false which is default in a group changing x, y does not move the objects in it). If you set anchorChildren to true you can change the position of the group and the objects in it will move with it. Note that changing position of objects in the group outside its current bounds will resize the group and that might change its relative position.

Is does kind of seem that there isn’t the perfect solution (simple straight forward) to layout though hey.  Containers you can’t nest, and Groups do have these behaviours you mention above you have to deal with…  Like you can layout stuff dynamically, but you have to know your stuff is what I’ve found.   If you haven’t done any for several weeks and then come back to it I have to read up again re groups/containers, anchor points, etc etc…  

[primoz.cerar]

I run into positioning issues often and though most of the time when I really study what is going on I have a DUH moment, there are times when I just can’t figure out why my logic doesn’t work and use trial and error to get it to position right.

[bjsorrentino]

Hi all,

This isn’t new information, but I’ve recently updated the Groups Programming Guide with new diagrams, clarification, etc. This may help as your go-to reference. The first few sections are very “newbie”, but you may benefit from the sections on “group transforms” and “groups and anchor points”.

http://docs.coronalabs.com/guide/graphics/group.html

Best regards,

Brent

[greg886]

thanks Brent - actually which approach do you use when you want to layout display objects within display objects, in a sense that you can position them using concepts such as position object X left’s side against it’s parent container A’s left side, and then have containers A’s right side against it’s parent container’s B right side etc?  (i.e. container/group, anchor points, how to avoid positions getting muddles if you move an object within a group outside it’s current bounds so to speak)