iOS:  Custom  Views  

Jussi  Pohjolainen  

About  Views  

•  UIBu;on,  UILabel,  all  these  controls  are  views  •  Views  is  an  –  Instance  of  UIView  or  one  of  its  subclasses  – Can  be  drawn  on  applica-ons’  window  – Exists  in  hierarchy  of  views,  root  is  app  window  – Can  handle  events  

 

AppDelegate  

Creates  the  window,  puts  it  to  screen.  You  can  add  other  views  to  window!  

CreaKng  Custom  View  

•  Subclass  UIView  •  Allocate  and  iniKalize  the  UIView  •  Pass  View  Frame  to  UIView  •  Add  the  view  as  subview  of  Window  

Subview  inside  of  Subview   MyCustomView* view = [[MyCustomView alloc] initWithFrame: viewFrame];

MyCustomView* view2 = [[MyCustomView alloc] initWithFrame: viewFrame2];

[view addSubview:view2];

drawRect  

•  Override  drawRect  –  method  in  custom  view  •  Default:  does  not  do  anything  

Redraw  and  Events  

•  To  redraw  a  view,  call  method  setNeedsDisplay  – [view setNeedsDisplay]

•  To  receive  events  – 1)  Say  that  your  custom  view  can  do  that  •  Return  YES  in  method  - (BOOL) canBecomeFirstResponder

– 2)  Say  to  the  view  that  you  are  the  one  to  receive  events  •  [view becomeFirstResponder];

MoKon  Event  to  Custom  View  

•  Override  moKonX  methods  in  custom  view  – moKonBegan  – moKonEnded  – moKonCancelled  

Custom  View  Shake  - (BOOL) canBecomeFirstResponder { return YES; } - (void) motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event { if(motion == UIEventSubtypeMotionShake) { // New color [self setCircleColor:[UIColor redColor]]; // Refresh! [self setNeedsDisplay]; } }

And  set  the  View  to  receive  events  // Create the view with given size

MyCustomView* view = [[MyCustomView alloc] initWithFrame: viewFrame];

// Set view to become the one who is receiving events!

[view becomeFirstResponder];

Scrolling  

•  Set  view  larger  than  screen  •  Draw  a  porKon  of  that  view  – Viewing  port  that  you  move  around    

•  UIScrollView  – contentSize  –  the  size  of  the  area  that  is  visible  

UIScrollView  Example  

UIScrollView  Example  

Panning  and  Paging  

Example  

Hide  Status  Bar  

•  To  hide  status  bar  either:  –  [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationFade];

•  Or  in  info  property  list  of  your  project