Professional Documents
Culture Documents
With this approach, we can easily make use of the Apple’s core
features through which we can add some animation inside the
table view like fade animation, etc in it.
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.
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.
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.
Here, give a name to your empty file as shown below and save it.
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.
Now, we need to select UITableViewCell subclass
and give a name to it as shown.
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.
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.
Through these labels, we are going to show all the values in our table view.
ADDING REQUIRED ARRAY FOR TABLEVIEW
Let’s 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.
We also require to add the Delegate and data source of the table view in it.
@interface ViewController :
UIViewController<UITableViewDelegate,UITableViewDataSource>
And finally, to call the objects of ExpandableTableViewCell class we need to import the file
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:(UITableView *)tableView{
}
(NSInteger)tableView:(UITableView *)tableView
numberOfRowsInSection:(NSInteger)section{
These are the required methods we are going to use in our application.
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:(UITableView *)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.
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.
To handle this, head into the didSelectRowAtIndexPath method of the table view and create an if
statement which can further run the particular code for row selection.
if (selectedIndex == indexPath.row) {
selectedIndex = -1;
return;
}
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.
SOME ADD-ON FEATURES
Now, let’s 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 -> new file -> cocoa touch class and create a new view controller
and name it as SecondVC as shown below.
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{
vcSecond.SelectedRowValue = buttonFruitName.tag;
vcSecond.isFruitName = 1;
Inside your didSelectRowAtIndexPath method add the following method for the button click:
https://www.loginworks.com