Archives for December 2012

Last updated by at .

iOS Programming Recipe 4: Using NSURLConnection

URL Requests

Making URLS requests on the Mac is as simple as

  1. open terminal.app
  2. then typing the following

$ curl https://alpha-api.app.net/stream/0/posts/stream/global

This retrieves the APP.NET global stream. If you are not familiar with APP.NET, it is a Twitter like service that sports an open api, similar to how Twitter used to be.

The result of running curl is a large JSON string representing the afore mentioned global stream as shown below

curl result

Unfortunately making URL requests in your iOS application isn’t quite this easy, but fortunately NSURLConnection does most of the heavy lifting for you.

NSURLConnection

The NSURLConnection class reference, located on Apple’s developer website has the following description

An NSURLConnection object provides support to perform the loading of a URL request. The interface for NSURLConnection is sparse, providing only the controls to start and cancel asynchronous loads of a URL request.

Which basically says NSURLConnection is used to perform URL requests, but how do you create the actual requests?

NSURLRequest to the rescue!

[Read more…]

iOS Programming Recipe 3: Creating Segues with the Storyboard Part 2

Last time we left off navigation controllers and a simple modal segue were covered. Now I want to go over one more common navigation controller. This time We’ll talk about the TabBarController. The steps here should be pretty familiar from Part 1. If you haven’t already gone to Part 1 you may want to head over there. http://nscookbook.com/2012/12/ios-programming-recipe-3-creating-segues-with-the-storyboard-part-1/

Assumptions

  • You Are familiar with Xcode 4.5, if not go here
  • You know how to create a project with a single view controller

The TabBarController

Alright, Let’s get into the meat of this. Start with a new single view controller project titled “TabBarSegue”. Then go ahead and delete the view on the storyboard. This sets us up for a good starting point.

From the object explorer in the bottom right hand pane, drag a new TabBarController on to the storyboard. Two views are already connected to the controller, but we want to show you how to create these connections yourself so go ahead and delete them. You should now just have the single TabBarController on the screen like below.

TabBarController

now go ahead and drag a new view controller onto the screen next to the tabBarController. You see the following:

add new view

Now control click the TabBarController and drag to the view controller. A dialogue will pop up and you will see at the bottom of the dialog an option title “view Controller” under “relationships”. Choose that option.

making connection

selecting relationship

You should now see a segue connection like the following:

one view added

Right Now you pretty much have everything you need to know about segueing to a TabBarController.  If you were to run this right now it wouldn’t do a whole lot though. Let’s go ahead and add a couple more  views to the storyboard scene and connect those as well. The steps are the same as already described.

You should have something that looks like this:

3 views added

Now go Ahead and add a label to each view. Call them “First”, “Second”, and “Third” respectively. Go ahead and run it!

You should have something like this:

Tab bar controller in action

Ok, Now one last thing. Most Apps you see with a TabBarController have little icons. Now We’ll show you how to do that. Find a small .PNG file with a transparent background.  Also Make sure it’s a black and white image for best results. I made a spur looking thing in photoshop that is about 32 x 32 pixels. I also made a 64 x 64 pixel version. This is needed for higher resolution devices. name the first icon 32 pixel icon whatever you want and then name the 64 pixel icon the exact same thing with an @2x on the end. Xcode will automatically pick the @2x.png image when high res devices are used, otherwise the smaller image will be scaled up on high resolution devices. This doesn’t look good. I suggest creating the 64 pixel version first then modify the image size down to 32 pixels and save that.

Example:

spur.png and spur@2x.png

Drag the images from the file location into you Xcode project. it will prompt you to copy the files to the project. Go ahead and do it.

now select the tab  bar on one of the views. The Attributes inspector should show the following prompt:

Tab Bar Properites

Select your image from the drop down and give it a title. Run it and you should see your image. My result looked like this:

SpurImage

Again, We didn’t need any code to get this done. In future posts we’ll talk more about transitioning from views without the use of interface builder. Many iOS developers have mixed feelings on the interface builder. Some will use it, others wont. As such, the requirement for a career is usually that you as a developer can do both. The next Recipe I’ll be posting will take these segued relationships and share data between them.

 

iOS Programming Recipe 3: Creating Segues with the Storyboard Part 1

Introduction

In the early days of iOS development the Interface Builder was cumbersome and not too helpful. Now the interface builder is nicely integrated into Xcode and can be very helpful and easy to use. This article serves as an introduction into the storyboard as well as how to work with segues.

