Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Widget Positioning in G2
Started by ksan Nov 16 2013 09:55 PM

24 replies to this topic
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

The transition doc says

 

"Starting in Graphics 2.0, the x,y properties of the tableView refer to the center of the widget.

This is a change from Graphics 1.0 in which the x,y properties were aligned to the top left."

 

But the WidgetDemo Tab 1 still has top & left working as before although V1 compatibility is not set. 

 

 

Not sure what I'm missing here. Any clarification? 

 

Thanks much!

 

 

 



[TOPIC: post.html]
#2

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Confirmed the same in ScrollView sample. 

 

    left = 10,
    top = 10,
 
so what happened to the center? Confused...


[TOPIC: post.html]
#3

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 24,865 posts
  • Corona Staff

Top and Left are not X and Y.

 

Lets say you have a 100x100 tableView.   You set Top to 10 and Left to 10.  The tableView will occupy 10-110 wide and 10-110 high.  The center of the table view will be 55, 55.  And if you print out the tableView's .x and .y it should be 55 and 55.

 

Now if you set myTableView.x = display.contentCenterX the tableView should center itself horizontally.  In effect under 1.0, tableViews would have had a reference point of display.TopLeftReferencePoint, it's now centered.  But this doesn't impact Top and Left.



[TOPIC: post.html]
#4

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Ok. I understand the first part. The center of the table view will actually be 60, 60. Center of widget is 50+left, 50+top so it will be 60, 60. Got that one. 

 

Got the second part as well but I am not clear on when I would need to use this as opposed to moving the widget using its top/left. Anyways, I will study some more and try to get my head around this. Thanks for your time. 



[TOPIC: post.html]
#5

ingemar

[GLOBAL: userInfoPane.html]
ingemar
  • Corona Geek

  • 2,733 posts
  • Enterprise

I would say that x,y are used for positioning while top, left, width and height are used to figure out where the object's bounds are. The x,y position of an object will be the same but the bounds can change depending on the anchor point.

[TOPIC: post.html]
#6

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 24,865 posts
  • Corona Staff

Kerem, you have never been able to move a tableView after it's created using it's Top and Left parameters, you have always had to use it's X and Y.  But I suspect that in 1.0 (I rarely move a tableView once it's on screen), it had a TopLeft reference point in effect making X and Y the same as Top and Left.  With Graphics 2.0 one of our goals was to fix all the places where the API was inconsistent with regards to positioning thing and everything now has a default center reference point.  Any API where you had normally passed in an X, Y previously that was treated as Top, Left like display.newRect(), those are now by default center X, Y.

 

The problem with TableViews and other widgets that still kind of breaks the idea of positioning things by center is that the Key's are the words "Top" and "Left".  Semantically they mean "where is the Top Left corner of the object", not "where I do I draw the object", so for any API that uses Key-Value pairs in a table to create the object and those positioning parameters are defined as "Top" and "Left' will be exactly what they say they are.   But once the object exists, you use .x and .y to reposition and that will be object center if you have not changed the Anchor Points.



[TOPIC: post.html]
#7

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Ok. I tested and verified that I can do away with putting top & left in the tableView definition. You need to give it an anchor anyways so I define the tableview, then give anchor of say 0,0 and then update x & y with 0, 0. Works. 



[TOPIC: post.html]
#8

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 24,865 posts
  • Corona Staff

You shouldn't have to give it an anchor, it has a default one of 0.5, 0.5 and centering by setting x = display.contentCenterX works like a charm!

 

Rob



[TOPIC: post.html]
#9

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Yes of course that would work but in my apps I have historically used a coordinate reference system based on 0,0 being top left of the screen and then all my specific positioning relies on tableView.y = screenTop + heightOfStatusBar etc type references. I simply can't go to the middle of screen referencing approach. Doesn't make sense for existing apps. Maybe for new ones going forward... Thanks anyways. Your help is most appreciated.



[TOPIC: post.html]
#10

ingemar

[GLOBAL: userInfoPane.html]
ingemar
  • Corona Geek

  • 2,733 posts
  • Enterprise

@ksan
I must be missing something here.
0,0 is still the top-left of the the screen in Graphics 2 as well...

[TOPIC: post.html]
#11

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Sure it is. All I was trying to say above in response to Rob's suggestion is that my apps all use 0,0 + some value to position UI elements. Changing them over to using display.contentCenterX or display.contentCenterY +/- some values does not make sense since there is no added value for existing apps. For future apps I will try and get my head around this approach and follow it. Thanks for your help



[TOPIC: post.html]
#12

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Ok. The way I'm setting this up messes with the clickable area of the row. When I click / tap on the left half of my row nothing happens. Then when I click on the right half the click is picked and the row is painted on the right half only... See attached image. Something I'm doing is upsetting this thing.

Attached Files



[TOPIC: post.html]
#13

jonjonsson

