Comparing iOS TableView and Android RecyclerView

Comparing iOS TableView and Android RecyclerViewExploring the similarities and differences when creating lists on each platformElyeBlockedUnblockFollowFollowingMay 25When it comes down to it, many of the most popular Apps (e.

g.

Facebook, Instagram, Twitter, Air BnB, etc.

) are simply a list of items.

Hence to create such App, having knowledge of how to create and manage lists on both iOS and Android is crucial.

Many times, a developer is only familiar with one platform (either iOS or Android), without realizing the fundamentals of both are very similar.

In this piece, I’ll be sharing a fundamental comparison of the basic components in each platform, so one can better understand the other side of the world.

TableView and RecyclerViewIn iOS, TableView is the fundamental UIView that shows a list of items and its cell can be recycled for memory efficiency purpose.

It is only used for vertical lists (rows) only though.

For a more complex view (e.

g.

showing horizontal list), a CollectionView is needed.

However, for simplicity, we’ll just stick with TableView.

Below is a simple example of how I create TableView:In the code example below, you could see this code loaded in the viewDidLoad() function of the ViewControllerHere is an example of how a RecyclerView is created in the XML layout file:TableViewCell and ViewHolderIn iOS, to display a unit component as an item of a list we use UITableViewCell.

Below is a very basic UITableViewCell .

xib with only a single Label (similar to TextView in Android).

Then, we create a UITableViewCell class to link up the .

xib label with the code.

class TableCell: UITableViewCell { @IBOutlet var label: UILabel!}In Android, we’ll create the usual XML layout file as the basic item for our ViewHoldernote: the creation of layout is applicable for all views, and not only ViewHolderThen we create the ViewHolder that links to the content of the layout.

class ItemViewHolder(view: View): RecyclerView.

ViewHolder(view) { fun bindView(content: String) { itemView.

txt_item.

text = content }}TableViewDataSource and RecyclerView AdapterThe data of the list is handled through helper classes.

In iOS, this is called a delegate data source class called UITableViewDataSource.

Using the powerful Swift programming language class extension feature, one would just extend it to the containing class (e.

g.

ViewController):And then assign it to the dataSource of the TableView:Note: the below self is the ViewController.

tableView.

dataSource = selfIn Android, an adapter class (defined under RecyclerView class) is needed.

Instead of extending to the containing class (e.

g.

Activity) like iOS, usually, a new class is created for that purpose.

With this class implemented, one could then easily provide it to the adapter of the RecyclerView as below.

recycler_view.

adapter = RecyclerViewAdapter()The Operations of TableViewDataSource and RecyclerView AdapterWhen counting the number of functions, we see the differences.

However, they are very similar in nature if we look closer into it.

They Both Return the Row CountThis is obvious and is seen by looking at the function:// iOS func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 100 }// Android override fun getItemCount(): Int { return 100 }There’s a subtle difference though as in iOS there’s numberOfRowInSection where the TableView could be divided into Section.

However, for simplicity, I’m not touching this point here.

They Both Are Used to Create the Row Item and Populate Its ContentIn iOS, we use a single function to perform this, as seen below:In this function, one could create a new cell each time they want to draw.

However, that will not be very memory efficient.

In order to curb that, the function dequeueReusableCell is used to search for the cell.

This function will return a new cell if it is yet to be created.

If there’s already a cell of the same given ID, i.

e.

"CellID" is available and not being used, then it will return that cell.

That’s nice that it will create the cell.

But how does it know how to create the cell item?.

Well, that is not done in the UITableViewDataSource, but rather in the UITableView through the function register.

let nib = UINib(nibName: “TableCell”, bundle: Bundle.

main)tableView.

register(nib, forCellReuseIdentifier: “CellID”)In other words, all cells need to pre-register on how it could be created beforehand.

In Android, this is done through the three functions seen below:First is the getItemViewType function, when given a position of the data one could return the type of the ViewHolder.

If the type of the ViewHolder is not available, then onCreateViewHolder would be called to create the respective cell.

If it is already created and available, then onCreateViewHolder will not be called.

The ViewHolder will be reused.

That’s why this is called RecyclerView.

Lastly, the onBindViewHolder is just used to update the content of the view through the function of the given ViewHolder.

Simplified IllustrationFrom the above, we can see the matching approach on both platforms, though the implementation is different.

To make it more visible, here is a simplified illustration of it:I hope this provides some basic understanding of both worlds.

All code is available at:elye/demo_android_ios_recyclerview_tableviewDemo showing both Android RecyclerView and iOS TableView — elye/demo_android_ios_recyclerview_tableviewgithub.

comI hope this post is helpful to you.

Thanks for reading!.

. More details

Leave a Reply