Showing posts with label animation. Show all posts
Showing posts with label animation. Show all posts

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:




Wednesday, 23 April 2014

Post WDI - iPhone, Cocoa Touch & Interface Builder Fundamentals

Activities @ Reading Book (Sams Teach Yourself iPhone App Dev in 24 hrs (IMO 1-2 weeks full-time to learn properly) (by Ray & Johnson)

iPhone Development (Xcode 5) (
  • Test & Build DONE
    • Snapshots, Pragma marks, Project Properties {icon, status}, Build Outputs, iPhone Simulator, Simulate Conditions {finger pulls OPT} ) 


    • Interface File ( DONE
      • Protocols {< > collection of common grouped methods}
      • IBOutlet {object defined in interface builder},
      • Directives {i.e. @interface}, 
      • Defining Method Getters and Setters
        • Class Methods { +(<type_returned>)<method_name>:(..).. ..:(..)..; },
        • Instance Methods { -(..; }, Multiple Params
        • Directive { @property (.., <attributes>) <object> *<instance_var>; }, 
        • Synthesise { simplify interaction by defining properties of instance var objects and generating code for their getters/setters (accessors/mutators) }  


      • Implementation File DONE
        • Comments { // or /* }, 
        • Primitive Data Types {int, float, double},
        • Objects {data types, pointers, instance var, methods}, 
        • Declare Variable Object {declare instance var pointing to mem loc'n of object of specific class i.e. NSString *userName }, 
        • Allocate Memory for Object {alloc message to the class}, Initialize {init message to initialize mem contents allocated to object of specific class}, x = [[UILabel alloc] init]; {x is now a usable but not useful object}, 
        • Convenience Method {special config steps to setup object and basic properties for use (i.e. label name, screen location, etc)} --> x = [[UILabel alloc] initWithString:@"abc"]; { creates new string object of type NSString and sets its property pointer},  
        • Messaging Syntax {send object a msg by giving name of var/class referencing the object and method name, then params, gives boolean result} --> [<obj var/class> <method_name>:@"<param_val>" <param2>:<param2_val / manner_to_perform_method>]; }, 
        • Predefined Values {nil lack of value}, 
        • Nested Messaging {benefit of using results directly instead declare temp var to hold} --> i.e. z = [[x capitalizedString] stringByAppendString:[y capitalizedString]]; (where: object var 'y', instance method 'capitalizedString', method name 'stringByAppendString', param value result of 'y capitalizedString'), 
        • Expressions {use values returned from methods of objects and their properties to create expressions} --> i.e. [x compare:@"y"] (result is boolean), 
        • Expression Syntax { (), ==, !=, &&, ||, ! }, 
        • If-Then-Else, Switch Statement, Loops - Condition-Based Loops {For Loop with initialize counter, test condition, increment}, Condition-Based Loop {While, Do While}, Autoincrementing {and De-...},
        • Memory Management (differs fron OS X which has automatic garbage collection), Releasing Objects is Dev's Responsibility (except vars holding less mem intensive Primitive Data Types i.e. @"" syntax) { calling 'release' method i.e. [<var> release]; }, Auto Releasing Objects { i.e. [<var> autorelease]; --> inefficient release from object pool }, Retaining Objects { i.e. when object created as returned from a method (not directly created) i.e. [<var> retain]; }, Retain & Release Count { retain message increases count, release decreases, object remove from memory when count reaches zero }, Releasing Instance Methods { use 'dealloc' method and 'release' call on instance method (i.e. 'x') to parent class  i.e. -(void)dealloc { [x release]; [super dealloc]; } 


        • Cocoa Touch {  DONE
          • Dfn; collection of frameworks customised for touch/handheld interface to build iPhone platform apps and runtime to execute user interface based on Cocoa framework
          • iPhone OS Service Layers each containing diff frameworks { Cocoa Touch (UI (i.e. events, phone, data, camera, photo, accelerom) / Map / Game Kits (i.e. p2p networks, sessions, voicechat) + Msg / AddrBk UI's), Media (Audio (i.e. play, record, vibrations) / OpenGL / MediaPlyer / Core Grphx (i.e. 2d drawing) / Quartz Core (i.e. Core Animations)), Core Services (Foundation (i.e. manipulate strings, arrays, dict. + app threads prefs, internat.), Core Fndtn (i.e. procedural C -> non-OO), Core Loc'n (i.e. GPS lat/long + precision), Core Data (i.e. data modelling SQL), Store Kit (i.e. in-app App Store transactions), Sys Config (i.e. network config status)), Core OS (CFN Network (i.e. BSD sockets, HTTP, FTP, Bonjour, etc), Ext Accessory (i.e. docked/bluetooth), Security (i.e. encrypt, decrypt, iPhone keychain interact), System Framework (i.e. subset of Unix dev tools)) }
          • iPhone App Lifecycle Trace {launch setup with application delegate class creating View (Output) and View Controller (Input Events), input event loop handling from Cocoa Touch interface and manipulating views, termination}
          • Core App Classes
            • Autocreated
              • Root Class (NSObject) { most classes inherit }
              • Applic Object (UIApplication) { handle events, notifications, app config }
              • Window Objects (UIWindow) { superview containers of instance views }
              • Manual Created
                • Views (UIView) { subview nested rect area instance of UIWindow create with Interface Builder (IB) }
                • Responders (UIResponder) { touch events passed up "Chain of Responders" under reach "First Responder" able to actively handle }
                • Onscreen Controls (UIControl) { inherits from UIView as superclass of onscreen controls touch event handling and triggering. events tied to controls with IB }
                • View Controllers (UIViewController) { manage content of views. instances of view controller implement actions to react }
              • Data Type Classes
                • Strings (NSString, NSMutableString)
                • Arrays (NSArray, NSMutableArray) { collection data type, i.e. initWithObjects, objectAtIndex }
                • Dictionaries (NSDictionary, NSMutableDictionary) { collection data type with key/value(object), i.e. objectForKey (access) }
                • Numbers (NSNumber, NSDecimalNumber) { i.e. numberWithInt }
                • Dates (NSDate) { i.e. userDate, earlierDate }
                • URLs (NSURL) { 'host' method to parse and grab just the machine name from the string }
                • Interface Classes
                  • Labels (UILabel)
                  • Buttons (UIButton)
                  • Switches (UISwitch) { on/off states }
                  • Segmented Control (UISegmentedControl) { bar }
                  • Sliders (UISlider)
                  • Text Fields (UITextField/UITextView)
                    • Scrolling behaviour (not Rich text)
                  • Pickers (UIDatePicker/UIPicker)


                • Interface Builder (IB) { DONE
                  • Dfn: Standalone graphical app dependent on Xcode and iPhone Simulator
                  • Use: Visual Approach to Responsive User Interface (UI) Design. Live objects are built that link to app code through connections that may be triggered
                  • XIB (XML) File Output from IB holds interface & non-interface objects that we add visually to the project and are automatically instantiated and accessible when file loaded. XIB file contents:
                    • File's Owner { object that loads XIB. instantiates other XIB objects }
                    • First Responder { object that user currently in control and interacting }
                    • View { instance of UIView visual layout displayed on iPhone. views are hierarchical and contain 'clustered controls' for views within views }
                  • Document Icons 
                    • Note: XIB File generated by ticking checkbox "With XIB for user interface" when generating new Class file
                    • Linking GUI Icons with Code: Open the XIB File, drag an icon to the interface, press CTRL and drag icon on top of the File's Owner Icon
                  • IB Objects Library (CMD+SHIFT+L)
                    • Use: Palette of objects to drag and drop into views with help of Guides
                    • Custom Guides > Layout Add Horiz/Vert Guide
                  • Size Inspector
                    • Frame Values exact area object on-screen
                    • Layout Values allow space around object
                  • Attributes (Object Properties) Inspector
                    • Label text editing
                    • View inherited attributes from 'View superclass to on-screen elements
                    • Clear Button (X)
                    • Placeholders
                    • Keyboard Text Input Traits {Capitalize, Spelling Auto-Correction, Keyboard Type, Appearance (alert view), Return Key (Done, Search, Next, Go), Auto-Enable Return Key (user input req'd before show), Security }
                    • Scrolling Bounce and Color
                    • Data Detectors { automatically detects phone numbers, urls, etc..  and convert to helpful links }
                    • Styled Buttons { Shape, Detail Disclosure (addit info), Info Light/Dark Color, Add Contact (+), Custom (custom button images) }
                    • State Configuration Menu { changing state interacts with user touches on/off }
                  • Outlets
                    • Variables that IB objects references that access/change their contents
                  • Actions
                    • Methods called when events occur (object event trigger code actions)
                      • Connections Inspector { connect event to code action by drag a circle (event to support object) to File's Owner icon }
                  • Connections
                    • Joining IB elements to outlets or actions
                  • Default Connections { i.e. 'web view'  (goForward, goBack), drag button Touch Up Inside event direct to 'web view' instead of File's Owner }
                  • Identity (Object) Inspector
                    • Accessibility Attributes
                      • Voiceover {speech synthesis on touch onscreen elements}
                    • Accessibility Inspector (Simulator overlay)
                      • Enable within iPhone Simulator [Hardware Menu > Home], click Nav circle (left-side), [Settings > General > Accessibility > Accessibility] Inspector
                    • Building Custom Instances of Classes { instances created when drag objects to interface. manually set identity of objects in IB }