Understanding Self Sizing Cells and Dynamic Type in iOS 8

In iOS 8, Apple introduces a new feature for UITableView known as Self Sizing Cells. To me, this is seriously one of the most exciting features for the new SDK. Prior to iOS 8, if you want to display dynamic content in table view with variable height, you would need to calculate the row height manually. Now with iOS 8, Self Sizing Cell provides a solution for displaying dynamic content. In brief, here are what you need to do when using self sizing cells:

  • Define auto layout constraints for your prototype cell
  • Specify the estimatedRowHeight of your table view
  • Set the rowHeight of your table view to UITableViewAutomaticDimension

If we express the last two points in code, it looks like this:

1
2
tableView.estimatedRowHeight = 44.0
tableView.rowHeight = UITableViewAutomaticDimension

With just two lines of code, you instruct the table view to calculate the cell’s size matching its content and render it dynamically. This self sizing cell feature should save you tons of code and time. You’re gonna love it.

self-sizing-cell-featured
[Read more...]

iOS Programming 101: Implementing Pull-to-Refresh and Handling Empty Table

In this iOS Programming 101 post, I would like to answer two common questions raised by our readers.

  1. I follow your table view tutorial to create my first app. The tutorial is great. It shows us how to display data in the table view. But what if the table is empty? When there is no data, the app should display a friendly message instead of just display empty rows. How can I do that?
  2. I like the pull-to-refresh gesture. It’s a great way for content update. How can I implement such feature in my table-based app?

    Let us first take a look at the first question and see how to display a text message when the table is empty. The UITableView class includes the backgroundView property, which is the background view of the table view. This property is set to nil by default. To display a message or an image when the table is empty, usually we configure this property and set it to our own view.

    uirefreshcontrol featured
    [Read more...]

iOS Programming 101: How To Create Swipeable Table View Cell to Display More Options

When iOS 7 was first released, one of the many visual changes that particularly interested me was the swipe-to-delete gestures in the Mail app. By now you should be very familiar with the feature. After you swipe a table cell, you’ll see the Trash button, plus a new button named More. The More button will bring up an action sheet that shows a list of options such as Reply, Flag, etc.

I thought it’s a great feature to provide additional options for manipulating a table record. However, as you know, Apple didn’t make this feature available to developers in iOS 7. You can only create the swipe-to-delete option in table cell. The More feature is only limited to the stock Mail app. I have no idea why Apple keeps such great feature to its own app. Fortunately, some developers have created free solutions (such as UITableView-Swipe-for-Options, MCSwipeTableViewCell) and made them available freely.

In this tutorial, I’ll use SWTableViewCell and see how to implement swipe-to-show-options feature in your app. SWTableViewCell is pretty to easy to use. If you understand how to implement UITableView, you shouldn’t have any problem with SWTableViewCell. On top of that, it supports utility buttons on both swipe directions. You’ll understand what it means in a minute.

Swipeable UITableViewCell

Let’s get started and build our demo app.
[Read more...]

iOS Programming 101: Adding Section and Index List in UITableView

Recently, a reader asked me how to add an index list in a UITableView. As some of you may have the same question, I thought it’s better to write a post to share the solution. An indexed table view is more or less as the plain-styled table view that we’ve covered at the very beginning of our iOS programming course. The only difference is that it includes an index on the right side of the table view. Indexed table is very common in iOS apps. The most well-known example is the built-in Contacts app on iPhone. By offering an index scrolling, users are allowed to access a particular section of the table instantly without scrolling through each section.

If you’ve followed our UITableView tutorial, you should know how to implement an UITableView. Basically, to add sections and an index list in the UITableView, you need to deal with these methods as defined in UITableViewDataSource protocol:

  • numberOfSectionsInTableView: method – returns the total number of sections in the table view. Usually we set the number of section to 1. If you want to have multiple sections, set this value to a larger number.
  • titleForHeaderInSection: method – returns the header titles for different sections. This method is optional if you do not assign titles for the section.
  • numberOfRowsInSection: method – returns the total number of rows in a specific section
  • cellForRowAtIndexPath: method – this method shouldn’t be new to you if you know how to display data in UITableView. It returns the table data for a particular section.
  • sectionIndexTitlesForTableView: method – returns the indexed titles that appear in the index list on the right side of the table view. For example, you can return an array of strings containing “A” to “Z”.
  • sectionForSectionIndexTitle: method – returns the section index that the table view should jump to when user taps a particular index.

indexed-uitableview-featured

There’s no better way to explain the implementation than showing an example. As usual, we’ll build a simple app together and you should get a better idea of index list in a minute.
[Read more...]

How To Implement Search Bar in iOS 7 Using Storyboard

Editor’s note: Like some of the programming tutorials, you may find the search bar tutorial no longer works in Xcode 5 and iOS 7. We’ve rewritten the tutorial to make it compatible with the latest version of Xcode. On top of that, we enhance the tutorial with custom table cell.

Enter the search bar tutorial.

In most of the iOS apps using table view, it is common to have a search bar at the very top of the screen. How can you implement a search bar for data searching? In this tutorial, we will see how to add a search bar to the recipe app. With the search bar, we’ll enhance the recipe app to let users search through the recipe list by specifying a search term.

