Tasharen Entertainment Forum

Support => NGUI 3 Documentation => Topic started by: ArenMook on November 23, 2013, 04:37:40 AM

Title: UITable
Post by: ArenMook on November 23, 2013, 04:37:40 AM

Overview

UITable is a helper script that lets you easily arrange widgets into a variable cell size grid. If you're familiar with a HTML tables, it's quite similar. It can be used both at edit time as well as run-time. If you want fixed size cells, consider using the more performant UIGrid (http://www.tasharen.com/forum/index.php?topic=6756) instead.

(http://www.tasharen.com/ngui/uitable.jpg)

To use UITable, select a panel, right-click anywhere in the scene view, and choose the Table from the [/b]Create menu. You may also simply attach the UITable component to any empty game object.

A table always extends toward the right first. The number of Columns controls how many columns there will be in a table before a new line will be started. The line will either be above or below the previous, based on the Direction field.

By default, the Table will simply reposition all of its children, and the order will be the order that the children happen to have been created. If you want to change this and sort them in a specific order, you can name them alphabetically ("001", "002", "003", etc), and check the Sorted checkbox. Doing so will make the Table sort them in order first before adjusting their position.

Lastly, if you want to keep the spacing left by invisible (disabled) children, turn off the Hide Inactive flag. By default this flag is on, and invisible children are simply ignored.

You can add padding in between of cells by modifying the Padding field.

Note that each child's pivot point matters. If the table's children all have center-based pivot points, they will appear to be centered within the table. If they have a top-left pivot, they will appear to be based in top-left corners of the table's cells, and so on. It's best to always work with cell items that have matching pivot points.

Pro-Tip

The table is useful for positioning things at run-time, but you can also execute it at Edit time. Simply right-click it and choose the Execute option. You can then safely delete the component if you don't need it.

(http://www.tasharen.com/ngui/execute.jpg)

Pro-Tip #2

TweenScale operations on the table's children can notify the table, causing it to reconsider its cell dimensions, thus pushing others out of the way as needed. You can create foldable areas this way like in the Quest Log example provided with NGUI.

Class Documentation

http://tasharen.com/ngui/docs/class_u_i_table.html

If you have a question regarding this component or would like me to clarify something, just post a reply here.

Title: Re: UITable
Post by: Isamson on December 03, 2013, 03:41:05 PM

I've started working with the table and it's really useful. I'm trying to create a something like the objective panel that opens and closes. So far, I can dynamically create all the objectives and put them in the table where they get repositioned. I'm implementing a toggle that will allow only 1 description to open at a time (not a problem).

The problem I'm experiencing is that if there are enough objectives, it's possible that some of them will be positioned outside the screen. I'm wondering if there is a way to get the size of the table? This would allow me to compare that size to the panel size and add a scroll bar when needed.

Title: Re: UITable
Post by: ArenMook on December 03, 2013, 06:19:04 PM

You can calculate the size of the table using NGUIMath.Calculate series of functions.

Title: Re: UITable
Post by: pretender on December 15, 2013, 03:47:59 AM

Is it possible to arrange gameobjects like cube with grid or table scripts?

Title: Re: UITable
Post by: ArenMook on December 15, 2013, 08:09:43 AM

Grid -- yes.

Title: Re: UITable
Post by: pretender on December 15, 2013, 08:21:25 AM

great, it works

Title: Re: UITable
Post by: jinsediaoying on January 16, 2014, 05:38:33 AM

Is there any option to change the anchor point of the Table and the Grid?

Title: Re: UITable
Post by: ArenMook on January 17, 2014, 12:33:18 AM

No, the scripts are kept simple for a reason -- you should make a copy and modify them to suit your needs better.

Title: Re: UITable
Post by: Fractalbase on June 16, 2014, 09:12:08 PM

Does usage of UITable require Panels?  I'm attempting to use nested tables with 2 text boxes, a text field, and a sprite, and the ngui items don't seem to work with the uitable (no 'locking' of ui items to table columns).

Title: Re: UITable
Post by: ArenMook on June 17, 2014, 02:13:53 PM

Nesting tables is not a good idea as there is no way to guarantee that the child table will update before the parent, and any changes to the child will affect the parent. Stick to one table.

Title: Re: UITable
Post by: matteo.piccioni on June 23, 2014, 04:14:29 AM

Hello,
I am evaluating to switch to unity to build my Android and iPhone app and I found that NGUI is really good for my needs
I have a question for the last obstacle I have
In my app I should have an Indexed UITableView with sections and search textfield...populated by a list of about 2 thousand items from database (each row with image, text and descriptions)
UITable is able to achieve my goal ?
Thanks

Title: Re: UITable
Post by: ArenMook on June 24, 2014, 05:00:05 AM

UITable is like an HTML table. It's expensive, and resizes the cells based on their content.

For a table view, simply create a prefab out of a single row, then instantiate this row repeatedly to create your UI. You can position each instance yourself, or use UIGrid.

Also note that instantiating 2000 rows is going to hurt your performance. It's better to instantiate pages, or use the endless scroll view that comes with NGUI, instantiating only partial content at a time.

Title: Re: UITable
Post by: matteo.piccioni on June 26, 2014, 03:32:25 AM

Thanks for the tips

Title: Re: UITable
Post by: PoN on September 17, 2014, 03:08:58 AM

Aren could help me pls,

I would like my items with different height in table object with UITable component,  align by bottom bound, how to do that ?

thanks

Title: Re: UITable
Post by: ArenMook on September 17, 2014, 01:26:03 PM

Change the table to use that kind of a pivot, and use a bottom pivot on your widgets as well.

Title: Re: UITable
Post by: PoN on September 17, 2014, 09:21:17 PM

i've tried your an advice , and look at the attachments , that happens after execute.

Title: Re: UITable
Post by: ArenMook on September 18, 2014, 05:21:03 PM

Select one of your child game objects. Do you see where the transform gizmo is located? It's in the center. That's not the right pivot. As I mentioned, you need to change the pivot of the child items as well. Move widgets until the transform gizmo is in the right place.

Title: Re: UITable
Post by: PoN on September 18, 2014, 09:15:43 PM

yes, i've checked again , every child item has pivot - Center,Bottom, than i've run "Execute" of UITable , look at attachments pls

Title: Re: UITable
Post by: ArenMook on September 19, 2014, 10:03:48 PM

You're right. I've just added a "Cell Alignment" option to the UITable that explicitly controls the content's alignment. You will find it in the coming update (3.7.3)

Title: Re: UITable
Post by: Andresfdezb on October 02, 2014, 05:00:30 AM

How is UITable.Reposition function used? I Have a table with rows generated and activated/deactivated dinamically at runtime (with the addchild function). So whenever I create new rows (or activate/deactivate any row, it's all in the same funciton) I call Reposition function afterwards, but it doesn't seem to work the first time I do it. The table actually takes a few calls to the function to reposition all its contents properly.

Title: Re: UITable
Post by: ArenMook on October 02, 2014, 11:10:01 PM

Reposition() function collects all widgets underneath and calculates their dimensions. However if you've just enabled a game object, chances are its widgets haven't initialized yet. If you want widgets to init/refresh immediately, you need to use NGUITools.ImmediatelyCreateDrawCalls.

Title: Re: UITable
Post by: Andresfdezb on October 03, 2014, 03:48:59 AM

Quote from: ArenMook on October 02, 2014, 11:10:01 PM

Reposition() function collects all widgets underneath and calculates their dimensions. However if you've just enabled a game object, chances are its widgets haven't initialized yet. If you want widgets to init/refresh immediately, you need to use NGUITools.ImmediatelyCreateDrawCalls.

I don't know why, but ImmediatelyCreateDrawCalls only works the first time I call it (it places every new widget on its place). The following times all the new widgets created (and activated if they were already created) are placed on top of each other overlapping. Does ImmediatelyCreateDrawCalls root parameter need to be the UIRoot? Or can it be the UITable...

(BTW I use a workaround to "solve" the issue of the Reposition not working with the newly created table rows by starting a coroutine that calls the Reposition() function in the following frame)

Title: Re: UITable
Post by: ArenMook on October 04, 2014, 08:08:10 AM

You should pass the panel's game object to it.

Title: Re: UITable
Post by: Andresfdezb on October 06, 2014, 08:21:46 AM

Quote from: ArenMook on October 04, 2014, 08:08:10 AM

You should pass the panel's game object to it.

Ok, thanks for the response.

Title: Re: UITable
Post by: cartman412 on December 04, 2014, 02:49:53 PM

I am having some issues with the UITable as you can see in the image:

(http://s9.postimg.org/mccxlhff3/uitable_issue_game.png)

I want to add this title to the table but for some reason a huge space is added after it before the next element. This space also changes depending on the number of elements that follow. Any idea why this happens?

The pivot and the cell alignment of the table are both set to "top".

The first object is just a Label and it's size is the same as the letters you see.

Here is how the table looks without the label in it:

(http://s3.postimg.org/na9mzt8kj/uitable_issue1_game.png)

EDIT:

Here is the scene view:

(http://oi62.tinypic.com/2dl88bt.jpg)

and the structure in the hierarchy:

(http://oi59.tinypic.com/6h3uyu.jpg)

"Label" is just a UILabel gameobject. Note that "wordgrid" is actually an UITable, just haven't changed the name.

The reason why I added it to the table rather than to place it on the same level as the table is that the scroll view kept pushing the label down everytime I repopulated the table.

also here's how the table settings look like:

(http://oi61.tinypic.com/ddl2sy.jpg)

Hope this makes it clearer :)

Title: Re: UITable
Post by: ArenMook on December 05, 2014, 01:03:37 AM

There must be something else there other than the label, or the label's width and height is actually much larger than what you suggested. I'd have to see what it looks like in the scene view. Why is that header a part of the table anyway?

Title: Re: UITable
Post by: cartman412 on December 05, 2014, 06:55:19 AM

Quote from: ArenMook on December 05, 2014, 01:03:37 AM

There must be something else there other than the label, or the label's width and height is actually much larger than what you suggested. I'd have to see what it looks like in the scene view. Why is that header a part of the table anyway?

I edited my question, if you could have a look again :)

Title: Re: UITable
Post by: ArenMook on December 05, 2014, 03:16:18 PM

Your label doesn't seem to be using a top pivot, while your table is. That said, I don't think it should matter. I see no reason for it to push other content down so far.

P.S. Why do you have that huge camera gizmo showing? Disable 3D gizmos via the menu on the top-right corner of your scene view.

Title: Re: UITable
Post by: Sprite101 on January 13, 2015, 07:34:36 PM

I am really confused.  I've tried to follow the setup of the Quest Log example exactly, but I cannot tell what is telling the Table when to update.  There are zero collider events that point to the table and I'm getting particularly frustrated trying to get my implementation to work the way yours does.  Any help?

EDIT: Sigh... nevermind.  It turns out you HAVE to use TweenScale.  I was trying to use TweenHeight, which I don't think had the Update table checkbox.

EDIT AGAIN:  Turns out it does have an Update Table checkbox. 

Title: Re: UITable
Post by: jamdalu on September 01, 2015, 01:57:57 PM

UItable is deactivated at runtime in unity 5 - is this a bug or known issue ?  I need to sort menu at runtime - please help!

Title: Re: UITable
Post by: ArenMook on September 06, 2015, 05:53:26 PM

It deactivates itself after executing, it's always been like that. Check UITable.Start().

Title: Re: UITable
Post by: BAIZOR on April 05, 2018, 09:29:33 AM

I had a problem with Table.

My case:
I have a prefab with UITable onboard (in children object)
Need to relocate the prefab on initialization. My components on the prefab do this in Start method.
But. After reposition the transform, the UITable is going crazy.
I tried to call Reposition, it doesn't change anything.

Finally I found a solution:

1.         var table = GetComponentInChildren<UITable>();
2.         if (table != null)
3.         {
4.             table.Reposition();
5.             table.enabled = false;
6.         }

It's very important to disable Table after Reposition.
And very important execute all the code before reposition the prefab.

Hope it could help somebody!
Cheers! :)