Friday 25 April 2014

Post WDI - iPhone Interface Control Design Techniques


iPhone Development (Xcode 5) (Cont'd)
  • iPhone Techniques to Customise Interface Controls (   DONE
    • viewDidLoad method in Implementation File
      • Automatically invokes after instantiation of view from XIB File so is convenient hook to make changes to the view as it is being displayed
    • UIImaged Class 
      • 'imageNamed' method contains filename string
      • 'stretchableImageWithLeftCapWidth:topCapHeight' instance method with image property defining its stretchability (if zero cannot stretch, any other value is column of pixels ignored before stretching occurs)
    • Hiding Keyboard
      • resignFirstResponder Approach
// declare action using stub method for method hideKeyboard-(IBAction) hideKeyboard:(id)sender { [x resignFirstResponder];}// connect IB fields from .xib file to hideKeyboard using Connections Inspector and 'Did End on Exit event'
    • Touch Background Approach
      • Create invisible button behind and attach hideKeyboard method 
    • Dynamic Content { Embedded Placeholders <___> inside objects }
      • stringByReplacingOccurrencesOfString:WithString instance method { searches template text for placeholders string (i.e. < xyz >) and replaces with user input stored in text view
-(IBAction) createMessage:(id)sender { theMessage.text=[theTemplate.text stringByReplacingOccurrencesOfString:@"<xyz>" withString:theNewMessage.text];}

  • iPhone Techniques to Customise User-Controlled Animations, Image Views, and Sliders (  DONE
    • UISlider 'value' property { Reversing the Scale (faster animation uses small numbers, slower animations use larger numbers), Continuous option (on: generates events as slide, off: generate event at end of user touch) }
    • UIImageView { display static image or Arrays of frame-based animations  }
      • isAnimating, startAnimating, stopAnimating methods
    • ViewDidLoad method of ViewController { additional setup option for view }
    • initWithFormat method { floating-point value (f) formatted to string with one digit to left of decimal point and two digits to right of it (i.e. 1.2f)

  • Advanced iPhone Interface Controls ( DONE
    • Objective-C Automatic Reference Counting (ARC) 
      • Disabled in App 'Build Settings' > All > CLANG_ENABLE_OBJC_ARC
    • Switch Toggle { UISwitch }
      • Methods { isOn }
    • Segment Controls { UISegmentedControl }
      • Methods { titleForSegmentAtIndex }
      • Properties { selectedSegmentIndex }
    • Web Views { UIView }
      • Supports HTML, CSS, Javascript, etc (i.e. for self-contained websites within app)
      • Remote Content Loading { NSURL, NSURLRequest, requestWithURL, alternatively [<web view> loadHTMLString:<html_content> baseURL:nil] }
      • initFileURLWithPath:isDirectory method {load files from resources }
      • goForward, goBack { navigation }
      • Properties { hidden } for Hiding and Showing 
    • Scrolling Views { UIScrollView }
    • Pickers 
      • Dfn: contains components (i.e. arrays columns) with rows of values. Use Protocols to return multiple values from multiple selections in single interface
      • UIPickerView (Custom Type) { Class created conforming to Protocols UIPickerViewDelegate and UIPickerViewDataSource is req'd (not just Attributes Inspector) }
      • UIDatePicker { returns NSDate object using 'date' method, instance method timeIntervalSinceDate for Data Structure calcs with NSTimeInterval class, NSDateFormatter object to format label display, setDateFormat (custom date format from string) stringFromData (returns string in format defined) }
    • Protocols
      • Dfn: Collection of methods to perform task selected depending on desired features, where classes conform in implementing the protocol
      • Types:
        • UIPickerViewDataSource (Protocol) { methods of qty data displayed and returns qty rows of values displayed in component respectively }  (i.e. numberOfComponentsInPickerView, pickerView:numberofRowsInComponent)
        • UIPickerViewDelegate (Protocol) { methods to pass filtered data text to component row display and returns user row of choice (objectAtIndex for NSArray) and last touched component (selectedRowInComponent method) respectively } (i.e. pickerView:titleForRow:forComponent, pickerView:didSelectRow:inComponent)
      • Conformance to Protocols 
        • Declare Protocols conforming to in view controller .h file (this automatically creates Outlets connection points for Picker to be Connect to manually)
        • Configure Picker manually by Connecting to 'Data Source' and 'Delegate' Protocol Outlets in IB
@interface PickerViewController : UIViewController <UIPickerViewDataSource, UIPickerViewDelegate>
      • Constants { apply before #import }
#define componentName 0
      • Picker Custom Images 
        • UIImageView instance populated with array of images from resources
        • pickerView:titleForRow:forComponent:reusingView {display images in picker}
[[UIImageView alloc] initWithImage:[UIImage imgName:<img name>]];
        •  Subclasses of UIView for all other picker contents to display image views in picker
      • Picker Customer Dimensions { CGFloat, pickerView:rowHeightForComponent, pickerView:widthForComponent }
      • Memory { autorelease method when need to return variables for use }

Links:




No comments:

Post a Comment