[Tutorial] UIPickerView: The Basics (Basic Tip Calculator)

[Steaps]

So today i was bored and learned how to use UIPickerViews. Next someone asked me how to use them, so i decided to make a tutorial on them. The tutorial can be found on my blog at: Steaps’ Blog! :: Random :: Tutorial: UIPickerView Basics

The tutorial uses an NSMutableArray to set the rows of the UIPickerView, and some logical math to do the tip calculating.

If you notice something wrong, please post a comment or e-mail me about it. Thanks .

[Bertrand21]

nice work man! thanks

[Steaps]

Originally Posted by Bertrand21

nice work man! thanks

No problem! . I feel proud that i did something useful now .

EDIT: I just updated the video, should be easier to see now.

[ybrikeeg]

great tutorial!! I was wondering if there was a way to make a "custom" picker in the sense of having the picker be pink instead of gray. And if there is anything else you can do to customize it.

[Hackintosh Dev]

Off topic i know, but whats the winterboard theme called that you used in your cracked screen app?

[ybrikeeg]

Originally Posted by Hackintosh Dev

Off topic i know, but whats the winterboard theme called that you used in your cracked screen app?

From my YouTube video?

[Hackintosh Dev]

From Steaps' video of the cracked screen simulation:

Steaps’ Blog! :: Random :: [Release] Cracked Screen – Jailbroken Devices Only

This theme is amazing!

[voiperguy]

Originally Posted by ybrikeeg

great tutorial!! I was wondering if there was a way to make a "custom" picker in the sense of having the picker be pink instead of gray. And if there is anything else you can do to customize it.

Took some time, but I figured out how to add billTotal and tipAmount.

- Add a Label to your .xib file (delete the text "Label")
- Add (to your .h file) IBOutlet UILabel *totalAmount;
- In your .m file (below where the PickerView calculates the numbers) add this below "tipAmount.text....bla bla bla"
totalAmount.text = [[NSString stringWithFormat:@"Total: $%.2f", (tipTotal + [billTotal.text floatValue])];

That should be it. Now when you enter a bill amount and scroll the pickerview to the percentage you want to tip it will display the "Tip Amount" (as in the tutorial)... and, it will add the bill amount, tip amount and give you a total amount. Kinda confusing, but it works.

[voiperguy]

Con't of "TipCalc"

Tips do not usually include the tax so I've added a little something to this tutorial (originally by Steaps)

In your .h file:

IBOutlet UITextField *taxTotal;

In your .xib file, include a Text Field from your Library. Add a Label beside it, "Tax:"

In Connections Inspector, connect the text field "taxTotal" (you know what I mean)

In your .m file:

in the voidDidLoad, under billTotal.delegate = self;
add this: taxTotal.delegate = self;
(this will remove the text field after pressing Done)

in the (void)pickerView, if you followed Steaps tutorial you will find a line looking like this: float tipTotal = [(billTotal.text....bla bla bla)

Change this line to:
float tipTotal = ([billTotal.text floatValue] - [taxTotal.text floatValue]) * tipSelected;

Build & Go

If you made your connections properly then when you run the tutorial, you should see the original Bill Amount (text field), your new Tax (text field) and the rest of it...the pickerView and Tip Amount label.

When you enter your Bill...say $100...and enter a tax amount of i.e. $10, then scroll to 10% tip... your new "Tip Amount" is $9.00

You might want to make the "Tip Amount" label (in the .xib) a little smaller to fit the other results.

I'm going to make future additions to this as I learn...if you're interested.

[voiperguy]

Ok, now lets Split the bill.

in your .h file, add 2 more outlets:

IBOutlet UITextField * splitPerson;
IBOutlet UILabel * splitAmount;

In your .xib file, add another Text Field and a label "Split" to the left of your new field. Add another Label for the splitAmount.

Make your connections.

In your .m file, in the (void)viewDidLoad section, add this line:
splitPerson.delegate = self;
(again, this will release the keyboard when pressing Done).

within the (void)pickerViewUIPickerView *)...if you followed the previous post for this topic, you will have a line... totalAmount.text = [NSString...blablabla

under that line, enter this:

float splitTotal = (([billTotal.text floatValue] + [taxTotal.text floatValue] + tipTotal) / [splitPerson.text floatValue]);
splitAmount.text = [NSString stringWithFormat:@"$%.2f", splitTotal];

Build & Go.

Now you should have your TipCalc fully operational. Enter your bill, tax and how many people to split...scroll the % you want...and presto... you now have all your 'labels' filled with the results.

This isn't full proof. If you put a "0" in for the Split, in your splitAmount label, you will see the result "#inf". The coding needs an "if/else" statement, but I'm not that Xcode savvy yet

This was the "Easy" way of doing the split. I would really appreciate if someone could expand on this and show us how to not use a UITextField to input the Split #, but use the PickerView (with 2 scrolling areas), left side for the tip % and the right side for the splitPerson 1-2-3-4..10, etc.

[chaseacton]

Thank you so much!!! + Rep for you.

I do have one question though. How could i make this have custom tip percents though. I mean instead of 1, 2, 3, 4, etc. I want 1, 5, 10 ,15, etc.

Thanks in advanced,
Chase

[web20devxer]

Thank you very much for this nice tutorial. Comes in very handy

[Steaps]

Noo problem .

[zeolite]

I just wanted to say thanks. This is by far the most helpful tutorial on UIPickerViews I have been able to find!

[IphoneSdk]

Awesome Tutorial!

[farazhaider88]

really great work...

[kraftyDevil]

thanks for this. It helped me greatly.

Only suggestion I can think of is to add a blurb about the protocols that you supported. As a beginner, I didn't know what the thing was all about...but then I found it elsewhere.

This really helped me though!