Customizing Navigation Bar and Status Bar in iOS 7

Like many of you, I have been very busy upgrading my apps to make them fit for iOS 7. The latest version of iOS introduces lots of visual changes. From a developer’s perspective, the navigation bar and status bar are two noticeable changes that need to cater. The status bar is now transparent, that means the navigation bar behind it shows through. In some cases, the background image for a navigation bar can extend up behind the status bar.

Some time ago, I’ve written a tutorial about how to customize a navigation bar. I think it’s time to revisit the customization and see how it is done in iOS 7. Here are some of the tips and tricks that you’ll find in this article:

  • Setting the background color of navigation bar
  • Using background image in navigation bar
  • Customizing the color of back button
  • Changing the font of navigation bar title
  • Adding multiple bar button items
  • Changing the style of status bar
  • Hiding the status bar

custom navigation bar iOS 7

You’ll need Xcode 5 to properly execute the code as presented in this tutorial. So if you’re still using older versions of Xcode, make sure you upgrade to Xcode 5 before running the sample Xcode project.
[Read more…]

iOS Programming 101: How to Customize Navigation Bar and Back Button

Previously, in our iOS Programming 101 series, we showed you how to customize the appearance of the Tab Bar. In this tutorial, we’ll continue to talk about UI customization and cover how to use Appearance API to make the Navigation Bar more beautiful.

Here are what you’ll learn in this tutorial:

  1. Customizing the View with background image
  2. Customizing UINavigationBar including background image and text style of title
  3. Customizing the appearance of UIBarButtonItem

As usual, we’re going to illustrate the concept by converting a plain navigation bar to one with customized graphics. However, to help you focus on learning the customization, we’ve prepared the Xcode project for you to start with. Before proceeding, first download the Xcode project here (note: the project is created using Xcode 4.5).

If you build and run the project, you’ll get an app with simple navigation UI. Now we’ll work together to style the navigation bar, customize the bar buttons and assign our own background image for the view.
[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…]

Use Storyboards to Build Navigation Controller and Table View

By now, if you’ve followed our tutorials, you should have a basic understanding about UITableView and how to build a simple app. This week, we’ll talk about something new – Storyboards. This is one of the most exciting features introduced in Xcode 4.2 and iOS 5 SDK. It makes your life, as an iOS developer, simpler and lets you easily design the user interface of your iOS app.

In this tutorial, we’ll show you how to use Storyboards to build a Navigation interface and integrate it with UITableView. We try to keep thing simple and focus on explaining the concept. So no fancy interface or pretty graphic. We’ll leave the artwork to future tutorials.

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