Author Topic: UIProgressBar  (Read 26305 times)

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,154
  • Toronto, Canada
    • View Profile
UIProgressBar
« on: November 22, 2013, 02:44:14 AM »
Overview

UIProgressBar is the base class that both the UISlider and the UIScrollBar inherit from. You can also use it by itself to create progress bars -- sliders without a thumb.



The only thing a UIProgressBar requires to function is a refrence to the Foreground widget. This widget should be of the absolute maximum dimensions the progress bar will be allowed to occupy, which is what happens when its Value is at 1.0 (100%).

To create a very simple progress bar, just create a sliced sprite and give it a width of 300 with the height of 20.

Next, add a UIProgressBar script to that sprite (the background), and set up the Foreground field accordingly. At this point you can hit Play and adjust the values in the Inspector window, and the sprite should react accordingly.

To change the direction in which the progress bar will increase as its value goes from 0 to 1, change the Direction field.

If you want the progress bar to be interactable, have a look at the UISlider component.

In the OnValueChange section you can specify a function that will be called when the progress bar's value changes. If you've added the label somewhere, you can easily reference its SetCurrentPercent function, and the label's value will show the Progress Bar's value in percent. To do this, drag & drop the Label's game object into the Notify field and then choose the UILabel.SetCurrentPercent function from the drop-down list.

To make a custom function eligible for On Value Change, simply make it of type "public void FuncName ()" like so:
  1. public void MyFunc () { Debug.Log(UIProgressBar.current.value); }

Pro-Tip #1

You are not limited to using sprites for the progress bar's foreground. One interesting example would be to use a UILabel set to "ClampContent" overflow and Max Lines of 1. The label's text will be filled as the progress bar's value increases.

Pro-Tip #2

You can add OnChange delegate listeners via code by using EventDelegate.Add, just like with everything else:
  1. public class Test : MonoBehaviour
  2. {
  3.     void Awake()
  4.     {
  5.         UIProgressBar pg = GetComponent<UIProgressBar>();
  6.         EventDelegate.Add(pg.onChange, MyFunc);
  7.     }
  8.  
  9.     void MyFunc ()
  10.     {
  11.         Debug.Log(UIProgressBar.current.value);
  12.     }
  13. }

Class Documentation

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

If you have a question regarding this component or would like me to clarify something, just post a reply here.
« Last Edit: January 04, 2014, 12:35:50 PM by ArenMook »

niosop

  • Guest
Re: UIProgressBar
« Reply #1 on: December 12, 2013, 12:50:48 AM »
UIProgressBarEditor.cs seems to be missing from the latest Asset Store release.  As well as UISliderEditor.cs and possibly others, but I haven't searched through to see which are missing.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,154
  • Toronto, Canada
    • View Profile
Re: UIProgressBar
« Reply #2 on: December 12, 2013, 05:58:31 AM »
You likely didn't follow upgrade instructions from the Readme file that involve deleting the NGUI folder.

niosop

  • Guest
Re: UIProgressBar
« Reply #3 on: December 12, 2013, 11:47:36 AM »
That's very possible, I don't know who did the NGUI update commit.  Doing a clean reinstall fixed it right up.  Thank you so much for your time, it is appreciated.

nzen

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 1
  • Posts: 30
    • View Profile
Re: UIProgressBar
« Reply #4 on: May 15, 2014, 02:29:03 AM »
Is there any need for an Alpha setting on the progress bar at all? It seems to auto get its value from the Foreground sprite's alpha.

It's stopping me being able to customise any child sprite alpha colour.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,154
  • Toronto, Canada
    • View Profile
Re: UIProgressBar
« Reply #5 on: May 15, 2014, 12:11:45 PM »
It's a convenience method. If you look inside UIProgressBar.alpha you will see where it actually comes from and what it affects.

Edy

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 9
    • View Profile
