UITextFields and UIButton

UITextFields and UIButtons

Hi again everyone, sorry for the late update, I have been pretty busy with another project for the blog this past week, along with a few other jobs/projects unrelated to this.  I still have yet to finish that other tutorial so I thought I would throw something together today that most of you guys will find relatively helpful (I hope).  So here we have it, a little tutorial that covers labels (nothing new at all here), textfields, buttons, and NSUserDefaults.  Alright, lets begin, open Xcode and create a new View Based Application, name it TextInput.

Navigate to TextInputViewController.h and you will need to declare the UITextFieldDelegate protocol by adding<UITextFieldDelegate> after TextInputViewController : UIViewController, this will tell your program that it needs to conform to the UITextFieldDelegate protocol, which in turn, allows you to create UITextFields. Now, in the @interface section, declare two UILabels, two UITextFields, and two UIButtons like so:


UILabel *firstLbl; UILabel *lastLbl; UITextField *firstName; UITextField *lastName; UIButton *saveBtn; UIButton *loadBtn;,

Under that, make sure to add the following code outside of the brackets but before the @end, this will let you control the UIButtons and UITextFields:


@property(nonatomic,retain) UITextField *firstName; @property(nonatomic,retain) UITextField *lastName; @property(nonatomic,retain) UIButton *saveBtn; @property(nonatomic,retain) UIButton *loadBtn;

Now, go to your TextInputViewController.m and uncomment the loadView method. Create a UIView now to fit the frame of the screen and set it to the self.view:


CGRect frame = [UIScreen mainScreen].applicationFrame; UIView *view = [[UIView alloc] initWithFrame:frame]; self.view = view;

NOTE: This is the last time I will be explaining how to create the viewController’s main view, same goes with generic labels that we will be using a lot, which will follow
From here, we need to prepare and initialize all of your views and objects that we will be using in the main viewController. Starting with the labels:


firstLbl = [[UILabel alloc] initWithFrame:CGRectMake(20,10,320,32)]; lastLbl = [[UILabel alloc] initWithFrame:CGRectMake(20,70,320,32)]; firstLbl.backgroundColor = [UIColor clearColor]; lastLbl.backgroundColor = [UIColor clearColor];

This is simple, we are preparing the UILabels for the loaded data that we will be accessing later. I didn’t bother setting any other properties for these labels, this isn’t a UILabel tutorial, I covered more of that in the Hello World tutorial a couple of weeks ago. After that, we get into the new stuff, the fun stuff. You will need to start by creating a method that looks something like this:


- (UITextField *) firstName { if(firstName == nil) { CGRect frame = CGRectMake(20,40,280,30); firstName = [[UITextField alloc] initWithFrame:frame]; firstName.borderStyle = UITextBorderStyleRoundedRect; firstName.textColor = [UIColor blackColor]; firstName.font = [UIFont systemFontOfSize:17.0]; firstName.placeholder = @"First Name..."; firstName.autocorrectionType = UITextAutoCorrectionTypeNo; firstName.keyboardType = UIKeyboardTypeDefault; firstName.returnKeyType = UIReturnKeyDone; firstName.clearButtonMode = UITextFieldViewModeWhileEditing; firstName.delegate = self; } return firstName; }

Alright, there are a LOT of new concepts here, all of which pertaining to setting up your customized UITextField, we will be using this again in a moment. First off, we have an if statement that checks to see if the text field has already been allocated and initialized, if the firstName returns a nil value, then the enclosed statements are executed, if it doesn’t, then it just returns the already allocated UITextField. Assuming that the statement was satisfied, lets step through all of the properties of the text field. Like with most of the UIKit objects, you need to set the text field inside of a frame using the CGRectMake method. We initializefirstName with this frame. Then we set the borderStyle, this is what the frame of the field will look like, I used theUITextBorderStyleRoundedRect style here, which, like it says, makes the frame rounded on the corners. textColorsets the input text’s color and font sets the font size of that input, similar to that used in a UILabel. We use placeholder to fill the UITextField with a background text until it is touched and/or has any input. autocorrectionType sets whether or not to use the iPhone’s auto-correct dictionary with input, I set this to no for proof and practice, the default is YES. ThekeyboardType and returnKeyType properties delegate the keyboard settings, the first sets it to the standard keyboard and the latter sets the return key to say Done and to dismiss the keyboard. Almost done, clearButtonMode property tells us whether or not to use the little gray ‘X’ that clears the field. Finally, delegate tells the text field that it is being controlled by this particular view controller. We return the UITextField now at the end.

We use this method form again for the lastName, replacing firstName with lastName and changing any properties based on what you want to play with. Remember, hit Esc on your keyboard to list the available options for each property after the ‘=’ sign.

Add the following code to dismiss the keyboard when Done is clicked:


- (BOOL) textFieldShouldReturn:(UITextField *)textField { [textField resignFirstResponder]; return YES; }

Now we need to start setting up the buttons that save and load the data:


