Widget Tour. iphone and ipod touch Development Fall 2009 Lecture 7

Transcription

1 Widget Tour iphone and ipod touch Development Fall 2009 Lecture 7

2 Questions?

3 Announcements Assignment #2 due Tonight by 11:59pm

4 Today s Topics Controls Buttons Switches Sliders Segmented Controls Text Fields Views Pickers Progress Bars Activity Indicators Images Views

5 Notes I m showing the relevant portions of the view controller interfaces and implementations in these notes Remember to release relevant memory in the -dealloc methods they are not shown here You will also need to wire up outlets and actions in IB Where delegates are used, they too require wiring in IB

6 Buttons

7 UIButton We ve already seen the basic UIButton known as the Rounded Rectangle type However, there are several other built-in button types Additionally, the iphone SDK allows us to roll our own button types

8 Button Attributes Types Here we see the various built in types Info light/dark are the small little i buttons commonly used to bring up the app s preferences The Detail Disclosure and Add Contact are circular buttons commonly used with contacts

9 Button Attributes States Buttons have several states.. Default normal unpressed Highlighted when pressed Disabled if button is turned off Selected if the button s selected property is set Typically selected is not used (at least on buttons) use a switch instead

10 Common Methods/Properties Method for getting the title for a given state - (NSString *)titleforstate:(uicontrolstate)state; Method for setting the title for a given state - (void)settitle:(nsstring *)title forstate:(uicontrolstate)state;

11 Other Methods/Properties There are also groups of methods/properties for... Creating buttons (in code) Configuring the button (images, title, insets) Getting the current state Getting the dimensions of a button Get all sorts of configuration information Get the type of button (Rounded Rectangle, Info, etc.)

12 ButtonsViewController.h #import ButtonsViewController : UIViewController {! UIButton *roundedrectangle;! UIButton *detaildisclosure;! UIButton *addcontact;! UIButton *infodark;! UIButton *infolight;! UILabel *info; IBOutlet UIButton IBOutlet UIButton IBOutlet UIButton IBOutlet UIButton IBOutlet UIButton IBOutlet UILabel *info; -

13 ButtonsViewController.m #import roundedrectangle,detaildisclosure,addcontact,infodark,infolight,info; - (IBAction)buttonPress:(id)sender { if(sender == self.roundedrectangle) { self.info.text Rectangle"; } else if(sender == self.detaildisclosure) { self.info.text Disclosure"; } else if(sender == self.addcontact) { self.info.text Contact"; } else if(sender == self.infodark) { self.info.text Dark"; } else if(sender == self.infolight) { self.info.text Light"; } else if(sender == self.custom) { self.info.text Button"; } } /*... Xcode provided methods...

14 Custom Colors Colors can be easily customized for the various states by simply using the choosers on the attributes tab

15 Custom Colors Our resulting (eyebleeding) custom colors The left is the default state The right is the highlighted state

16 Images as Buttons We can also provide our own image to be used as a button You can even specify different images for different states

17 Images as Buttons Simply drag and drop the images (as PNGs) into your Xcode project A common place people drop the images is into the Resources folder You ll usually want to create a copy Folder structure in Xcode is not the same as on disk

18 Images as Buttons To use an image as a button, select the Custom type

19 Images as Buttons Once the image is added, simply select the image you want to use for each state

20 Images as Buttons The last step in this process is to tell Interface Builder the size of the images so they don t get cropped

21 The resulting button... Images as Buttons

22 Custom Buttons Many apps customize buttons to match the overall color scheme or appearance of the app Rather than having to create all these different buttons, we can provide an image to be used as a template for creating button backgrounds

23 Using Stretchable Button Images The UIImage class has the following method... - (UIImage *)stretchableimagewithleftcapwidth:(nsinteger)leftcapwidth topcapheight:(nsinteger)topcapheight; This method returns an image (based on the current image) which will stretch to fill the button s space in a very specific way The left and top cap values define where the image gets cut and how it gets repeated

