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

Chapter 12: Controls—Part One 273 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) 274 iPhone SDK Programming: A Beginner’s Guide 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 Chapter 12: Controls—Part One 275 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; @end Listing 12-2 ButtonsBackgroundViewController.m #import "ButtonsBackgroundViewController.h" @implementation ButtonsBackgroundViewController @synthesize clearButton; @synthesize smallButton; - (IBAction) disableBut: (id) sender { if(clearButton.enabled == YES) { clearButton.enabled = NO; smallButton.enabled = NO; [((UIButton *) sender) setTitle:@"Enable" forState: UIControlStateNormal]; } else { clearButton.enabled = YES; smallButton.enabled = YES; [((UIButton *) sender) setTitle:@"Disable" forState: UIControlStateNormal]; } } - (void)dealloc { [clearButton release]; [smallButton release]; [super dealloc]; } @end Notice the results upon tapping the buttons. The buttons change the background image from grey to bluish-gray (Figure 12-6). The bottom button also changes its title. Click Disable, and 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) 276 iPhone SDK Programming: A Beginner’s Guide Figure 12-6 The buttons’ background image changes Figure 12-7 The buttons are grayed-out when disabled Chapter 12: Controls—Part One 277 TIP 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 278 iPhone SDK Programming: A Beginner’s Guide 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 Chapter 12: Controls—Part One 279 Figure 12-10 You can go crazy with a toolbar. Figure 12-11 Using spacers to place controls, such as labels on a toolbar 280 iPhone SDK Programming: A Beginner’s Guide 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 Chapter 12: Controls—Part One 281 Figure 12-13 Adding a spacer to a toolbar Figure 12-14 Two buttons separated by a spacer (continued) 282 iPhone SDK Programming: A Beginner’s Guide UISwitch 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 [...]... NSDate from a UIDatePicker’s date property NSDate * theDate = self.datePicker.date; An NSDate is a date and time Several NSDate methods you might use include isEqualToDate:, earlierDate:, compare:, and laterDate: For a more complete understanding of date and time programming, refer to Apple’s “Date and Time Programming Guide for Cocoa,” available online 305 306 iPhone SDK Programming: A Beginner’s Guide. .. select to format dates and times For more formats, refer to Apple’s “Data Formatting Programming Guide for Cocoa,” available online 3 07 308 iPhone SDK Programming: A Beginner’s Guide Try This Using a Date Picker 1 Create a new View-based Application Name the application DatePickerProject 2 Open DatePickerProjectViewController.xib in Interface Builder 3 Add a date picker to the canvas and add a label (Figure... 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... Several UIDatePicker properties you might change in the Inspector Chapter 13: Controls—Part Two: Using Pickers and Using the Camera Figure 13-3 A UIDatePicker showing 30-minute intervals and a UIDatePicker showing 1-minute intervals NSDateFormatter When you wish to display a date, you use an NSDateFormatter An NSDateFormatter allows a date to be displayed as a formatted NSString There are many formats... second chapter on iPhone controls This chapter’s first half covers using the UIDatePicker and UIPickerView classes These classes create visual controls that appear similar to Las Vegas slot machines This chapter’s second half covers using the UIImagePickerController This class allows programmatically accessing an iPhone s camera, camera roll, and photo library Using Pickers—Date Pickers and Pickers You... method allows evaluating any JavaScript string You can access a page’s Document Object Model (DOM) through JavaScript, and so you can manipulate an HTML page’s content The HTML DOM is a W3C standard for manipulating HTML documents HTML DOM is outside this book’s scope, but for more information refer to the W3C School’s HTML DOM Tutorial, available online at www.w3schools.com If you wish programming. .. UIDatePicker A UIDatePicker has rotating wheels, allowing a user to select the date and time If using a date picker to pick a date and time, valid modes are Date & Time, Time, and Date If using a date picker to pick a countdown time, the valid mode is Timer Figure 13-1 illustrates the picker’s visual appearance for the different modes Chapter 13: Controls—Part Two: Using Pickers and Using the Camera Figure...Chapter 12: Controls—Part One UISlider 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... of several values There are two types of pickers: Date Pickers and Pickers Date pickers are used for selecting a date, time, or countdown interval Pickers are used for selecting one of many values Date Pickers Date pickers pick dates and times, placing the selected values in an NSDate class, and are implemented using the UIDatePicker class If using Interface Builder to develop an iPhone application,... Guide also wish moving forward or backward through the user’s browsing history; you do this using the goBack and goForward methods And of course, you can first check to see if the control can move backwards or forwards by checking the canGoBack or canGoForward properties If you own an iPhone, then I am certain you have noticed that you can tap telephone numbers in the Safari browser and it automatically . with a toolbar. Figure 12-11 Using spacers to place controls, such as labels on a toolbar 280 iPhone SDK Programming: A Beginner’s Guide Try This NOTE Apple may or may not approve your application. 12-12 A toolbar on a view’s canvas Chapter 12: Controls—Part One 281 Figure 12-13 Adding a spacer to a toolbar Figure 12-14 Two buttons separated by a spacer (continued) 282 iPhone SDK Programming: . 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