The storyboard in Xcode allows a developer to lay out the design of an App before any code has to be written. This can be helpful for conceptualizing an idea. Often a developer may want to transition between multiple scenes. To transfer between scenes with the storyboard a Segue needs to be implemented.

Asumptions

  • You Are Familiar with Xcode 4.5 if not, do so here.
  • You know how to create a project with a single view controller

The Segue

A segue is basically a connection between two views which allows one view to present another when an action(most commonly a button push) is performed. depending on the application, one of two types of segues may be used.

The Modal Segue

The modal segue is the most simple type of segue. Generally a modal segue would be used when there is no need to share information between the presenting view and the presented view. A good example of this would be a login screen.

The Push Segue

A push segue will be necessary for either the navigation controller or the tab bar controller. These types of controllers handle memory managment and help with passing data between views.

Using A Modal Segue

A modal segue is really pretty simple as far as implementation. For this example we’ll make a login screen that will take us to a view. Start of with a new single view controller project titled “modalview”.

In the main story board drag three Labels, two text fields, and a button from the objects explorer in the bottom right hand pane to the view. Then change the text on the labels and buttons to look like the following image:

iOS Login Screen Example

next drag a new view controller onto the storyboard. From the new storyboard control drag from the login button to the new view controller. When prompted choose “modal” from the dialogue.

[Read more…]

iOS Programming Recipe 2: Skinning UIButton

Before You Begin

This recipe uses resizable graphics that were generated using Opacity which was the topic of another of our posts, Developer Tools – Opacity. If you are following along you can download both the 1x and 2x graphics here.

Skinning UIButton

I have seen many different approaches to creating custom looking UIButtons

  • UIButton subclass implementing drawRect
  • Drawing the background images once, then caching and reusing
  • creating images asset for each button size

While each of these methods may technically work, the best method is to use resizable image assets. Using resizable assets will allow you to take full advantage of UIKit and the performance enhancements it has to offer.

iDevices these days come in many shapes an sizes, retina and non-retina screens, ect, so it is important that you create assets at different resolutions so your application looks great on all of them!

Step 1: Setup a UIButton

  • Create a new Xcode project using the single view application template for iOS or use an existing application if you have one.
  • Open ViewController.xib and drag two UIButton’s from the object pane into your view, your view should look like the one below

ViewController_image

  • In Interface Builder, open the Attributes Inspector Option+CMD+4, then select the second button, change the Type property to Custom as shown below [Read more…]

iOS Programming Recipe 1: Controlling Actions With Buttons

This Recipe is going to cover the UIButton and a few ways that we can work with it.

Assumptions

Uses

There are a few things we can do with buttons, but the main reason you would want a button is to either enter a value or trigger an action. In some cases, you may want to have the button change it’s properties based on some state in your app.

Adding a UIButton using the interface builder

From the Object library located in the Utility bar on the bottom right find the “Round Rectangular Button” . Click the Button object and drag it onto your view. Whew! that was easy!  Since were already in the interface builder, go ahead and click and drag a label onto the view as well.

Your view should look something like this:

To change the text value of the button go ahead and double click it. Rename the button to “Button 1”

Making the Connections

Now that we’ve designed the interface(although it’s kind of ugly), it’s time to make the connections. Change your view to the assitant editor view and control click and drag the button into the .h file between @interface and @end.

[Read more…]

Development Tools – Opacity

Assumptions:

  1. It isn’t required, but it will be helpful if you are familiar with layer based image editing or have experience with a graphics editing program such as Adobe Photo Shop

Getting Started

A important aspect of developing apps for iOS or OS X is creating a great User Interface. Even if your app has all the latest and greatest functionality, you are going to have a hard time getting anybody to use it if it is lacking in the UI department,.

Opacity to the rescue!

Opacity is a layer based vector graphics application for the Mac that makes designing graphics for your app a breeze. Opacity has built in templates for skinning buttons, creating 1x and 2x resolutions non-retina & retina devices, and many other time saving features as you will see!

Step 1: Download Opacity

Currently (as of this writing) Opacity is not available through the Mac App Store and I’m not sure if the developer has any plans to add it any time soon, however it can be downloaded at http://likethought.com/opacity/. I recommend starting with the trial version (free), but the full version will be necessary to remove a pesky watermark from your exported images (currently the full version is $89.99).

Additionally, there is a great video tutorial on the home page that I would recommend watching before moving on to Step 2.

Step 2: Creating a UIButton Image

Lets get started!

[Read more…]

css.php
Privacy Policy