- (UIButton *) saveBtn { saveBtn = [[UIButton buttonWithType:UIButtonTypeRoundedRect] retain]; saveBtn.frame = CGRectMake(0,0,90,45); [saveBtn setTitle:@"Save" forState:UIControlStateNormal]; [saveBtn setTitle:@"Save" forState:UIControlStateHighlighted]; [saveBtn setTitleColor:[UIColor colorWithRed:0.0 green:0.3 blue:1.0 alpha:1.0] forState:UIControlStateNormal]; [saveBtn setTitleColor:[UIColor colorWithRed:0.0 green:0.1 blue:1.0 alpha:1.0] forState:UIControlStateHighlighted]; [saveBtn setBackgroundColor:[UIColor clearColor]]; [saveBtn addTarget:self action:@selector(saveText) forControlEvents:UIControlEventTouchUpInside]; return saveBtn; }

Alrighty then, same idea as the UITextField method, we are just setting a group of properties for the UIButton. First we set the type of button we want to UIButtonTypeRoundedRect and retain the view. Next is the frame as always, the x,y coordinates are set to 0 because frankly, I prefer to set the location of UIButtons using the center point, which I will show later. Button’s titles and images etc are based off of the UIControlState of the button. First, we set the title of the button at itsUIControlStateNormal, in this case it just says “Save”; we use the same statement again below, except usingUIControlStateHighlighted, this sets the title of the button when it is clicked down. We set the titleColor now for both states to a custom UIColor value, followed by the backgroundColor property, which makes the outside of the frame meld with the background’s color or image. Finally, the most important bit of code is theaddTarget:action:forControlEvents: that tells the program to execute the method saveText inside of self when the user performs a UIControlEventTouchUpInside, aka a touch of the button. We return the button and continue.

Do this again with loadBtn, only this time make sure to change that second to last line to:


[loadBtn addTarget:self action:@selector(loadText) forControlEvents:UIControlEventTouchUpInside];

Configure it how ever you wish and play around with the properties, the best way to learn how to program is trial by error.

Now before we put this all together in our loadView method, we have two more bits of code to write, and these will be the ones the let us save and load our data: saveText and loadText. Let us start with the first one, insert the following code after the UITextField and UIButton methods:


[[NSUserDefaults standardUserDefaults] setObject:firstName.text forKey:@"firstName"]; [[NSUserDefaults standardUserDefaults] setObject:lastName.text forKey:@"lastName"]; [[NSUserDefaults standardUserDefaults] synchronize]; firstName.text = @""; lastName.text = @"";

Alright, new concept here: NSUserDefaults. This is the Foundation Frameworks method of saving the default settings for a program along with other bits of data. The first two methods are essentially identical, you start by callingstandarUserdefaults which tells the next commands to look in the standard library of saved data. Next, we need to save the string from the UITextField, which is done by using setObject: and then the string, which is the text property of your text field, and finally, we need to tell the computer where exactly to look when we want to load this, so we set forKey: to the name of the variable. NOTE: I usually do it this way as an organizational method but you can set the forKey to whatever you want. Also, if you poke around through the documentation from Apple, you can get the methods to save other types of data. Last new bit of code here is the synchronize method, which tells the program to pretty much save and do so now. If you do not use this, when you are saving larger bits of data there is a chance that it does not save before the application is exited, at which point you can lose an entire saved game, as was the case with an error I was having on an application I wrote a while back. Nothing new after that, these two calls just clear the text fields, I used this as a little visual aid to indicate that something actually happened.

Okay, almost done… now we just need to tell the program just how to load the data that we previously saved. Add:


NSString *first = [[NSString alloc] initWithString:[[NSUserDefaults standardUserDefaults] objectForKey:@"firstName"]; NSString *last = [[NSString alloc] initWithString:[[NSUserDefaults standardUserDefaults] objectForKey:@"lastName"]; firstLbl.text = first; lastLbl.text = last; [first release]; [last release];

Alright, just the normal NSString declartaion/allocation/initialization is used here, we all know how to use that, the new part comes with the string that we are initializing the variable with. We do as we did before and tell NSUserDefaults to use thestandardUserDefaults, then we tell it to load the object that has a matching key to the one we put after objectForKey, if there is an object there, it loads it, if not, nothing happens, simple as that. We do the same thing again only loading a different object this time. NOTE: I am relatively sure that you can use stringForKey: instead although I have never had a reason to so play with it as you will. Now we place those strings inside of the UILabels, release the retained memory from the strings and move on to the last little thing, putting it all in play. Back to the loadView method, insert:


[self firstName]; [self lastName]; [self saveBtn]; [self loadBtn]; [saveBtn setCenter:CGPointMake(100,200)]; [loadBtn setCenter:CGPointMake(220,200)]; [self.view addSubview:firstName]; [self.view addSubview:lastName]; [self.view addSubview:saveBtn]; [self.view addSubview:loadBtn]; [self.view addSubview:firstLbl]; [self.view addSubview:lastLbl];

This is what makes everything activate and come alive. The first 4 lines execute your button and text field methods that initialze and allocate them with your custom settings. The following two set the center of the buttons to exactly where I want them, I find this easier for most subviews. The last 6 lines add everything to the superview. That is it, make sure that you releaseeverything that you retained in the dealloc method, Build & Go.

I changed the background color the same way we did in Hello World

That is all for now, you can get the sample code here.

Regards,
sj

http://idevkit.com/iphonedev/2009/09/uitextfields-and-uibuttons/

Posted by 오늘마감