How to Design An iPhone App With Custom UI - Video tutorial

[temi]

Hi all, Here is why iPhone App Design is important. The App Store has become crowded with over 500,000 apps. To stand out in such an ocean of apps, yours has to look unique and the one way to look unique is to have great design. The tutorials below will show you how to design an app from scratch. Top-selling apps like Evernote, On this Day, Momento, Awesome Note all have design in their DNA.

This video tutorial series will show you how to take a boring looking app and create a beautiful looking one with a custom design.

Let's roll!

Part 1 - How To Design an iPhone App With A Custom UI - Intro

Part 2 – Creating a UITableViewCell From Scratch

Part 3 – Creating a UIViewController Detail From Scratch

Part 4 – Styling a Custom UITableViewCell

Part 5 – Customizing the UINavigationBar Using the iOS 5 Appearance API


Part 6 - Creating Custom UIBarButtonItems For Our New Navigation Bar

Part 7 - Designing a Custom Detail View From Start To Finish

Part 8 - Designing a Custom Detail View From Start To Finish

Part 9 - Loading Data From a JSON Web Service

Part 10 - Adding API Data To Your App from a Web Service

I will be adding new tutorials as we go along. what do you think of these so far? What else would you like to learn about.





...

[Soonu]

good work Temi !!!

[temi]

Thanks, Soonu.

If you all have ideas of what you will also like to learn about!, please reply to this thread and let me know..

Originally Posted by Soonu

good work Temi !!!

[pawcio]

Great tutorials! Thanks alot! Keep the rest coming

[Jaxen66]

Thank you very much, you just learned me how to make a great navigation app!

But do you have some great sites where i can download some designs for my app, before your page are coming up?

[temi]

Originally Posted by Jaxen66

Thank you very much, you just learned me how to make a great navigation app!

But do you have some great sites where i can download some designs for my app, before your page are coming up?

Sure!, here is a link to the design files for the above tutorial. In the zip -file are the design elements, and an Xcode sample project for the finished app.

Download the design files here

[Jaxen66]

Originally Posted by temi

Sure!, here is a link to the design files for the above tutorial. In the zip -file are the design elements, and an Xcode sample project for the finished app.

Download the design files here

Thanks! - i'm looking forward to see your homepage!

Do you know how i can make some different tableview cells. Instead it only loads the same cell how can i make it load differents cells. like
1 Cell where there is an "American flag - and the label is USA"
2 Cell where there is an "English flag - and the label is England"
etc.

[temi]

Originally Posted by Jaxen66

Thanks! - i'm looking forward to see your homepage!

Do you know how i can make some different tableview cells. Instead it only loads the same cell how can i make it load differents cells. like
1 Cell where there is an "American flag - and the label is USA"
2 Cell where there is an "English flag - and the label is England"
etc.

Thanks, Jaxen...

Well, the best thing is to have a data model and then in your cellForRowAtIndexPath method, you call a function that configures the cell. e.g

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    
    static NSString *CellIdentifier = @"CountryCell";    
    CountryCell *cell = (CountryCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil)
    {
        NSArray* objects = [[NSBundle mainBundle] loadNibNamed:@"CountryCell" owner:self options:nil];
        
        for(id currentObject in objects)
        {
            if([currentObject isKindOfClass:[UITableViewCell class]])
            {
                cell = (CountryCell *)currentObject;
                break;
            }
        }
        
    }
    
    Country* c = [countries objectAtIndex:indexPath.row];
    [cell setDetailsWithCountry:c];
    
    return cell;
    
}

And in your setDetailsWithCountry method, you can now set the image and the text.

-(void)setDetailsWithCountry:(Country*)i
{
    //Set the label to USA or Japan
    [countryLabel setText:[c name]];

    [countryImageView setImage:[UIImage imageNamed:[country flag]]];
}

Make use to connect your label and the image view to your cell from the interface builder.

[Jaxen66]

Originally Posted by temi

Thanks, Jaxen...

Well, the best thing is to have a data model and then in your cellForRowAtIndexPath method, you call a function that configures the cell. e.g

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    
    static NSString *CellIdentifier = @"CountryCell";    
    CountryCell *cell = (CountryCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil)
    {
        NSArray* objects = [[NSBundle mainBundle] loadNibNamed:@"CountryCell" owner:self options:nil];
        
        for(id currentObject in objects)
        {
            if([currentObject isKindOfClass:[UITableViewCell class]])
            {
                cell = (CountryCell *)currentObject;
                break;
            }
        }
        
    }
    
    Country* c = [countries objectAtIndex:indexPath.row];
    [cell setDetailsWithCountry:c];
    
    return cell;
    
}

And in your setDetailsWithCountry method, you can now set the image and the text.

-(void)setDetailsWithCountry:(Country*)i
{
    //Set the label to USA or Japan
    [countryLabel setText:[c name]];

    [countryImageView setImage:[UIImage imageNamed:[country flag]]];
}

Make use to connect your label and the image view to your cell from the interface builder.

Man i am having trouble with this.. if you could make a fast tutorial, it would be fantastic!
Some other people are also having trouble on how to make an tableview app.

[Purulent Software]

Great tutorials, any indication on how much this will cost?

[johntom]

Excellent tutorials Temi !!! thank you very much for sharing it.

[dtfan]

Originally Posted by temi

Thanks, Soonu.

If you all have ideas of what you will also like to learn about!, please reply to this thread and let me know..

I was wondering if you knew how to make a drum simulator? I want to be able to use a picture of a real drum set and use that to make into a simulator with the drum sets actual sounds. If you can offer any help let me know. Thanks!

[temi]

Originally Posted by Jaxen66

Man i am having trouble with this.. if you could make a fast tutorial, it would be fantastic!
Some other people are also having trouble on how to make an tableview app.

