UI Slider

UISlider Using a Switch and a Slider

1. Create a new View-based Name the application SwitchSlider.
2. Drag the png and edit_remove.png images from the resources folder to the Resources folder in Groups & Files.
3. Open xib in Interface Builder.
4. Add a Slider and a Switch from the Resize the slider to be larger, set the edit_remove .png as the minimum image and edit_add.png as the maximum image (Figure 12-16).
5. Notice that the Slider’s minimum value is zero and maximum is Leave the values unchanged.
6. Save and exit Interface
7. Open SwitchSliderViewController and implement a method named handleSwitch and a method named handleSlider (Listings 12-3 and 12-4). Also implement a property for the UISwitch named

   

Figure 12-16 A view with a switch and a slider

1. Save and build.
2. Open xib in Interface Builder.
3. Ensure File’s Owner has a SwitchSliderViewController for its type (it should already).
4. Connect the mySwitch outlet to the switch on the
5. Connect the handleSlider action to the slider’s Value Changed
6. Connect the handleSwitch action to the switch’s Value Changed
7. Save and exit Interface
8. Click Build And Go (Figure 12-17). Click the switch and it logs to the Debugger Change the slider’s value to the far right. The switch’s value changes to ON (Figure 12- 18).

   

 Figure 12-17 The application running in iPhone Simulator

   

 Figure 12-18 Moving the slider to maximum value changes the switch’s value

    Listing 12-3 SwitchSliderViewController.h #import <UIKit/UIKit.h> @interface SwitchSliderViewController : UIViewController { IBOutlet UISwitch * mySwitch; } @property(nonatomic, retain) UISwitch * mySwitch;

• (IBAction) handleSwitch: (id) sender;
• (IBAction) handleSlider: (id) sender;

@end   Listing 12-4 SwitchSliderViewController.m #import "SwitchSliderViewController.h" @implementation SwitchSliderViewController @synthesize mySwitch; - (IBAction) handleSwitch: (id) sender { if( [((UISwitch *) sender) isOn] == YES){ NSLog(@"It's on"); } else { NSLog(@"It's off"); } }

• (IBAction) handleSlider: (id) sender { NSLog(@"value: %f", ((UISlider *)sender).value);

if( [((UISlider *) sender) value] == ((UISlider *) sender) .maximumValue) { [mySwitch setOn:YES]; } }

• (void)dealloc { [mySwitch release]; [super dealloc];

} @end  

UITextField

The iPhone uses the UITextField class to render text fields. A text field is associated with a keyboard that appears when a user taps in the text field. Keyboard styles include Number Pad, Phone Pad, URL, and several others. You can set the keyboard style programmatically or using Interface Builder (Figure 12-19).   Figure 12-20 illustrates several other text field properties you might set. You can specify how text should be capitalized. Valid choices are None, Words, Sentences, and All Characters. You can also specify if the text field should attempt to correct spelling errors by setting the correction property to YES. If you wish the text field to be a password, then check the Secure checkbox in Interface Builder. Other properties you might wish changing are the text field’s    

Figure 12-19 Setting a text field’s keyboard type

border, background, font, and return key for the keyboard. Figure 12-20 shows the valid choices for a keyboard’s return key. For a complete listing of properties and method available to you, refer to the UITextField Class Reference.    

Figure 12-20 Valid choices for a keyboard’s return key

 

Using UITextField (with a Number Pad)

1. Create a new View-based Application named TextField.
2. Open xib in Interface Builder. Drag two UITextField controls from the
3. Select the second text field and in its inspector, change its Keyboard to Number
4. Select the first text field and change its Return Key to
5. Save and exit Interface
6. Open TextFieldViewController in Xcode and implement the textFieldDone action (Listings 12-5 and 12-6). Also, add an IBOutlet for the second text field and implement the numberFieldDone
7. Save and then open xib in Interface Builder. Connect the textFieldDone action to the first text field’s Did End on Exit event.
8. Save and exit Interface
9. Click Build And Notice that when finished editing the first text field, upon clicking Done, the text pad disappears. The number pad, though, has no Done key (Figure 12-21).

   

                               Figure 12-21 The number pad has no Done key.

 

                                                                                                                             Figure 12-22 Button is under two textfields

