Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: Tiktaalik on April 16, 2014, 06:11:25 PM

Title: How do I build a correctly aligning vertical scrollview table?
Post by: Tiktaalik on April 16, 2014, 06:11:25 PM
I am able to build a table in a vertically aligned scrollview but I don't really understand why I have to do what I have to do to make it work. As well the method I'm using doesn't work with the new anchor system. All of this makes me think I'm doing this incorrectly and so I thought I'd post to make sure there isn't some proper correct method that I've somehow missed.

I have constructed an ultra basic scene hierarchy as such:
  1. UIRoot (UIPanel)
  2. -->Camera
  3. --> --->(UIPanel)(UIScrollView)(UITable)
  4. --> --> -->(TableCell)
  5. --> --> -->(TableCell)
  6. --> --> -->(TableCell)
  7.  

If I align my scrollview panel at 0,0,0 with the following options:
  1. UIPanel with ScrollView, UITable
  2. Transform
  3. P: 0, 0, 0
  4.  
  5. Clipping:
  6. Offset: 0, 0
  7. Center: 0, 0
  8. Size: 300, 300
  9. Anchors:none
  10.  
  11. Cells
  12. Transform
  13. P: 0,0,0
  14. UIWidget Pivot: Centre, Centre
  15.  
  16.  

It looks like the following:
(http://i.imgur.com/2jZNRG8.png)

When I run the game I get this:

(http://i.imgur.com/AbvH4Rl.png)

Doh! it's not aligned right! It appears as if the top corner of my cell is placed at the centre point of the clipping.

Here are my steps to fix:
- Change the Panel Clipping "center" variables such that the location is at the same position as the centre of the Panel. (in this case -150, 150)
- Change the transform of the Panel such that the clipping area appears where you want it.

  1. UIPanel with ScrollView, UITable
  2. Transform: -150, 150
  3. Clipping:
  4. Center: 150, -150
  5. Size: 300,300
  6. Anchors: None
  7.  
  8. No change to Cell.
  9.  

So now I have:
(http://i.imgur.com/dTQMFY9.png)

and when I run I get the correct looking results:

(http://i.imgur.com/wWRcjao.png)

Essentially my problem is that I have no idea what I just did or why I had to do it. This seems like a random hack and I don't know what I've just done.

Furthermore if at this point I try to use the new anchoring system to parent this scrollview panel to some other panel then this will be broken immediately as the anchoring system modifies the position of the scrollview panel.

What is the correct way to build the screen that I've shown in the final image?
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: pretender on April 17, 2014, 04:01:15 AM
I am interested in this too!
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: VapapeurTeam on April 17, 2014, 07:56:41 AM
I've had the same results, I can't figure out what I'm doing wrong.

My problem with the anchoring system goes even further : I want my TableCells to stretch when the resolution changes, and usually I'd do that by adding a UIWidget to the root of each TableCell and setup its anchor so it stretches correctly with different ratios and resolutions. However, defining an anchor for the TableCell widget means its position is also locked, so it can't be moved around by the UITable. I'm able to have my UITable itself stretch correctly, but since I can't use anchors on the table elements, they don't stretch. Any help ? Am I doing something completely wrong ?

Thanks.
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: ArenMook on April 17, 2014, 12:16:24 PM
The table script needs to go below the scroll view. You can't place it on the scroll view itself.
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: Tiktaalik on April 23, 2014, 03:29:29 PM
Quote from: ArenMook on April 17, 2014, 12:16:24 PM
The table script needs to go below the scroll view. You can't place it on the scroll view itself.

Unfortunately moving the UITable doesn't change anything.

My scene now looks like:

  1. UIRoot (UIPanel)
  2. -->Camera
  3. --> --->(UIPanel)(UIScrollView)
  4. --> ---> --->(UITable)
  5. --> --> --> -->(TableCell)(UIWidget)(UIDragScrollView)(BoxCollider)
  6. --> --> --> -->(TableCell)(UIWidget)(UIDragScrollView)(BoxCollider)
  7. --> --> --> -->(TableCell)(UIWidget)(UIDragScrollView)(BoxCollider)
  8.  
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: ArenMook on April 24, 2014, 01:22:05 AM
Yup that hierarchy is fine. You also need to ensure that you don't anchor widgets fully. For example if your scroll view moves left to right, then only anchor widget's top and bottom. Restrict their aspect ratios if you want to adjust the width and height. Don't anchor left and right.
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: Tiktaalik on April 24, 2014, 03:25:02 PM
I get the same odd behaviour regardless of whether I include the correct anchors you suggest or no anchors at all.

Is this behaviour of the table appearing to the side the expected behaviour that you designed? If so I am surprised as it is not obvious that it should behave in this fashion.

If this is not the desired behaviour, and this is a bug, then I think you should attempt to recreate the problem in a basic scene using the hierarchy I have shown as it appears that I am not the only one that is seeing tables work this way.
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: ArenMook on April 25, 2014, 09:08:11 AM
Can you create a repro case for me in a clean scene so that I can better understand what your issue is caused by? Just don't post it here -- send a download link to support@tasharen.com please.
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: Tiktaalik on April 25, 2014, 03:08:55 PM
Email sent thanks.
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: ArenMook on April 26, 2014, 02:10:17 PM
Got it, thanks. Your issue is simply in the fact that you never actually executed the table you have. It doesn't execute until after you hit Play unless you right-click the component and choose Execute.

So nothing was actually aligned at all.
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: Tiktaalik on April 28, 2014, 01:19:13 PM
Quote from: ArenMook on April 26, 2014, 02:10:17 PM
Got it, thanks. Your issue is simply in the fact that you never actually executed the table you have. It doesn't execute until after you hit Play unless you right-click the component and choose Execute.

So nothing was actually aligned at all.

If you select Execute you get the following result:

(http://i.imgur.com/zhn3bEq.png)

Cells are still off to the side.

To me it looks like the table cell is being positioned such that its top left point is positioned to the Center point of UIScrollView. Is that how this feature is supposed to work? It looks like either there is a bug here, or some setting I have is incorrect.

Is there a special way that cell UIWidgets need to be constructed or UITable needs to be organized for this to behave as expected?

Currently in this project we have:
  1. UIScrollView
  2. Transform: 0,0,0
  3. Clipping: Alpha
  4. Offset: 0,0
  5. Center: 0,0
  6. Size: 300, 300
  7.  
  8. Table Cell UIWidget
  9. Transform: 0,0,0
  10. Pivot: Center, Center,
  11.  


After execution the Table Cell UIWidget's transform becomes 150, -50.
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: kitgui on April 28, 2014, 06:03:37 PM
Just putting my two cents into this discussion, the UITable script appears to start positioning it's elements always beginning from it's own position, leading downwards and to the right.

So if you move your UITable GameObject to the upper-left bound of your Scrollview, you might get what you want.
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: Tiktaalik on April 28, 2014, 06:24:22 PM
Quote from: kitgui on April 28, 2014, 06:03:37 PM
Just putting my two cents into this discussion, the UITable script appears to start positioning it's elements always beginning from it's own position, leading downwards and to the right.

So if you move your UITable GameObject to the upper-left bound of your Scrollview, you might get what you want.

Yeah that's the fix that we've been using to have our tables appear correctly, but I wanted to bring this up because it's pretty confusing and I wasn't sure if this was the intended behaviour for the UITable or a bug.
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: Highstorm on April 28, 2014, 07:01:06 PM
Do you have the "Content Origin" of your ScrollView set to "TopLeft"? Do so, and then right-click on the UIScrollView component and choose ResetClippingPosition. This should re-position your table to the top-left of the scroll view, or any other origin you choose.

To do this in code, call UIScrollView.ResetPosition();

Does that help with your issue?
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: Tiktaalik on April 29, 2014, 12:14:52 PM
Quote from: Highstorm on April 28, 2014, 07:01:06 PM
Do you have the "Content Origin" of your ScrollView set to "TopLeft"? Do so, and then right-click on the UIScrollView component and choose ResetClippingPosition. This should re-position your table to the top-left of the scroll view, or any other origin you choose.

To do this in code, call UIScrollView.ResetPosition();

Does that help with your issue?

I've played around with Content Origin, and while I can see how it's modifying the position of the content, the table still seems to start positioning its child objects at its origin.

(http://i.imgur.com/V2uov2b.png)

What happens here is that when I select ResetClippingPosition the clipping offset get set to 0, -99 from 0,0 and transform is set to 0, 99, 0 from 0, 0, 0.
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: ArenMook on April 29, 2014, 02:11:28 PM
The table does indeed have to be moved into the correct position. The Table script simply positions its children. It doesn't do anything to the scroll view. The scroll view content's position is separate.

"seems to start positioning its child objects at its origin." <-- not sure what you mean here. In your screenshot you don't seem to be showing gizmos at their pivot. You seem to have it set to center. Table's content always extends toward the right and below of the table's object.
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: Tiktaalik on April 29, 2014, 04:31:58 PM
Ok I understand now. The UITable is independent of UIScrollView.

I became confused I think because UIScrollView's ContentOrigin option was being assigned to TopLeft and it seemed odd to me to not see my content not appear in the top left of the UIScrollView.

To make my tables make the most visual sense I'll manually set the UITable position to be the top left of the UIScrollView (-150,150) then set the child UIWidgets to be pivoting on the top left and set their transforms to 0,0.
Title: Re: How do I build a correctly aligning vertical scrollview table?
Post by: pawankumar113 on November 04, 2014, 04:57:03 AM
Right click on Table then again alignment your table for positioning.
Here attaching image.