iOS Programming 101: Record and Play Audio using AVFoundation Framework

Editor’s note: Some of you asked us to write a tutorial about audio recording. This week, we work with Yiqi Shi and Raymond from Purple Development to give you an introduction of AVFoundation framework. Yiqi and Raymond are independent iOS developers and have recently released Voice Memo Wifi that allows users to record voice memo and share it over WiFi.

iOS provides various framework to let you work with sound in your app. One of the frameworks that you can use to play and record audio file is the AV Foundation Framework. In this tutorial, I’ll walk you through the basics of the framework and show you how to manage audio playback, as well as, recording.

To provide you with a working example, I’ll build a simple audio app that allows users to record and play audio. Our primary focus is to demonstrate the AV Foundation framework so the user interface of the app is very simple.

The AV Foundation provides easy ways to deal with audio. In this tutorial, we mainly deal with these two classes:

  • AVAudioPlayer – think of it as an audio player for playing sound files. By using the player, you can play sounds of any duration and in any audio format available in iOS.
  • AVAudioRecorder – an audio recorder for recording audio

[Read more...]

How to Add Header and Footer View in UICollectionView

Previously, we covered the basics of UICollectionView and showed you how to present items in grid layout. It’ll be interesting to spilt recipes into different sections. Let’s say, the first section contains recipes for lunch/dinner, while the other section contains recipes for drinks and desserts.

As you’ve learnt, every collection view must have a data source object providing it with content to display. Its responsibility is to provide the collection views with the following:

  • The number of sections in the collection view
  • The number of items in each section
  • The cell view for a particular data item

Obviously, the simple Recipe app we developed in the previous tutorial contains one section only. In this tutorial, we’ll continue to explore collection view and show you how to group the items into different sections. You’ll also learn how to add header or footer view to the collection view.
[Read more...]

Create Grid Layout Using UICollectionView in iOS 6

Do you still remember the Recipe app that we have worked on several months ago? At that time, we showed you how to display a list of recipes using UITableView. Wouldn’t be great if it can display the recipe in a nice grid view?

The iOS 6 SDK introduces a new class called UICollectionView that allows developers to create grid-like layout out of the box.

If you have no idea about grid-like layout, just take a look at the built-in Photos app. The app presents your photos in grid format. In the pre-iOS 6 world, you have to write lots of code or make use of other libraries in order to build a similar layout. The UICollectionView, in my opinion, is the most spectacular API in iOS 6. Not only it simplifies the way to arrange visual elements in grid layout, it even lets developers customize the layout (e.g. circular, cover flow style layout) without changing the data.

Grid based Photo App

In this tutorial, we will build a simple app to display a collection of recipe photos in grid layout. Here are what you’re going to learn:

  1. Introduction to UICollectionView
  2. How to Use UICollectionView to build a simple Grid-based layout
  3. Customizing the Collection Cell Background

[Read more...]

iOS Programming 101: How To Customize Tab Bar Background and Appearance

With over 700,000 apps in App Store, your app must have a great design to stand out from others. If your app is still using the default design, you better give it a tweak and make it look better. I’m sure it’ll improve your app sales and attract more downloads.

When you check out any popular app, you’ll notice a custom design tab bar. Some readers asked how we can change the appearance of the tab bar. In this tutorial, we’ll show you how to do that. With the introduction of Appearance API in iOS 5, it’s much easier to custom the UI controls that gives your app a unique look and feel.

[Read more...]

Improve the Recipe App With a Better Detail View Controller

Several weeks ago, we showed you how to use Segue in Storyboard to pass data between different view controllers. We’ve built a simple app to display a list of recipes. When user taps on any of the recipes, the app navigates to a detailed view and brings up the recipe name. This is very simple app. But if you understand how it works, this is the foundation to help you advance into a full-fledge iOS developer.

After publishing the tutorial, I got lots of requests to improve the detail view. The original detail view is primitive with the recipe name only. How can we improve it and display more information such as the preparation time, ingredient and the dish photo? In this tutorial, we’ll work on it together and make a better app. Before we move on, however, make sure you check out the below tutorial:

You have to understand the basic OOP concept before you can work on this tutorial. If you haven’t done so, take some time and read through the article. You can’t become a full-fledged iOS developer without learning objects and classes.
[Read more...]

iOS Programming 101: How To Send Email in Your iPhone App

Here comes another tutorial for our iOS Programming 101 series. Last time, we show you how to hide tab bar in navigation interface. In this tutorial, we’ll show you how easy you can let user send email in your app.

The iOS SDK has made it really easy to send email using the built-in APIs. With a few line of codes, you can launch the same email interface as the stock Mail app that lets you compose an email. In this tutorial, we’ll build a very simple app to show you how to send both plain text and HTML email using the iOS SDK.

SimpleEmail Tutorial Logo
[Read more...]

Back To Basics: Intro to Object Oriented Programming

If you’re our long time follower, you know we’ve gone pretty far. By now, you should be able to build an iPhone app with tab bar, navigation controller and table view using Storyboard. One request on the top of my list, however, is to enhance the detail view of the Recipe app. Many readers mentioned the original detail view is too plain. How can we display more information including an image? That shouldn’t be difficult if you understand the materials and I intentionally left out that part for you at the time I wrote the tutorial. :-)

Did you manage to create your own detail view for the Recipe app? Anyway, we’ll revisit it and show you how to improve the detail screen. But before that, I have to introduce you the basics of Object Oriented Programming. In the next tutorial, we’ll build on top of what we learn in this tutorial and enhance the detail view screen.

Don’t be scared by the term “Object Oriented Programming” or OOP in short. It’s not a new kind of programming language but a programming concept/technique. I intentionally left out the OOP concept when I first began writing the iOS programming tutorials. I want to keep thing simple and show you (even without any programming background) how to create an app. I don’t want to scare you away with technical term. However, I think it’s time to cover the concept. If you’re still around reading this article, I believe you’re determined to learn iOS programming and you want to take your app to the next level.
[Read more...]

iOS Programming 101: How To Hide Tab Bar in Navigation Interface

Appcoda started out with weekly tutorials to show you how to build an app. The weekly tutorials are very detailed with step by step procedures. So far the feedbacks about the tutorials and our free iOS development course are very positive. But some readers suggested us to take one step further and create mini tutorials to answer some common iOS development questions such as how to change the color of navigation bar or color of UIbutton. Thanks for the suggestions. From this week onwards, we’ll start a new series – iOS Programming 101. Every week, we’ll publish a short tutorial to answer a common question raised in the comment area or forum.

As a fresh start of the series, we’ll show you how to hide the tab bar in a navigation-based app. Several weeks ago, we developed the tab bar app. In that tutorial, we embed the navigation controller inside the tab bar controller. So when user taps on any of the recipes, the navigation controller pushes to the detail view.

Tab Bar App with Tab Bar in Detail View

Tab Bar App with Tab Bar in Detail View


[Read more...]

How To Add Search Bar in Table View

One common questions I got about UITableView is how to implement a search bar for data searching. This tutorial will show how to add a search bar to the Tab Bar project. With the search bar, the app lets 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. We’ll continue to work on the Xcode project we developed in the previous tutorial. If you haven’t gone through the tutorial, take some time to check it out or you can download the project here.

iOS App Search Bar
[Read more...]

Storyboard Tutorial: Create Tab Bar Controller and Web View

This is the third article of the Storyboards series. Last time, we discussed how to pass data between view controllers with segue. It should be easy, right? Now let’s continue to polish our Storyboard project and see how you can create to two other common UI elements in iPhone apps.

In this tutorial, you’ll learn:

  • How to Create a Tab Bar Controller
  • How to Create an About page using UIWebView

If you’re new to Storyboards, I suggest you to check out the first tutorial. All the materials discussed in this material are based on the work we’ve done before.
[Read more...]