Advertise here




Advertise here

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

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

temitemi Posts: 47Tutorial Authors, Registered Users
edited May 2012 in iPhone SDK Tutorials
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.





...
Post edited by temi on
<font size="2">Your apps don't have to be ugly because hiring designers are expensive. <br />
<b>Click here to fix that -><a href="http://www.appdesignvault.com" target="_blank">iPhone App Designs</a></b></font>
«1

Replies

  • SoonuSoonu Posts: 10Registered Users
    edited November 2011
  • temitemi Posts: 47Tutorial Authors, Registered Users
    edited November 2011
    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..
    Soonu wrote: »
    good work Temi !!!
    <font size="2">Your apps don't have to be ugly because hiring designers are expensive. <br />
    <b>Click here to fix that -><a href="http://www.appdesignvault.com" target="_blank">iPhone App Designs</a></b></font>
  • pawciopawcio Posts: 9New Users Noob
    edited November 2011
    Great tutorials! Thanks alot! Keep the rest coming :)
  • Jaxen66Jaxen66 Posts: 85Registered Users
    edited November 2011
    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?
    Danish dynamite!
  • temitemi Posts: 47Tutorial Authors, Registered Users
    edited November 2011
    Jaxen66 wrote: »
    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
    <font size="2">Your apps don't have to be ugly because hiring designers are expensive. <br />
    <b>Click here to fix that -><a href="http://www.appdesignvault.com" target="_blank">iPhone App Designs</a></b></font>
  • Jaxen66Jaxen66 Posts: 85Registered Users
    edited November 2011
    temi wrote: »
    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.
    Danish dynamite!
  • temitemi Posts: 47Tutorial Authors, Registered Users
    edited November 2011
    Jaxen66 wrote: »
    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.
    <font size="2">Your apps don't have to be ugly because hiring designers are expensive. <br />
    <b>Click here to fix that -><a href="http://www.appdesignvault.com" target="_blank">iPhone App Designs</a></b></font>
  • Jaxen66Jaxen66 Posts: 85Registered Users
    edited November 2011
    temi wrote: »
    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.
    Danish dynamite!
  • Purulent SoftwarePurulent Software Posts: 11Registered Users *
    edited November 2011
    Great tutorials, any indication on how much this will cost? :p
  • johntomjohntom Posts: 1New Users
    edited November 2011
    Excellent tutorials Temi !!! thank you very much for sharing it.
  • dtfandtfan Posts: 2New Users
    edited November 2011
    temi wrote: »
    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!
  • temitemi Posts: 47Tutorial Authors, Registered Users
    edited November 2011
    Jaxen66 wrote: »
    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.
    <font size="2">Your apps don't have to be ugly because hiring designers are expensive. <br />
    <b>Click here to fix that -><a href="http://www.appdesignvault.com" target="_blank">iPhone App Designs</a></b></font>
  • Jaxen66Jaxen66 Posts: 85Registered Users
    edited November 2011
    temi wrote: »
    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!
    Danish dynamite!
  • temitemi Posts: 47Tutorial Authors, Registered Users
    edited November 2011
    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-project-country.zip

    Jaxen66 wrote: »
    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!
    <font size="2">Your apps don't have to be ugly because hiring designers are expensive. <br />
    <b>Click here to fix that -><a href="http://www.appdesignvault.com" target="_blank">iPhone App Designs</a></b></font>
  • Jaxen66Jaxen66 Posts: 85Registered Users
    edited November 2011
    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.
    Danish dynamite!
  • temitemi Posts: 47Tutorial Authors, Registered Users
    edited November 2011
    Jaxen66 wrote: »
    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/sample-project-country.zip
    <font size="2">Your apps don't have to be ugly because hiring designers are expensive. <br />
    <b>Click here to fix that -><a href="http://www.appdesignvault.com" target="_blank">iPhone App Designs</a></b></font>
  • Jaxen66Jaxen66 Posts: 85Registered Users
    edited November 2011
    temi wrote: »
    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/sample-project-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?? :confused:
    Danish dynamite!
  • AlexaAlexa Posts: 1New Users
    edited January 2012
    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 PietruszkiewiczMike Pietruszkiewicz Posts: 15Registered Users
    edited January 2012
    A very nice tutorial indeed, clear and helpful. Sincere thanks.
    <a href="http://icodermag.com/?a_aid=michalpietruszkiewicz&a_bid=b9d77e28" target="_blank">[SIGPIC]iCoder Magazine[/SIGPIC]</a>
  • MobiABCMobiABC Posts: 1New Users
    edited February 2012
  • velobuffvelobuff Posts: 1New Users
    edited February 2012
    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.
  • 365socialmedia365socialmedia Posts: 3New Users
    edited February 2012
    A great list of video tutorials for beginner.
  • temitemi Posts: 47Tutorial Authors, Registered Users
    edited March 2012
    velobuff wrote: »
    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/downloads/FoodySampleProject.zip
    <font size="2">Your apps don't have to be ugly because hiring designers are expensive. <br />
    <b>Click here to fix that -><a href="http://www.appdesignvault.com" target="_blank">iPhone App Designs</a></b></font>
  • aghahamidgolaghahamidgol Posts: 8New Users
    edited May 2012
    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
  • aghahamidgolaghahamidgol Posts: 8New Users
    edited May 2012
    Another question that , if i want to load the data from RSS how can i do it ?
«1
Sign In or Register to comment.