Author Topic: UIPopupList  (Read 61028 times)

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
UIPopupList
« on: November 22, 2013, 07:14:58 PM »
Overview

Attaching a UIPopupList script to a button will bring up a list of options for you to choose from.



To create a popup list with a set of options that will be shown when you click on some button, first add the UIPopupList script to it and specify the Atlas and Font options. You will also likely want to choose specific sprites to be used for the Background and the Highlight. Background is the sprite used to create a background behind the popup list's item selection, and the Foreground is the sprite used to highlight the currently selected option.

To specify different options for your Popup List, simply enter them in the Options box. It's a multi-line text box, and each line you add to it will create a new entry in the list. So if you wanted to have 3 different options -- "First", "Second" and "Third" -- you would enter them like so:
  1. First
  2. Second
  3. Third

The Font section defines what font is going to be used by labels created by the popup list. In the picture above, first, second and third option labels were all created with the "Arimo20" font specified in the inspector. Depending on the type of font used (bitmap or dynamic), you will be able to change the Font Size and -- if using a dynamic font -- Font Style. You can also choose the Text Color that will tint the text as well as the Padding in between of your text and the border created using the Background sprite from the Atlas section.

If you don't want the popup list to animate as it appears, but simply want it to appear and disappear as needed, uncheck the Animated option.

If you want the text options to be localized using the Localization System, check the Localized checkbox.

In the OnValueChange section you can specify a function that will be called when a value gets chosen in the Popup List. If you've added the label somewhere, you can easily reference its SetCurrentSelection function, and the label's value will show the Popup List's selection. To do this, drag & drop the Label's game object into the Notify field and then choose the UILabel.SetCurrentSelection function from the drop-down list.

To add a change listener via code, use the EventDelegate.Add function:
  1. EventDelegate.Add(popupList.onChange, YourFunction);
...where YourFunction is of void FuncName(void) type:
  1. void YourFunction ()
  2. {
  3.     Debug.Log("Selection: " + UIPopupList.current.value);
  4. }

Pro-Tip

To make a more practical popup list -- a Drop-Down List, reference the button's label in the OnValueChange field and choose its UILabel.SetCurrentSelection method. After doing so, the label's text will automatically update itself when you choose an item from the list.

Class Documentation

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

If you have a question regarding this component or would like me to clarify something, just post a reply here.
« Last Edit: November 28, 2013, 03:59:28 PM by ArenMook »

Messu

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 5
    • View Profile
Re: UIPopupList
« Reply #1 on: November 27, 2013, 11:13:10 AM »
Hello,
I'm currently using NGUI in our project. We just updated version form 2.X to 3.X of NGUI and I'm having some problems with that component.
The Drop Down list is oversized on Width.

Moreover, I don't know how to use each parameter, could you put some details about it in the Documentation (or here) ?

I also would like to ask for at least one feature : the possibility for the drop down to be configurable as the label alignment.

Finally, I apologize for my poor English as I'm French.

By the way, thank you for your great work.
« Last Edit: November 27, 2013, 11:28:13 AM by Messu »

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UIPopupList
« Reply #2 on: November 28, 2013, 04:00:59 PM »
The selection is offset so much along the X because of your X Padding value under the Font section. Your highlight sprite also seems to be missing a border, which is why there is no offset between the left edge of the highlight and the text. The thicker the border of the sprite, the more offset it will be.

Messu

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 5
    • View Profile
Re: UIPopupList
« Reply #3 on: November 29, 2013, 04:55:58 AM »
I'm not sure what I should answer to your advices.
I got it about the padding but it's clearly not the main issue here.
Actually, the Sprite I'm using is the same for popup background, drop-down list background and highlight. The Sprite have a top and bottom border but no left and right border : it is intended to keep not horizontal lines on top and bottom of the sprite.
I use it as a Sliced Sprite.
I don't know if it has an impact but I also use an UIStretch and it changes the scale of many objects however the patch note says that the UIwidgets are no longer using the scale... that's why I'm a bit confused.
The main thing I'm not getting is why the popup list (at least in it's previous version) is not replicating the Label behaviour (I understand that now there is no direct link with the label so not sure it can be done now).