24 Using Stretchable Button Images Given the following image: And code... UIImage *buttonnormal = [UIImage imagenamed:@"bluebutton.png"]; UIImage *stretchnormal = [buttonnormal stretchableimagewithleftcapwidth:12 topcapheight:0]; Let s see what happens...

25 Using Stretchable Button Images The left cap of 12px appears as the left side of the button (Note: the image actually contains an alpha channel, shown here on a white background for visibility) Left side 12px cap

26 Using Stretchable Button Images The right side (less the cap) will appear on the right side of the button Right side width - 12px

27 Using Stretchable Button Images The column immediately following the cap will be repeated to fill the gap Similar rules apply to top caps Stretched Column

28 Code to Apply Stretchable Button Images // Implement viewdidload to do additional setup after // loading the view, typically from a nib. - (void)viewdidload {! [super viewdidload];! UIImage *buttonnormal = [UIImage imagenamed:@"graybutton.png"]; UIImage *stretchnormal = [buttonnormal stretchableimagewithleftcapwidth:12 topcapheight:0]; [custom setbackgroundimage:stretchnormal forstate:uicontrolstatenormal];! } UIImage *buttonpressed = [UIImage imagenamed:@"bluebutton.png"]; UIImage *stretchpressed = [buttonpressed stretchableimagewithleftcapwidth:12 topcapheight:0]; [custom setbackgroundimage:stretchpressed forstate:uicontrolstatehighlighted];

29 The resulting buttons... Stretchable Button Images

30 Switches

31 UISwitch You use the UISwitch class to create and manage the On/Off buttons you see in numerous apps This is the equivalent of a checkbox for iphone development

32 UISwitch Attributes UISwitches don t have nearly as many options as buttons You can however set the default state for the switch on or off

33 Common Methods/Properties Allows you to read or set (without any animation) the position of the getter=ison) BOOL on; Sets the switch to the specified position and optionally animates the toggling of the switch - (void)seton:(bool)on animated:(bool)animated;

34 Other Methods/Properties Not much else of interest for UISwitch...

35 SwitchesViewController.h #import SwitchesViewController : UIViewController { UISwitch *switch1; UISwitch *switch2; UILabel *info; IBOutlet UISwitch IBOutlet UISwitch IBOutlet UILabel *info; -

36 SwitchesViewController.m #import switch1, switch2, info; - (IBAction)toggle:(id)sender { if(sender == self.switch1) { self.info.text Switch 1";! [self.switch2 seton:!self.switch2.ison animated:yes]; } else { self.info.text Switch 2"; [self.switch1 seton:!self.switch1.ison animated:yes]; } }! /*... Xcode provided methods...

37 Sliders

38 UISlider A UISlider object is a control used to select a single value from a continuous range of values Unlike other toolkits, sliders on the iphone are always displayed horizontally

39 UISlider Attributes UISliders provide several points of customization You can specify the range of the slider and initial value of the thumb You can also provide images for either end of the slider Like the brightness part of the settings app

40 Common Methods/Properties Property to get or set (without animation) the current value of the float value; Sets the slider to the specified value and optionally animates the moving the thumb to the new value - (void)setvalue:(float)value animated:(bool)animated;

41 Other Methods/Properties There are also groups of methods/properties for... Accessing the limit values of a slider Modifying continuous behavior Modifying appearance via images Methods to facilitate subclassing

42 SlideViewController.h #import SliderViewController : UIViewController { UISlider *red; UISlider *green; UISlider *blue; retain) IBOutlet UISlider retain) IBOutlet UISlider retain) IBOutlet UISlider *blue; -

43 SlideViewController.m #import red, green, blue; - (IBAction)updateColor { self.view.backgroundcolor = [UIColor colorwithred:red.value green:green.value blue:blue.value alpha:1.0]; } /*... Xcode provided methods...

44 Segmented Controls

45 UISegmentedConrol A UISegmentedControl is a horizontal control consisting of multiple segments Only one segment may be selected at a given point in time Much like radio buttons in other toolkits

46 UISegmentedControl Attributes The number of segments can be specified For each segment, you can specify the title (or image) and choose if that segment is the selected index