[GLOBAL: userInfoPane.html]
jonjonsson
  • Corona Geek

  • 1,051 posts
  • Corona SDK

Looks like same as this: http://forums.coronalabs.com/topic/41488-tableview-layout-bug-when-having-defined-defaults-for-anchorx-and-anchory/

 

Tableviews do not like to have anchor points other than 0.5, 0.5 it seems.



[TOPIC: post.html]
#14

ingemar

[GLOBAL: userInfoPane.html]
ingemar
  • Corona Geek

  • 2,733 posts
  • Enterprise

I'm in the process of converting a business app myself and I haven't seen that behavior, however I don't position my tableview with anchors or x,y.

 

This only positioning I do is this:

studentList = widget.newTableView {
		left=screen.left, top=math.round(screen.top + listTop), 
		width=screen.width, height=screen.height - listTop,
		hideBackground=true,
		noLines=true,
		hideScrollBar=false,
		onRowRender=onRowRender,
		onRowTouch=onRowTouch,
		listener=tableViewListener
	};

It's within a storyboard scene:createScene(), and it positions everything where it should be.



[TOPIC: post.html]
#15

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Bingo! I had, earlier on inserted the following at the top of my main.lua

 

display.setDefault( "anchorX", 0 )
display.setDefault( "anchorY", 0 )
 
This connects the dots back to your bug @jonjonsson... Getting rid of the setDefault calls brought back normal behavior. 
 
And you are right @ingemar... I was over thinking this. Getting rid of my 
 
tableView.anchorX = 0
tableView.anchorY = 0  
tableView.y = something
tableView.x = somethingelse

 

fixed it all. It was working with my G1 compliant code all this time actually...

 

Thanks much!



[TOPIC: post.html]
#16

jonjonsson

[GLOBAL: userInfoPane.html]
jonjonsson
  • Corona Geek

  • 1,051 posts
  • Corona SDK

Yes even if you skip tableView.x and y and do same as Ingimar (with Left and Top), as long as you have that setDefault for anchors at 0,0 its not working properly.

 

Personally I think default anchors at 0,0 for business apps (and many games) make a lot of sense, but at the moment it will not work properly with tableviews.



[TOPIC: post.html]
#17

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Yup. I thought defaultAnchors at 0,0 makes a lot of sense and I thought it would help reduce my G1 -> G2 transition pain if I simply put it at the top of my main.lua and maybe all other modules but seems like it is a poisonous fruit for now. Your bug is in the system so it should get some attention sometime.  



[TOPIC: post.html]
#18

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Ok. Coming back to this one again... All was fine until I started using transition.to in order to shift my tableView up & down (to emulate searchBar behavior in IOS mail app)... It is so confusing to have 2 different coordinate systems acting on the same widget.

 

In other words, I'm ok to create the tableView with top & left values adhering to 0,0 based coords. But transition.to needs me to play with the x & y values of the widget not top & left so when I give x & y these must be accurate based on the center based default coordinates... Very confusing and hard to work with.

 

Any possibility to have tableView fixed so it can work with the default anchors set to 0,0?



[TOPIC: post.html]
#19

jonjonsson

[GLOBAL: userInfoPane.html]
jonjonsson
  • Corona Geek

  • 1,051 posts
  • Corona SDK

Ksan it was fixed few dailies ago :)

[TOPIC: post.html]
#20

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Thanks for the confirmation. Maybe I have a 'workaround' in place thats now messing things up... Going back to code to check. 



[TOPIC: post.html]
#21

jonjonsson

[GLOBAL: userInfoPane.html]
jonjonsson
  • Corona Geek

  • 1,051 posts
  • Corona SDK

Remove any tableview.anchors you may have added and just use top left parameters.

[TOPIC: post.html]
#22

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Even for x & y in transition.to?

 

See my searchBar sample thread. I'm moving the whole tableview up when SearchBar is activated (as in IOS Mail app behavior). I found a workaround (I think...) but the transition.to is a little funny but I think that might be a topic for another bug report... 



[TOPIC: post.html]
#23

jonjonsson

[GLOBAL: userInfoPane.html]
jonjonsson
  • Corona Geek

  • 1,051 posts
  • Corona SDK

I'm not sure about transitioning. On a mobile right now, can't check. Maybe use delta property in transition property? Then you just specify the distance it should travel and not end location.

[TOPIC: post.html]
#24

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Ahh thats a great idea. I was using y values to move the tableview up and down. I think delta will do this much better. Thanks for the tip. Keep well. 



[TOPIC: post.html]
#25

ksan

[GLOBAL: userInfoPane.html]
ksan
  • Corona Geek

  • 2,795 posts
  • Corona SDK

Yup. That did the trick!!! Thanks for the tip. While the root cause issue is not resolved I think this can be captured as a Gotcha in the API docs for tableView and we can move forward. Appreciate your help.




[topic_controls]
[/topic_controls]