To fix my issue, I guess I will switch to another type of interaction to change the language of my app.
By the way, thank you for your answer.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UIPopupList
« Reply #4 on: November 29, 2013, 10:38:03 AM »
Why not give it a left and right border value? They are used to position the highlight as well.

Messu

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 5
    • View Profile
Re: UIPopupList
« Reply #5 on: December 02, 2013, 09:38:18 AM »
Finally, I solved my problem : I do not use UIPopup and I created an other ergonomic solution.
The point about left and right values is that if I put left and right values, my background picture will keep corners at the same size and the part between them will be stretched. What I wanted was to stretch the top and the bottom of my picture horizontally but keep the vertical size and stretch horizontally and vertically the center of my picture. In that way, I can have a background with a inclined line border as top and bottom borders but with vertical left and right sides.

knifesk

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 10
    • View Profile
Re: UIPopupList
« Reply #6 on: December 20, 2013, 12:10:44 PM »
what about the following scenario: I have many options... fetched from a Database... so, depending on what is returned from DB the dropdown is shorter, taller... sometimes options are that many that when popup opens it wont fit the screen. Is there any way to make it scrollable?

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UIPopupList
« Reply #7 on: December 20, 2013, 12:37:33 PM »
Not with this component, no. I advise dynamically creating a scroll view (or better yet -- instantiating a prefab of one), and populating it with your entries. Make it show when you need it, hide it when you don't. You don't need to be bound by what UIPopupList provides. It's simply a convenience script.

knifesk

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 10
    • View Profile
Re: UIPopupList
« Reply #8 on: December 23, 2013, 07:36:17 AM »
Ok, That was what I thought in the first place.. but I read in an old post somewhere around the forum that this was a pending feature, just asking in case it were already implemented.

Thanks.. I'll maybe share the prefab.

Cheers

rptts

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 3
    • View Profile
Re: UIPopupList
« Reply #9 on: March 05, 2014, 06:02:30 AM »
I was having the same problem as Messu and I solved the situation by making some changes in the UIPopupList.cs

Line 683:
  1. x = Mathf.Max(x, lbl.printedSize.x * dynScale);

Line 700:
  1. x = Mathf.Max(x, bounds.size.x - (bgPadding.x + padding.x) * 2f);

I only tested with bitmap font, and I didn't made an exhaustive examination to the UIPopupList.cs, so I'm not sure that it is 100% bulletproof, but so far, so good.

Morgoth

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 3
    • View Profile
Re: UIPopupList
« Reply #10 on: April 20, 2014, 11:22:37 AM »
Is there an easy way to get the index number of the selected item as int?

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: UIPopupList
« Reply #11 on: April 20, 2014, 05:30:14 PM »
No, there are no numbers, but you can treat your entries as such. For example the following options:
  1. OPTION 01
  2. OPTION 02
  3. OPTION 03
Then in your Localization file add these entries:
  1. "OPTION 01","First Option"
  2. "OPTION 02","Second Option"
  3. "OPTION 03","Third Option"
Your callback function will be receiving "OPTION 01", but your user will see "First Option".

Morgoth

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 3
    • View Profile
Re: UIPopupList
« Reply #12 on: April 20, 2014, 09:56:21 PM »
I think I got a passable solution,
added a public int mIndex variable to the class which is set at the start of the Select function to mIndex = mLabelList.IndexOf(lbl);

edit:
better solution: set mIndex in TriggerCallbacks to mIndex = items.IndexOf(mSelectedItem);
« Last Edit: April 21, 2014, 11:39:03 AM by Morgoth »

Edy

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 9
    • View Profile
Re: UIPopupList
« Reply #13 on: June 07, 2014, 06:22:34 AM »
Is there an easy way to get the index number of the selected item as int?

  1. int selectedIndex = UIPopupList.current.items.IndexOf(UIPopupList.current.value);

kruncher

  • Jr. Member
  • **
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 78
    • View Profile
Re: UIPopupList
« Reply #14 on: July 25, 2014, 07:53:31 PM »
It would be very useful if we could either a) get the zero-based index of the selected item or b) associate a private identifier with each item.

The display label isn't always unique which makes it impossible to determine which item has been selected...

For instance, in HTML you can have this:
  1. <select>
  2.     <option value="private-value-1">Visible Label 1</option>
  3.     <option value="private-value-2">Visible Label 2</option>
  4. </select>
  5.