47 Common Methods/Properties Returns the segment currently selected (zero based) or -1 if no segment is NSInteger selectedsegmentindex; Returns the title for the given segment index - (NSString *)titleforsegmentatindex:(nsuinteger)segment;

48 Other Methods/Properties There are also groups of methods/properties for... Initializing (in code) Managing content (image, text, etc.) Adding/Removing segments Modifying behavior and appearance

49 SegmentedConrolsViewController.h #import SegmentedControlsViewController : UIViewController { UISegmentedControl *foobar; UISegmentedControl *yesmaybeno; UISegmentedControl *beerwinecoffee; UILabel *info; retain) IBOutlet UISegmentedControl retain) IBOutlet UISegmentedControl retain) IBOutlet UISegmentedControl retain) IBOutlet UILabel *info; -

50 SegmentedConrolsViewController.m #import foobar, yesmaybeno, beerwinecoffee, info; - (IBAction)changeSelection:(id)sender { if(sender == foobar sender == yesmaybeno) { self.info.text = [sender titleforsegmentatindex: [sender selectedsegmentindex]]; } else { NSArray *opts = nil]; self.info.text = [opts objectatindex: [sender selectedsegmentindex]]; } } /*... Xcode provided methods...

51 Text Fields

52 UITextField We ve already seen the basics of text fields, but there are a lot of additional styles and options...

53 UITextField Attributes Placeholder is text that appears in the box when empty (in lieu of a label) Border determines outline Clear button allows you to specify if and when the x appears Clear When Editing Begins determines if the contents should be erased when the text field is selected We ve already see some of the keyboard configurations Secure masks the text being entered

54 Common Methods/Properties We ve already seen the text copy) NSString *text; And the delegate assign) id<uitextfielddelegate> delegate;

55 Other Methods/Properties There are also groups of methods/properties for... Accessing the text attributes (font, color, etc.) Adjusting the size (minimum font size, etc.) Managing editing behavior Setting background Clear behaviors Drawing information

56 TextFieldsViewController.h #import TextFieldsViewController : UIViewController <UITextFieldDelegate> { UITextField *field1, *field2, *field3, *field4, *field5, *field6; UILabel *info; retain) IBOutlet UITextField retain) IBOutlet UITextField retain) IBOutlet UITextField retain) IBOutlet UITextField retain) IBOutlet UITextField retain) IBOutlet UITextField retain) IBOutlet UILabel *info; - (BOOL)textFieldShouldReturn:(UITextField

57 TextFieldsViewController.m #import field1, field2, field3, field4, field5, field6; - (BOOL)textFieldShouldReturn:(UITextField *)textfield { [textfield resignfirstresponder]; self.info.text = [NSString stringwithformat:@"you entered: '%@'", textfield.text]; return YES; } /*... Xcode provided methods

58 Pickers

59 Pickers Provides a spinning wheel or slot machine metaphor to select from a list of multiple values Potentially multiple segments per wheel Use in lieu of a select or drop down menu

60 Pickers Picker views come in one of 2 flavors... UIDatePicker UIPickerView

61 Date & Time Pickers

62 UIDatePicker Attributes There are many different options for the date picker class First and foremost is the type of date picker you want there are 4 You can also set attributes for the start and stop values

63 UIDatePicker Types Date & Time Time Date Timer

64 Common Methods/Properties Property to get or set (without animation) the date represented by the date retain) NSDate *date; An animated setter method... - (void)setdate:(nsdate *)date animated:(bool)animated;

65 Other Methods/Properties There are also groups of methods/properties for... Getting localization related items (locale, time zone, etc) Configuring the mode (the 4 types) of date pickers Setting min/max/interval values

66 Pickers1ViewController.h #import Pickers1ViewController : UIViewController { UIDatePicker *picker; UILabel *info;! retain) IBOutlet UIDatePicker retain) IBOutlet UILabel *info; -

67 Pickers1ViewController.m #import picker, info; - (IBAction)getDateTime { self.info.text = [self.picker.date description]; } /*... Xcode provided methods

