HOW TO MAKE AN EXPANDABLE AND COLLAPSIBLE TABLE VIEW IN IOS USING OBJECTIVE C?

1
Welcome to loginworks Softwares
2
HOW TO MAKE AN EXPANDABLE AND COLLAPSIBLE TABLE
VIEW IN IOS USING OBJECTIVE C?
3
Hello Guys, in our previous blog we have learned
a lot about creating table view and its uses. But
here in this tutorial, we will be going to make a
different kind of table view.

Yes, it will be an expandable and collapsible
table view, which will show the data when user
will select the particular cell object.

As we know that these days companies are using a
different type of applications that will look
different and contain some hidden features in
them which make them different from other simple
applications.

With this approach, we can easily make use of the
Apples core features through which we can add
some animation inside the table view like fade
animation, etc in it.
4
INITIAL SETUP
First of all, we need to create the environment
to make our own custom table view application. To
do this, head into the XCode application and then
click on create a new application.

Later, after doing this select single view
application from the list of different templates
as shown below.
5
Now, in the next step give a name to your
application to recognize it later. I am going to
use Expandable Table View for my application as
shown.


6
DESIGNING THE TABLE VIEW

• Now, we will be going to make use of the xib to
  create our custom table view, not with the usual
  storyboard method. So to create a custom xib
  file, head into the file section, from there
  enter the new file and then select empty from the
  user interface section and click next as shown.

7
Here, give a name to your empty file as shown
below and save it.
8
Now if you see on the left side of the file
section, there will appear a .xib format file.
Now this will be our custom table view cell
inside which we will be going to add all the
required fields later.

Assign a UITableViewCell class file to our custom
cell. To do this we need to create it from the
new file section select cocoa touch class as
shown.


9
Now, we need to select UITableViewCell subclass
and give a name to it as shown.


10
CREATING CONNECTION WITH OUTLETS AND OBJECTS

• Now we need to create the connection with the
  objects and to do this head into the
  Main.Storyboard section and connect the table
  view element with the view controller as shown
  below.

11
If you take a look at the above image then you
will find that I am using a custom name for the
table view so that I can identify the table view
name to connect it with the cell later as
required by us.

Now, similar to the previous method we are going
to add the remaining objects to the view
controller which is ExpandableTableViewCell. Head
into the ExpandableTableViewCell.h class and
connect the following objects.

_at_property (strong, nonatomic) IBOutlet UILabel
rowCount

_at_property (strong, nonatomic) IBOutlet UILabel
rowName

_at_property (strong, nonatomic) IBOutlet UILabel
fruitName

_at_property (strong, nonatomic) IBOutlet UILabel
fruitValue

Through these labels, we are going to show all
the values in our table view.
12
ADDING REQUIRED ARRAY FOR TABLEVIEW

Lets now add the required array so that we can
load them into our table view later. To do this
head into the ViewController.h file and add 3
arrays and an integer property to add the
selected index count inside it as shown below.

_at_property (strong, nonatomic) IBOutlet
UITableView customTableView

_at_property (strong,nonatomic) NSMutableArray
arrayTitle

_at_property (strong,nonatomic) NSMutableArray
arraySecond

_at_property (strong,nonatomic) NSMutableArray
arrayName

_at_property int selectedIndex

We also require to add the Delegate and data
source of the table view in it.

_at_interface ViewController UIViewControllerltUITab
leViewDelegate,UITableViewDataSourcegt

And finally, to call the objects of
ExpandableTableViewCell class we need to import
the file inside our view controller.h file.
13
ADDING REQUIRED METHODS FOR THE TABLE VIEW

• Here, we need to add the required methods for
  table view to call the data in our application.
  As we know that there are two major things
  required inside a table view which is the data
  source and delegates methods. Through these two
  things, we can give life to our table view and
  further use it to show the data to a user in the
  application.
• Add the following delegates and data source
  methods to your view controller file.
• (UITableViewCell )tableView(UITableView
  )tableView cellForRowAtIndexPath(NSIndexPath
  )indexPath
• -(NSInteger)numberOfSectionsInTableView(UITableVi
  ew )tableView

14
(NSInteger)tableView(UITableView )tableView
numberOfRowsInSection(NSInteger)section



-(CGFloat)tableView(UITableView )tableView
heightForRowAtIndexPath(NSIndexPath )indexPath



-(void)tableView(UITableView )tableView
didSelectRowAtIndexPath(NSIndexPath )indexPath



These are the required methods we are going to
use in our application.
15
CALLING THE DATA

Finally its the time where we will be going to
call the data inside our table view and remember
we are using the xib file so the code could be
different at this point.

First, Head to the numberOfSectionInRow method
and add the return value to 1 as we need only one
section for our table view. You can use as many
as you want.

-(NSInteger)numberOfSectionsInTableView(UITableVi
ew )tableView

return 1

Now, Add the numberOfRowsInSection required in
the method as for this we will use our array as
it will call the required rows according to the
array.
-(NSInteger)tableView(UITableView )tableView
numberOfRowsInSection(NSInteger)section

return arrayTitle.count


Now, we need to call the cellForRowAtIndexPath.
Through this method we will tell the table view
that which call to use in it.

First, call the custom table view and then add
the reusable cell identifier name to it. After
this, call your xib file which you have created
earlier using the NSBundle Class.
16
There, it now runs the application and you can
have a look at your app. It will look similar to
the image below.
17
Now, if you click on the cell object then nothing
will be going to happen as we havent added the
functionality to perform the action on row
selection yet.

To handle this, head into the didSelectRowAtIndexP
ath method of the table view and create an if
statement which can further run the particular
code for row selection.



-(void)tableView(UITableView )tableView
didSelectRowAtIndexPath(NSIndexPath )indexPath

if (selectedIndex indexPath.row)

selectedIndex -1

_customTableView reloadRowsAtIndexPaths
NSArray arrayWithObjectindexPath
withRowAnimationUITableViewRowAnimationFade

return


_customTableView reloadRowsAtIndexPathsNSAr
ray arrayWithObjectindexPath withRowAnimationUI
TableViewRowAnimationFade

18
Now, if the user selects a particular row object
then it will be going to expand the table view
and will show the data attached to it as shown
below in the snapshot.


19
SOME ADD-ON FEATURES

• Now, lets do one more thing which is redirecting
  the user to the second screen, only if the user
  selects a particular row element inside the
  expanded view.
• To do this, first we need to create a new view
  controller, and a UIViewController class file for
  the same view controller as well.
• Go to file -gt new file -gt cocoa touch class and
  create a new view controller and name it as
  SecondVC as shown below.

20
(No Transcript)
21

ADDING ACTION TO BUTTON

Now, we need to add some action for the button
and for this first create a method for button
selector as shown below.

-(void)buttonImageName

SecondVC vcSecond UIStoryboard
storyboardWithName_at_"Main" bundlenilinstantiateV
iewControllerWithIdentifier_at_"SecondVC"

vcSecond.SelectedRowValue
buttonFruitName.tag

vcSecond.isFruitName 1

self.navigationController pushViewController
vcSecond animatedYES

Remember to import your secondVC file before
doing this and then add the storyboard name to it
as shown in the code above.

Inside your didSelectRowAtIndexPath method add
the following method for the button click

22
(No Transcript)
23
SUMMING UP

Thats it we have completed this tutorial and I
hope you will find it useful for your application
too. As expanding table view is quite famous
these days and it makes your application look
pretty amazing. Thank You and keep Supporting!!






24
Thanku For Watching

Connect with This For More Inf

https//www.loginworks.com

Call us 1-434-608-0184