iPhone SDK Programming A Beginner’s Guide phần 7 doc

To create a Detail Disclosure button, select a Round Rect Button from the library in Interface Builder and then change its type to Detail Disclosure button.. You create the Info light an

10. For the second button, open the inspector to Buttons Attributes Ensure the Shows Touch

on Highlight is checked (Figure 12-4)

11. Notice the drop-down (Figure 12-5) Here you select the button’s state and the related

field’s values will only apply to that state Ensure Default State Configuration is selected

12. Change Background to butbackgray.png and change Image to power.png

13. Select Highlighted State Configuration and change Background to butbackbluegray.png

and Image to power.png

Figure 12-4 Ensure the Shows Touch on Highlight is checked

(continued)

14. Select Disabled State Configuration and change Background to butbackgraydisabled.png and Image to powerdisabled.png.

15. For the third button, ensure Default State Configuration is selected and add the text

“Shock” to Title Select the butbackgray.png for Background

16. Select Highlighted State Configuration and add the text “Shocking” to Title Select butbackbluegray.png as the Background Note: do not make any changes to the Disable setting

17. Resize the buttons as necessary so they appear nice

18. Click Build And Go to run the application

Figure 12-5 Selecting a button’s state

Listing 12-1 ButtonsBackgroundViewController.h

#import <UIKit/UIKit.h>

@interface ButtonsBackgroundViewController : UIViewController {

IBOutlet UIButton * clearButton;

IBOutlet UIButton * smallButton;

}

@property (nonatomic, retain) IBOutlet UIButton * clearButton;

@property (nonatomic, retain) IBOutlet UIButton * smallButton;

- (IBAction) disableBut: (id) sender;

the buttons are grayed out (Figure 12-7) The button with the image changes its background

image and image to the choices made above The button with the title text has this functionality

built in Making the button appear disabled was done automatically for you without you

specifying images for the disabled state (continued)

Figure 12-6 The buttons’ background image changes

Figure 12-7 The buttons are grayed-out when disabled

Another way to create a custom button is by setting a button’s type to custom That

technique is not shown here It is not hard though First, add an image to a button

Second, change the button’s type to custom and only the image is visible Note that you

can use different images for different button states, exactly as you did in the previous

example application.

Button Types

There are buttons types other than Round Rect and custom that you might use Figure 12-8

illustrates creating a Detail Disclosure button To create a Detail Disclosure button, select a

Round Rect Button from the library in Interface Builder and then change its type to Detail

Disclosure button

Figure 12-8 Detail Disclosure button

You create the Info light and Info dark buttons, like the Detail Disclosure button, by selecting a Round Rect Button and changing its type to Info light or Info dark (Figure 12-9) You create a Contact button the same way you created the other button styles, by selecting a Round Rect Button and changing its type (Figure 12-9).

UIToolBar

Toolbars are for adding buttons of type UIBarButtonItem in a bar, usually along a view’s bottom With a little ingenuity, you can place just about anything on a toolbar, although some items you are not really adding to a toolbar, but rather you are placing over the toolbar (Figure 12-10) You can add the following controls to a toolbar: Bar Button Item, Fixed Space Bar Button Item, Flexible Space, Bar Button Item, Text Field, Switch, Slider, and Button Placing other items above a toolbar require using a fixed or flexible spacer (Figure 12-11) Place a spacer on the toolbar at the location on the toolbar you wish to overlay with a control, and then place the control over the spacer

Figure 12-9 Info Light button, Info Dark button, and Add Contact button

Figure 12-10 You can go crazy with a toolbar.

Figure 12-11 Using spacers to place controls, such as labels on a toolbar

Try This

NOTE

Apple may or may not approve your application if you get too crazy with a toolbar

When in doubt; refer to Apple’s user interface guidelines.

Creating a UIToolbar

1. Create a new View-based Application Name the application ToolBarProject

2. Open ToolBarProjectViewController.xib in Interface Builder

3. Drag a Toolbar from the library window to the view’s canvas Notice it placed one button

on the toolbar for you (Figure 12-12)

4. Drag a Fixed Space Bar Button Item from the library window to the view’s canvas Enlarge the spacer’s size Add another Bar Button Item to the spacer’s right (Figure 12-13)

5. Select the toolbar and open its Inspector window Change the toolbar’s style to Black Translucent (Figure 12-14)

6. Save and exit Interface Builder Click Build And Go The application displays the toolbar (Figure 12-15)

Figure 12-12 A toolbar on a view’s canvas

Figure 12-13 Adding a spacer to a toolbar

Figure 12-14 Two buttons separated by a spacer (continued)

A UISwitch, similar to a toggle button, is on or off Figure 12-19 illustrates a UISwitch’s appearance A UISwitch has a property and method for changing its state The Boolean property is

on, when YES The switch is off when NO The following is the declaration for the on property

@property(nonatomic, getter=isOn) BOOL on

Notice that the getter is entitled isOn, you can use this getter to obtain the on property’s value or the property itself For instance, the following two statements are equivalent

if( ((UISwitch *) sender).on == YES)

if( [((UISwitch *) sender) isOn] == YES)

You can change the switch’s value programmatically using the setOn method This method’s signature follows

-(void) setOn: (BOOL) on animated: (BOOL) animated