Well, it’s not difficult to add a search bar but it takes a little bit of extra work. As usual, we’ll walk you through the concept and implementation by building a sample app. As our focus is on the search bar implementation, you can download this project template to start with. The template is similar to the app we built in the tab bar tutorial.

iOS 7 Search Bar
[Read more...]

Working with UITableView in Xcode 5 Using Storyboard

When we first started the iOS programming course, we wrote a tutorial about UITableView and showed you how to create a simple table app using UITableView. This is one of our most popular tutorials. However, you may find it no longer works in Xcode 5. The latest version of Xcode promotes the use of Storyboard over Interface Builder. Storyboard is no longer an option when creating a new Xcode project. It’s the default. This is one of the reasons why you couldn’t follow the steps in the UITableView tutorial to create the app.

Anyway, we decide to completely update the table view tutorial for Xcode 5 and iOS 7. And here you are.

Enter the UITableView tutorial.

First, what’s a Table View in iPhone app? Table view is one of the common UI elements in iOS apps. Most apps, in some ways, make use of Table View to display list of data. The best example is the built-in Phone app. Your contacts are displayed in a table view. Another example is the Mail app. It uses Table View to display your mail boxes and emails. Not only designed for showing textual data, Table View allows you to present the data in the form of images. The YouTube and Airbnb apps are great examples for the usage.


Sample UITableView
[Read more...]

Adding a Cloud Backend for Your iOS App Using Parse – Part 1

When we first started the iOS programming course, we built a simple Recipe app together and walk you through the usage of table view. The initial version of Recipe app is very simple. All the recipe data are stored locally in an array. Later, we enhance the app by putting the recipes in a property list file. That’s better as it’s a good practice to separate static data from code.

However, both approaches face the same problem. Suppose you’ve published the Recipe app on App Store, what if you need to add more recipes or change some of the recipes?

Obviously, you’ll need to update the code (or the property file), re-build the app and submit to App Store again. And your users have to upgrade the app before viewing the updated recipes. That’s a lengthy process (normally it takes a week for Apple to review and approve your app).

A common solution is to put the recipe data into a backend database. Every time when the app launches, it retrieves the data from the backend via web service. As the data is saved and loaded remotely, you’re free to edit the recipe without rebuilding the app.

Parse Tutorial part 1

The downside is that you have to develop the backend. Apparently, this requires a different skill set and huge amount of work if you’re a beginner. Fortunately, several companies have pre-built the backend for you that your app can be easily integrated with the backend using API. This kind of service provider is usually known as Backend as a Service provider (or BaaS for short). Most of them offer the service for free to get you started. You only need to pay when the requests reach a certain volume.

In this series of tutorial, we’ll show you how to integrate the Recipe app with the Parse cloud. We’re not affiliate with Parse. We choose Parse as it is one of the leading BaaS providers and now a part of Facebook. Parse provides an easy-to-use SDK which is another reason we select Parse for the tutorial.

We’ll break the tutorials into two parts. The first part focuses on data retrieval from Parse backend. We’ll leave data update and deletion to the next article.

Okay, let’s get started.
[Read more...]

Create Static Table View Using Storyboard

After we published the iCloud programming tutorial, the first question from our readers is not about iCloud but related to the static table view. If you’ve followed our tutorials, you should have a basic understanding about table view. However, the table views that we’ve covered are of dynamic content. The “Add Note” controller that we built in the previous tutorial, on the other hand, makes use of the static table view. If you have problem with static table view, this tutorial is for you. We’ll show you how to create static table view using Storyboard.

To illustrate how easy you can use Storyboard to implement static table view, we’ll build a simple Setting screen. Static table views are ideal in situations where a pre-defined number of data items to be displayed. A setting screen is an obvious use of static table view.

Static Table View Demo App
[Read more...]

iOS Programming 101: Customize UITableView and UITableViewCell Background using Storyboard

In the last tutorial of our iOS Programming 101 series, we showed you how to customize the navigation bar and buttons with your own background image. This time, we’ll look into the customization and styling of UITableView and UITableViewCell.

If you’ve followed our iOS tutorials from the very beginning, you know we’ve written a tutorial about customizing table view cell using Interface Builder. In this tutorial, we’ll do something different. Instead of using Interface Builder to tweak the UITableViewCell, we’ll show you how to use Storyboards to style the cell. Storyboards make customizing table cells much easier with the introduction of prototype cell. In brief, you’ll learn the following stuffs in this tutorial:

  1. Customizing UITableViewCell using Storyboard
  2. Style UITableViewCell and UITableView with your own background images

[Read more...]

Core Data Part 2: Update, Delete Managed Objects and View Raw SQL Statement

This is the second article for our Core Data series. Previously, we gave you a brief introduction of Core Data and created a simple app to store all your device information. However, we only showed you how to insert records into data store through Core Data API and left out the update & delete operations.

In this tutorial, we’ll continue to work on the app and focus on the following areas of Core Data:

  • Updating or deleting an object using Core Data API
  • Viewing the raw SQL statement for debugging purpose

[Read more...]