Re: UIProgressBar
« Reply #6 on: June 06, 2014, 11:13:32 AM »
I don't see the logic on the UIProgressBar.alpha property either. UIProgressBar is a component made of widgets (UIWidgetContainer), not a widget itself. When I want the referred widgets to be affected by the alpha uniformly, I just arrange them in the proper hierarchy (I.e. making all them children of the same UIWidget). UIProgressBar.alpha looks to have been useful on past versions (< 3), but now I feel it more a constraint than a helper.

BTW, the ability of using UILabel as foreground seem not to be working (as per version 3.6.2). The label is always displayed in full no matter the value of the UIProgressBar.

Edy

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 9
    • View Profile
Re: UIProgressBar
« Reply #7 on: June 06, 2014, 11:25:48 AM »
I've just realized that the alpha property is used when showing or hidding the Scroll Bars from a UIScrollView component. Instead of directly modifying the alpha of the fore/back/thumb widgets, I think it might be more correct to just modifying the alpha in the UIWidget component in the same GameObject as the UIProgressBar.

For instance, modifying the UIProgressBar property to something like this:

  1.         public float alpha
  2.         {
  3.                 get
  4.                 {
  5.                         UIWidget w = GetComponent<UIWidget>();
  6.                         if (w != null) return w.alpha;
  7.                         return 1f;
  8.                 }
  9.                 set
  10.                 {
  11.                         UIWidget w = GetComponent<UIWidget>();
  12.                         if (w != null) w.alpha = value;
  13.                 }
  14.         }
  15.  

This introduces the requirement of an UIWidget to be adjacent to the UIScrollBar component for using the "auto-hide scroll bars" feature from the Scroll View. Probably there are better solutions (maybe just using NGUI.SetActive for enabling/disabling scroll bars from the scroll view?). I'm just thinking loud.
« Last Edit: June 06, 2014, 11:39:12 AM by Edy »

chiphuc113

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 5
    • View Profile
Re: UIProgressBar
« Reply #8 on: June 18, 2014, 10:35:36 AM »
Can I use UIProgressBar to make a Circle Progress Bar ?

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,154
  • Toronto, Canada
    • View Profile
Re: UIProgressBar
« Reply #9 on: June 18, 2014, 08:25:40 PM »
If you set the sprite to be Filled 360, sure.

chiphuc113

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 5
    • View Profile
Re: UIProgressBar
« Reply #10 on: June 18, 2014, 09:43:19 PM »
I was create a progress bar by Widget Wizard. And I changed type of ForeGround by Filled 360. But i only can change the value thought Fill Amount. Anytime I change value thought UISlider it will change type of ForeGround to Horizontal. Have anyway to change the value thought UISlider. Please help me, I m stuck.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,154
  • Toronto, Canada
    • View Profile
Re: UIProgressBar
« Reply #11 on: June 19, 2014, 06:55:11 PM »
Don't use the progress bar at all in this case. Just change the sprite's Fill Amount (UIBasicSprite.fillAmount).

chiphuc113

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 5
    • View Profile
Re: UIProgressBar
« Reply #12 on: June 19, 2014, 09:41:47 PM »
Thank you ArenMook. I did it.

schneidb

  • Newbie
  • *
  • Thank You
  • -Given: 2
  • -Receive: 2
  • Posts: 24
    • View Profile
Re: UIProgressBar
« Reply #13 on: July 18, 2014, 01:06:44 PM »
Regarding Pro-Tip #1...

I can't get this to work, as described...

It does work if the Foreground field is a UISprite, but not when the Foreground field is a UILabel.  I am using the "Unity" style font (used to be called dynamic) rather than NGUI.  Is this why it isn't working or am I missing something?

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,154
  • Toronto, Canada
    • View Profile
Re: UIProgressBar
« Reply #14 on: July 19, 2014, 12:50:37 PM »
Yup, you're right -- seems I broke that functionality at some point. I'll look into fixing it.