68 The resulting UI... UIDatePicker Example

69 Custom Pickers

70 UIPickerView The UIPickerView is a bit more complex The UIPickerView object requires the adoption of 2 protocols... UIPickerViewDelegate responsible for specifying what the cells look like UIPickerViewDataSource provides data about the number of components (wheels) and the number of rows (how many items per wheel)

71 UIPickerView Attributes The only interesting option here is the ability to hide or show the bar that s used to designate the current row

72 UIPickerView Methods/Properties There are groups of methods/properties for... Getting the size of the picker Reloading the view Selecting given items in the picker Setting the 2 delegates

73 UIPickerViewDelegate One of the following methods must be adopted in order for the UIPickerView to function... - (NSString *)pickerview:(uipickerview *)pickerview titleforrow:(nsinteger)row forcomponent:(nsinteger)component; - (UIView *)pickerview:(uipickerview *)pickerview viewforrow:(nsinteger)row forcomponent:(nsinteger)component reusingview:(uiview *)view; The first one simply requires the adopter to implement a title lookup method The second method actually returns a subview allowing for more customization

74 UIPickerViewDataSource The following 2 data source methods must be implemented in order for the picker to function properly - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerview; - (NSInteger)pickerView:(UIPickerView *)pickerview numberofrowsincomponent:(nsinteger)component; The first method tells the picker how many components (wheels) the view should have The second method tells the picker how many rows per a given component (the number of things on the wheel)

75 Reminder Be sure to wire up the delegates to the view controller (File s Owner) in Interface Builder If not, you re not going to be seeing much

76 Picker2ViewController.h #import Picker2ViewController : UIViewController <UIPickerViewDelegate, UIPickerViewDataSource> {! UIPickerView *picker;! NSArray *data;! UILabel *info;! retain) IBOutlet UIPickerView retain) NSArray retain) IBOutlet UILabel *info; -

77 Picker2ViewController.m #import picker, info, data; - (void)viewdidload { [super viewdidload]; self.data = @"Pineapples", nil]; } /*... */