1. Open xib in Interface Builder and drag a button onto the view’s canvas. Resize the button to cover the entire canvas.
2. In the Document window, expand the View and ensure the newly added button is behind the two text fields (Figure 12-22).
3. In the Inspector’s Button Attributes pane, change the button’s Type to custom and uncheck any checked drawing checkboxes (Figure 12-23).
4. Connect the numberField outlet to the second text Connect the numberFieldDone action to the Touch Up Inside event for the button added to the canvas (Figure 12-24).
5. Save and exit Interface Builder, then Click Build And Click the second text field and the number pad appears. Click anywhere outside the second text field and the number pad disappears (Figure 12-25).

   Listing 12-5 TextFieldViewController.h #import <UIKit/UIKit.h> @interface TextFieldViewController : UIViewController { IBOutlet UITextField * numberField; } @property(nonatomic, retain) UITextField * numberField;

• (IBAction) textFieldDone: (id) sender;
• (IBAction) numberFieldDone: (id) sender;

@end    

 Figure 12-23 Changing button’s type to Custom

     

 Figure 12-24 Connecting the numberFieldDone action to the button

     

 Figure 12-25 The number pad appears and disappears from the application

Listing 12-6 TextFieldViewController.m #import "TextFieldViewController.h" @implementation TextFieldViewController @synthesize numberField;(IBAction) textFieldDone: (id) sender { [sender resignFirstResponder]; }(IBAction) numberFieldDone: (id) sender { [numberField resignFirstResponder]; }(void)dealloc { [numberField release]; } @end

 

UITextView

Use a UITextView to capture multiple lines of text. Apple’s reference documentation describes this control best: ―The UITextView class implements the behavior for a scrollable, multiline text region.‖ There is not really much more you can say about a text view, other than it’s a text area,it is generally used for entering paragraphs of text rather than a single line. There are several properties you can set to customize the control’s appearance; including, the font, textColor, editable, and textAlignment properties. You can also check if it has text using the hasText method. Figure 12-26 illustrates several properties you might wish setting for a UITextView in Interface Builder. For more information on the UITextView, refer to the UITextView Class Reference.    

Figure 12-26 UITextView properties you might wish setting in Interface Builder

  A segmented control groups together two or more segments, where each segment acts as an independent button. The next task illustrates a segmented control.   Using a UISegmentedControl

1. Create a new View-based Application named segment.
2. Add the images png and wizard.png from the resources folder to the Resources folder in Groups & Files.
3. Open xib in Interface Builder.
4. Add a Segmented Control to the view’s
5. Change the control so it has three Change the zero segment’s name to Kids,the first segment’s image to colorize.png image, and the second segment’s image to wizard .png (Figure 12-27). Change the control’s style to Bordered.

       

Figure 12-27 Modifying the segmented control in Interface builder

         

Figure 12-28 The application running in iPhone Simulator

 

1. Save and exit Interface builder.
2. Open SegmentViewController    and     add     an    IBAction      called    handleSegment    to SegmentViewController (Listings 12-7 and 12-8).
3. Save and then open xib in Interface Builder.
4. Connect the segment’s Value Changed event to the File’s Owner handleSegment
5. Click Build And Figure 12-28 illustrates the application’s appearance and Listing 12- 9

contains the debugger console’s logging. Listing 12-7 SegmentViewController.h #import <UIKit/UIKit.h> @interface SegmentViewController : UIViewController { } - (IBAction) handleSegment: (id) sender; @end Listing 12-8 SegmentViewController.m #import "SegmentViewController.h" @implementation SegmentViewController - (IBAction) handleSegment: (id) sender { UISegmentedControl * myseg = (UISegmentedControl *) sender; if(myseg.selectedSegmentIndex == 0) { NSLog(@"selected zero index..."); } else if(myseg.selectedSegmentIndex == 1) { NSLog(@"selected one index..."); } else { NSLog(@"selected two index..."); } } - (void)dealloc { [super dealloc]; } @end Listing 12-9 The debugger console’s logging for application [Session started at 2009-03-15 15:31:19 -0400.] 2009-03-15 15:31:50.201 Segment[366:20b] selected one index... 2009-03-15 15:32:13.027 Segment[366:20b] selected two index... 2009-03-15 15:32:36.908 Segment[366:20b] selected zero index...