How to Implement a Load More Button on iPhone iOS with Three20 – Part 1

Monday, December 20, 2010

A common pattern in iPhone applications that load data remotely in a table is to utilize a button at the bottom of the table with a “Load More” label.  Typically, when you click on the Load More button, a request is made to the server to download additional items.  This form of lazy loading enhances the user experience and improves application performance.

I knew Three20 handled this scenario but I couldn’t find a good example that walked through each component that was required to implement it.  It was a challenge to get all the bits to work together so here is my breakdown in case others are facing a similar challenge. I’m going to divide the post into two parts. In part 1 we’ll just hook up the classes with each other then in part 2 we’ll implement the actual request / response logic.

If you’re not familiar with the Three20 library, I highly recommend you take a look at it for your iPhone / iPad projects. For this example, I’ll assume you have integrated Three20 into your project already and are somewhat familiar with the library.

To demonstrate the load more feature we’ll be doing a simple integration to display my public Twitter timeline with paging. Since my timeline doesn’t require authentication, we won’t have to get bogged down with implementing the OAuth protocol. Now, let’s look at the players:


To start, let’s add a subclass of the TTTableViewController. This will just provide us with a base controller with a table view to utilize for demonstration purposes. In addition, we’re going to stub in a class which will serve as the datasource for this controller.


Subclass of TTTableViewController

That’s pretty much all you have to do within the tableviewcontroller thanks to Three20 encapsulating a lot of the delegate logic into the datasource object. Now, let’s create the datasource for the table.


If you’ve worked with Three20 and table implementations, you’re probably familiar with this class. Again, we’ll subclass it to create a new datasource object which will be consumed by our table view controller.  We’ll also add some code which will work with the TTURLRequestModel.

Subclass of TTListDataSource

A few things are going on in this class. First, we allocate the TTURLRequestModel which we’ll add in just a minute. We also implement the model method which we’ll set to the TTURLRequestModel above. This is very important if you want to keep your sanity trying to debug later on. Below is the header file for the class.


@interface MBTwitterDataSource : TTListDataSource {
	  MBTwitterRequestModel* _twitterFeedModel;


The last class we’re going to create will be a subclass of the TTURLRequestModel. This class will encapsulate all the network operations to interact with the Twitter API.


@interface MBTwitterRequestModel : TTURLRequestModel {

These are all the classes involved in getting this to work. In the next part, we’ll look at writing the code to interact with the Twitter API and how to actually add the “Load More” button to the table cells.


  1. Mauro says:

    Hi, thanks for sharing your knowledge!
    When is it going to be published the second part?

  2. Michael Bosch says:

    I’m hoping to have it shortly after the holidays. Stay tuned!

  3. NukemHill says:

    Did you ever write the second part to this?

    1. Michael Bosch says:

      Not yet. Still on the pending items list though!

Leave a Reply