Figure 12-15 The sample application displaying a toolbar

Sliders are a horizontal bar with a small round indicator that a user can move to the right or left

to change the slider’s value Figure 12-16 contains a slider example

Appearance

The UISlider class has several properties and methods you might use to modify a slider’s

appearance You can modify the indicator using the setThumbImage method

- (void) setThumbImage:(UIImage *)image forState: (UIControlState) state

This method allows you to provide the slider an image in place of the round indicator

Interface Builder does not provide a means to set this value, so you must do so programmatically when first loading the view containing the slider

You can also specify a minimum and maximum image that appears directly to the slider’s

left and right Set a slider’s image appearing to the right using the maximumValueImage

property

@property(nonatomic, retain) UIImage *maximumValueImage

Set a slider’s image appearing to the left using the minimumValueImage property

@property(nonatomic, retain) UIImage *minimumValueImage

The next Try This example sets both properties using the Inspector pane in Interface

Builder There are more modifications you might make to a UISlider; refer to the UISlider

Class Reference for a complete listing

Values

By default, a UISlider’s values begin with minimum of 0, a maximum of 1.00, and a 50 initial value The slider’s values are floats and you can set the value programmatically using the

setValue method or the value property

- (void) setValue:(float) value animated:(BOOL) animated

The minimum, maximum, and initial values are all properties that you can set programmatically

or through Interface Builder

Continuous Property

A slider changes its values continuously as a user adjusts the indicator For instance, as a user

moves the indicator from left to right, the slider is continuously firing value-changed events

You can change this behavior by changing the continuous property to NO If the value is NO,

the slider only fires the event when a user lifts his or her finger from the indicator You can set

this property programmatically, or through Interface Builder

Try This Using a Switch and a Slider

1. Create a new View-based Application Name the application SwitchSlider

2. Drag the edit_add.png and edit_remove.png images from the resources folder to the Resources folder in Groups & Files

3. Open SwitchSliderViewController.xib in Interface Builder

4. Add a Slider and a Switch from the library 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 one Leave the values unchanged

6. Save and exit Interface Builder

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 mySwitch

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

8. Save and build.

9. Open SwitchSliderViewController.xib in Interface Builder

10. Ensure File’s Owner has a SwitchSliderViewController for its type (it should already)

11. Connect the mySwitch outlet to the switch on the canvas

12. Connect the handleSlider action to the slider’s Value Changed event

13. Connect the handleSwitch action to the switch’s Value Changed event

14. Save and exit Interface Builder

15. Click Build And Go (Figure 12-17) Click the switch and it logs to the Debugger Console 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

(continued)

@property(nonatomic, retain) UISwitch * mySwitch;

- (IBAction) handleSwitch: (id) sender;

- (IBAction) handleSlider: (id) sender;

@end

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

Listing 12-4 SwitchSliderViewController.m

#import "SwitchSliderViewController.h"

@implementation SwitchSliderViewController

@synthesize mySwitch;

- (IBAction) handleSwitch: (id) sender {

if( [((UISwitch *) sender) isOn] == YES){

- (IBAction) handleSlider: (id) sender {

NSLog(@"value: %f", ((UISlider *)sender).value);

if( [((UISlider *) sender) value] == ((UISlider *) sender)

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

Try This Using UITextField (with a Number Pad)

1. Create a new View-based Application named TextField

2. Open TextViewController.xib in Interface Builder Drag two UITextField controls from the library to the view’s canvas and resize the text fields

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

(continued)

3. Select the second text field and in its inspector, change its Keyboard to Number Pad

4. Select the first text field and change its Return Key to Done

5. Save and exit Interface Builder

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 method

7. Save and then open TextFieldViewController.xib in Interface Builder Connect the textFieldDone action to the first text field’s Did End on Exit event

8. Save and exit Interface Builder

9. Click Build And Go 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

10. Open TextFieldViewController.xib in Interface Builder and drag a button onto the view’s

canvas Resize the button to cover the entire canvas

11. In the Document window, expand the View and ensure the newly added button is behind

the two text fields (Figure 12-22)

12. In the Inspector’s Button Attributes pane, change the button’s Type to custom and uncheck

any checked drawing checkboxes (Figure 12-23)

13. Connect the numberField outlet to the second text field Connect the numberFieldDone

action to the Touch Up Inside event for the button added to the canvas (Figure 12-24)

14. Save and exit Interface Builder, then Click Build And Go 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-22 Button is under two textfields

(continued)

Figure 12-23 Changing button’s type to Custom

Figure 12-24 Connecting the numberFieldDone action to the button

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

Try This

UISegmentedControl

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 colorize.png and wizard.png from the resources folder to the Resources

folder in Groups & Files

3. Open SegmentViewController.xib in Interface Builder

4. Add a Segmented Control to the view’s canvas

5. Change the control so it has three segments 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

(continued)

6. Save and exit Interface Builder.

7. Open SegmentViewController and add an IBAction called handleSegment to

SegmentViewController (Listings 12-7 and 12-8)

8. Save and then open SegmentViewController.xib in Interface Builder

9. Connect the segment’s Value Changed event to the File’s Owner handleSegment method

10. Click Build And Go Figure 12-28 illustrates the application’s appearance and Listing 12-9 contains the debugger console’s logging