78 Picker2ViewController.m /*... */ - (IBAction)getValue { self.info.text = [self.data objectatindex:[self.picker selectedrowincomponent:0]]; } - (NSString *)pickerview:(uipickerview *)pickerview titleforrow:(nsinteger)row forcomponent:(nsinteger)component { return [self.data objectatindex:row]; } - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerview { return 1; } - (NSInteger)pickerView:(UIPickerView *)pickerview numberofrowsincomponent:(nsinteger)component { return [self.data count]; } /*... Xcode provided methods...

79 The resulting UI... Custom UIPickerView Example

80 Progress Indicators

81 UIProgressView Typically this is used to show progress of some task, though some people simply use it as a means of displaying a value

82 UIProgressView Attributes For progress views you have the choice of 2 (similar) styles You can also set the default value (on a scale of zero to one) of the progress view

83 Common Methods/Properties The progress property can be used to get or set the value of the float progress;

84 Other Methods/Properties There are a few other methods for... Initializing a progress bar (in code) Getting/Setting the style of the bar

85 ProgressViewController.h #import ProgressViewController : UIViewController {! } UIProgressView *progress; UIButton *increase; UIButton retain) IBOutlet UIProgressView retain) IBOutlet UIButton retain) IBOutlet UIButton *decrease; -

86 ProgressViewController.m #import progress, increase, decrease; - (IBAction)update:(id)sender { if(sender == self.increase) { self.progress.progress +=.01; } else if(sender == self.decrease) { self.progress.progress -=.01; } } /*... Xcode provided methods...

87 Activity Indicators

88 UIActivityIndicatorView A UIActivityIndicatorView is used as a clue to cue users that some activity is taking place that is not necessarily visible Such as loading something from the web

89 UIActivityIndicatorView Attributes For activity indicators you have the choice of 3 different styles 1 large, 2 smaller throbbers You can also make the throbber disappear when not animated You can also set the throbber to hide when not animated

90 Common Methods/Properties Method to start the throbber... - (void)startanimating; Stop the throbber... - (void)stopanimating; Check to see if it is currently running... - (BOOL)isAnimating;

91 Other Methods/Properties There are groups of methods/properties for... Initializing a throbber (in code) Get/Set the hiding behavior Get/Set the style of the throbber

92 ActivityIndicatorViewController.h #import ActivityIndicatorViewController : UIViewController { UIActivityIndicatorView *throbber; UIButton *start; UIButton *stop; retain) IBOutlet UIActivityIndicatorView retain) IBOutlet UIButton retain) IBOutlet UIButton *stop; -

93 ActivityIndicatorViewController.m #import throbber, start, stop; - (IBAction)update:(id)sender { if(self.start == sender) { self.throbber.startanimating; } else if(self.stop == sender) { self.throbber.stopanimating; } } /*... Xcode provided methods...

94 Images

95 UIImageView UIImageViews are used to show an image or a sequence of animated images on screen

96 UIImageView Attributes The only real option is the image Assuming you ve imported an image into your project, you should be able to select from the list You will also want to be sure to resize your view to be the same size as your images if you do not want it to get cropped

97 Common Methods/Properties If you want to do animation, you can put together an array of UIImages to cycle through with the following copy) NSArray *animationimages; Use these methods to start/stop animation... - (void)startanimating; - (void)stopanimating; You can also check the animation status using... - (BOOL)isAnimating; Or, you can set the image in code using the image retain) UIImage *image;

98 Other Methods/Properties There are groups of methods/properties for... Initializing an image view (in code) Setting the images (including highlighted state) Various animation methods Getter/Setter attribute methods

99 Images Images used in my example... link.png megaman0.png megaman1.png megaman2.png megaman3.png

100 ImagesViewController.h #import ImagesViewController : UIViewController { UIImageView *megaman; UISwitch *animate; retain) IBOutlet UIImageView retain) IBOutlet UISwitch *animate; -

101 ImagesViewController.m #import megaman, animate; - (IBAction)change { if(self.animate.ison) { self.megaman.startanimating; } else { self.megaman.stopanimating; } } - (void)viewdidload { [super viewdidload]; UIImage *mega1 = [UIImage imagenamed:@"megaman1.png"]; UIImage *mega2 = [UIImage imagenamed:@"megaman2.png"]; UIImage *mega3 = [UIImage imagenamed:@"megaman3.png"]; self.megaman.animationduration =.5; self.megaman.animationimages = [NSArray arraywithobjects:mega1, mega2, mega3, nil]; } /*... Xcode provided methods...

102 Views

103 UIView UIViews are simply containers that can contain other widgets (also views) Can be used to group elements

104 UIView Attributes You can set a lot of attributes on UIViews Scaling behavior Transparency Background color Etc.

105 Methods/Properties Views have a lot of methods/properties for manipulating them in code... Initializing the view Modifying the bounds, center, transforms, etc. Managing the view hierarchy Converting points between views Displaying views Animating views Handling events and changes

106 ViewsViewController.h #import ViewsViewController : UIViewController { UISlider *red; UISlider *green; UISlider *blue; UIView *color; UISwitch *visible; UIView *subview; retain) IBOutlet UISlider retain) IBOutlet UISlider retain) IBOutlet UISlider retain) IBOutlet UIView retain) IBOutlet UISwitch retain) IBOutlet UIView *subview; - (IBAction)updateColor; -

107 ViewsViewController.m #import red, green, blue, visible, subview; - (IBAction)updateColor { self.color.backgroundcolor = [UIColor colorwithred:red.value green:green.value blue:blue.value alpha:1.0]; } - (IBAction)toggleView { [self.subview sethidden:!self.visible.ison]; } /*... Xcode provided methods...

108 Additional Resources The UICatalog sample code provided by Apple contains most of the widgets shown here UICatalog/ The iphone Human Interface Guidelines (HIG) document also provides some guidance on widget selection UserExperience/Conceptual/MobileHIG/

109 For Next Class Read at Table View Programming Guide for iphone OS UserExperience/Conceptual/TableView_iPhone/