chapter 4 ios development

Views  

Views  are  responsible  for  drawing  content,  handling  mul7touch  events,  and  managing  the  layout  of  any  subviews.  

Views  

Right  click  in  the  project.  

Views  Under  Cocoa  Touch,  select  Objec7ve-­‐C  class  

Views  

Type  the  filename  of  the  view.  

Views  

Choose  the  loca7on  and  click  Create.  

Views  

Three  files  will  be  created.  A  header  file,  method  file,  and  an  xib  file  for  the  user  interface.  

Views  

Go  to  the  xib  file.  Drag  a  label  object  and  rename  it  “This  is  the  first  screen.”  

Views  

Referencing  a  View  means  choosing  which  among  the  views  you  would  like  to  load  first  when  you  run  the  mobile  app.  

Views  

Go  to  ViewController  header  file  

Views  

Import  the  name  of  the  new  view  

Views  

Declare  a  pointer  object  for  that  view.  

Views  

Set  the  property  of  that  view.  

Views  

Go  to  the  ViewController’s  method  file.  

Views  

Synthesize  the  view  object.  

Views  

Instan7ate  the  view  object  by  typing  the  code  below.  

Views  

Call  the  view.  

Views  

Sending  a  message  from  the  default  view  going  to  another  view  is  also  important.  

Views  

In  this  example,  we  will  be  crea7ng  a  new  Project.  

Views  

Select  Empty  Applica7on  and  click  Next.  

Views  

Type  in  the  Project  Name  

Views  

Select  Desktop  loca7on  and  click  Create.  

Views  

Since  this  is  an  empty  template,  the  content  of  your  Project  will  just  be..  

Views  

Create  a  new  file.  

Views  

Select  Objec7ve-­‐C  class  from  Cocoa    Touch  

Views  

Name  the  file  “FirstWindow”  

Views  

Select  the  default  loca7on.  

Views  

Three  files  will  be  added  to  the  Project  Navigator    

Views  

Go  to  AppDelegate.h  File  and  import  the  name  of  your  FirstWindow.  

Views  

Declare  the  First  View  and  set  its  property.  

Views  

Go  to  AppDelegate.m  file  and  look  for  the  didFinishLaunching…  method.  

Views  

Comment  this  part      And  replace  it  with  

Views  

Drag  a  texUield  and  a  buVon  object.  Label  the  buVon  “Send”.  

Views  

Go  to  the  header  file  and  declare  the  texUield  and  the  buVon  objects.  

Views  

Set  their  proper7es  as  well.  

Views  

Declare  a  method  with  a  return  value  from  an  event  that  will  be  triggered.  The  parameter  should  be  the  id  of  the  buVon  object.  

Views  

Press  on  ctrl  key,  click  Files  Owner  and  drag  the  arrow  to  the  texUield  object.  Point  the  id  to  the  texUield  id.  

Views  

Do  the  same  for  the  buVon.  

Views  

Click  on  the  buVon  and  click  on  Connec7ons  Inspector.    Select  Touch  Up  Inside.  Click  on  it  and  drag  it  to  the  Files  Owner.  Select  the  method  event.  

Views  

Views  

Create  another  ViewController  named  “Second  Window”.  Add  a  Label  component  on  it  and  ini7alize  it.  Set  its  property  as  well.  

Views  

Views  

Views  

Go  to  FirstWindow.m  file  and  import  SecondWindow.  

Views  

Go  to  the  method  file  of  the  FirstWindow  and  instan7ate  the  SecondWindow.  

Views  

This  code  will  slide  the  first  window  and  show  the  second  window  

Views  

Send  the  String  value  from  the  texUield  going  to  the  Label  object  in  the  SecondWindow  

Views  

Run  the  app.  

The  Background  

SeWng  the  color.  Go  to  the  method  file  of  the  View.  Look  for  the  viewDidLoad  method.  Type  the  syntax.  

The  Background  

The  Background  

Image  PaVern  in  a  Color  object.  Add  a  .png  file  resource  or  just  drag  it  to  your  Suppor7ng  Files  directory.  

The  Background  

The  Background  

Type  the  syntax  inside  the  viewDidLoad  method.  

TableView  

Displays  a  single-­‐column  list  of  mul7ple  rows  through  which  users  can  scroll.  Each  row  in  a  table  view  is  a  UITableViewCell  object.    

TableView  

The  plain  style  table  view  displays  rows  that  occupy  the  full  width  of  the  view  and  can  display  op7onal  headers  and  footers  for  arbitrary  sec7ons  of  rows  and  for  the  table  as  a  whole.    

TableView  

The  grouped  style  table  view  displays  dis7nct  groups  of  rows  inset  from  the  edges  of  the  view  and  can  display  op7onal  headers  and  footers  between  groups.    

TableView  

Drag  a  TableView  object  in  the  work  area.  

TableView  

Go  to  the  header  file  and  inherit  Delegate  objects  as  parameters  for  the  interface  method.  

TableView  

Declare  the  TableView  object  and  set  its  property.  

TableView  

In  the  method  file  of  the  view,  synthesize  the  TableView  

TableView  

In  crea7ng  a  TableView,  it  is  important  to  know  how  many  sec7ons  will  be  created  in  the  table,  how  many  rows  per  sec7on  and  what  are  the  7tles  of  every  sec7on  and  row.  

TableView  

Title  of  Every  sec7on        tableView        7tlefor…..  

TableView  

Number  of  Rows  per  Sec7on  

TableView  

Number  of  sec7ons  in  the  table  

TableView  

Here’s  how  to  show  some  texts  in  every  row  in  the  table.  

TableView  

In  the  xib  file,  control+click+drag  File’s  Owner  to  the  TableView  and  select  the  tableview  object.  

TableView  

In  the  Connec7ons  Inspector,  look  for  Outlets  and  drag  delegate  and  datasource  to  File’s  Owner.    

TableView  

Run  the  app  and  see  the  result.  

TableView  

In  iOS  7.0,  to  reload  the  Data  in  the  TableView,  an  addi7onal  code  is  required.  

TableView  

Do  this  a]er  reloading  Data  

ImageView  

This  object  displays  an  image  in  your  workarea.  

ImageView  

Drag  an  ImageView  in  the  work  area.  

ImageView  

Go  to    the  header  file  and  declare  an  ImageView  pointer  

ImageView  

Set  the  property  of  the  imageview  

ImageView  

Go  to    the  xib  file  and  tag  the  imageview  object.  

ImageView  

We  will  be  using  this  picture  

ImageView  

All  the  pictures  you  want  to  use  should  be  added  as  resources  in  the  Suppor7ng  Files  directory.      

ImageView  

You  can  just  drag  and  drop  a  picture  directly  to  this  directory.  

ImageView  

In  the  viewDidLoad  method,  call  the  picture  by  typing  in  this  code  

ImageView  

Run  the  app.