What exactly are you having problem with. Just let me know and I can make a quick sample project for you.

[Jaxen66]

Originally Posted by temi

What exactly are you having problem with. Just let me know and I can make a quick sample project for you.

How to make a table view that have differents cell names and pictures, like denmark (danish flag), canada (canadian flag) sweden (swedish flag) etc. And then it loads to a detail view where i put information about the countries for denmark, canada, sweden etc.
And Thanks for taking the time to make a tutorial!

[temi]

Check out the sample project at this link... It shows a list with two countries Spain and France and their flags...

Is that what you were trying to do?

http://www.appdesignvault.com/sample...ct-country.zip

Originally Posted by Jaxen66

How to make a table view that have differents cell names and pictures, like denmark (danish flag), canada (canadian flag) sweden (swedish flag) etc. And then it loads to a detail view where i put information about the countries for denmark, canada, sweden etc.
And Thanks for taking the time to make a tutorial!

[Jaxen66]

Originally Posted by Lawrence875

Thanks, Soonu.

If you all have ideas of what you will also like to learn about!, please reply to this thread and let me know..

If you could make a tutorial about how to make a custom cell that reads rssfeeds and a detail-views that opens the rssfeed instead of safari that would be awesome.

If you also could make a tutorial on how to make a navigation app with custom cells, different detail-views to each cell, that would be awesome. My experience finding good tutorials on the internet to navigation based app is extremely poor. unfortunately.

[temi]

Originally Posted by Jaxen66

If you could make a tutorial about how to make a custom cell that reads rssfeeds and a detail-views that opens the rssfeed instead of safari that would be awesome.

If you also could make a tutorial on how to make a navigation app with custom cells, different detail-views to each cell, that would be awesome. My experience finding good tutorials on the internet to navigation based app is extremely poor. unfortunately.

Hi, the sample project I posted earlier lets you show different maps for each cell and each of the cells open up the correct detail view.


I know you were having some problems with the file but it should be fixed now

http://www.appdesignvault.com/tmp/sa...ct-country.zip

[Jaxen66]

Originally Posted by temi

Hi, the sample project I posted earlier lets you show different maps for each cell and each of the cells open up the correct detail view.


I know you were having some problems with the file but it should be fixed now

http://www.appdesignvault.com/tmp/sa...ct-country.zip

Thank you!! appreciate it!

1 last question.. : How do i get the info where you have putted the reciepe for your dishes to be like you click on spain, and in the info i have been written some info about spain. And when you click on France the info text will show some info about france, not spain. So the info field not are the same for every cell??

[Alexa]

This tutorial has been an eye opener for me! Thank you so much!

And because you asked what more we'd like to see... here it comes: I'd really like to see a tutorial (continuation of these ones), showing how to load the receipes in the background.

[Mike Pietruszkiewicz]

A very nice tutorial indeed, clear and helpful. Sincere thanks.

[MobiABC]

Great series. Thanks Temi

[velobuff]

I just registered to add to this thread.

If you download and run the sample OSX project, the program will compile and work just fine on Xcode 4.2.

But if you write your own/yourself (following along with the video) your project will not compile right out of the box. The issue is that the default install of Xcode (creating the default View Based Application) settings use the LLVM GCC 4.2 compiler which does not seem to like the 3rd party JSON classes. In order to get your project to compile, you'll have to switch to the Apple LLVM compiler 3.0.

Even after doing this my app (though not the downloaded project) is crashing in tutorial #10 right at the end of/before the call to the dataRequestCompletedWithJsonObject method.

Yeah, I know that iOS 5 has a built-in JSON but I'm just learning programming in pure Xcode/Obj-C so I'd rather do the tutorial. I also tried to upgrade to a more recent JSON class by the same author from GitHub but the method names/delegates have changed enough to make things break further.

Regardless, these tutorials are amazing. I did read/work through a good chunk of an eBook on Kindle called iPhone iOS 5 Development Essentials which is a good read for programmers coming from less arcane curly-bracket languages.

I'm sure it's probably a project setting but if anyone knows off-hand why my written app is crashing at the aforementioned method I'd appreciate it.

[365socialmedia]

A great list of video tutorials for beginner.

[temi]

Originally Posted by velobuff

I just registered to add to this thread.

If you download and run the sample OSX project, the program will compile and work just fine on Xcode 4.2.

But if you write your own/yourself (following along with the video) your project will not compile right out of the box. The issue is that the default install of Xcode (creating the default View Based Application) settings use the LLVM GCC 4.2 compiler which does not seem to like the 3rd party JSON classes. In order to get your project to compile, you'll have to switch to the Apple LLVM compiler 3.0.

Even after doing this my app (though not the downloaded project) is crashing in tutorial #10 right at the end of/before the call to the dataRequestCompletedWithJsonObject method.

Yeah, I know that iOS 5 has a built-in JSON but I'm just learning programming in pure Xcode/Obj-C so I'd rather do the tutorial. I also tried to upgrade to a more recent JSON class by the same author from GitHub but the method names/delegates have changed enough to make things break further.

Regardless, these tutorials are amazing. I did read/work through a good chunk of an eBook on Kindle called iPhone iOS 5 Development Essentials which is a good read for programmers coming from less arcane curly-bracket languages.

I'm sure it's probably a project setting but if anyone knows off-hand why my written app is crashing at the aforementioned method I'd appreciate it.

Sorry you couldn't run the app in your personal setup. Here is an updated version of the project.

http://www.appdesignvault.com/downlo...pleProject.zip

[aghahamidgol]

I finished till part 3 and i get follow error when i Tap on rows ... and app stops working , I attached the image , could you please help me ?

i upload the image here : View image: Screen Shot 2012 05 18 at 6 10 12 PM