Wednesday, October 19, 2011

iOS 5 Storyboard and UITableViews Tutorial

In this tutorial we will:

1. Create a UITableView from scratch.
2. Learn about navigation controllers.
3. Pushing view controllers with storyboard.

Link to Download Entire Project: here

1. Create a new single view based application called "StoryboardTutorial".


2. Select the main storyboard file and then select Editor > Embed In > Navigation Controller.
Note: A navigation controller is a way to manage views. Typically you push or pop a view onto a navigation controller. You can think of this a stack.


3. Next drag and drop a UITableView from the right sidebar and place it onto the view controller.


4. Go into the ViewController.h file and add after it says UIViewController. This tells the compiler that your class will conform to the UITableViewDelegate/UITableViewDataSource protocols. A protocol is just a formal way of saying that you will implement all methods that are required so you have a functioning tableview. 




Note: The biggest benefit of declaring the ViewController.h object as such is that now Xcode will autogenerate code and most of your necessary methods you would like to implement in the tableview class. Also note, if the method is not auto-generating you're probably doing something wrong. That's the main way I know I'm doing something wrong, or the program crashes.



5. Go back to the main storyboard file and "Control + Drag" from the tableview to the view controller and select "data source" and "delegate". This is how you tell the tableview where it is going to get it's data from, and if an event (a touch event for example) happens, who should it notify.


6. Now click on a tableview cell and click on the right side bar and go to the fourth panel from the left. In the field Identifier type "Cell". This is label so that you can reuse tableview cells which saves memory.


7. In the ViewController.m file implement these protocol methods.
Note: Philosophically it would make sense that you would needs to implement these methods to have create an actually tableview. You need to know 1) how many rows should you have and 2) what should you label these rows and 3) what to do when a user clicks on it.

Debugging Tip: Manually label the cells at first to make sure you made your connections correctly. I once spent three hours of my life trying to figure out why my tableview was empty. Save yourself the misery.



After you implement those methods it should look like this. I changed the table to states because I wanted to later show how to alphabetize a list of states.


8. Go back to the main storyboard file and drag and drop a View Controller object, and in the right panel type "detail" and the Identifier. This will be the detail view controller to push another view onto the view controller.


9. Go to File > New File > UIViewController Subclass and then create a UIViewController subclass called "DetailViewController" and unselect use XIB for interface.



10. Go back to the main storyboard file and in the right panel change the class of your newest view controller to be the "DetailViewController" that you just created.


11. Now go back to the ViewController.h file and then add "#import DetailViewController.h" at the top of your file. Then edit the two methods like below.

Note: What's new in iOS 5 is the storyboard and transitioning from one view to the other. Instead of having lots of Xib files, you replace them with views all placed into one storyboard file. This makes life much easier for the developer. So seen below is how you create a view controller object in storyboard.
"[self.storyboard instantiateViewControllerWithIdentifier:@"detail"" tells the computer to create the view that I called "detail" in the storyboard file, and then the "[self.navigationController pushViewController:detail animated:YES]" then pushes the view onto the view stack, so the visible view is then the current view.

Note: The tableview height method is self-explanatory. For some reason I had a hard time finding that method when I first started so I thought I would include it here for people to play with.


If everything is working correctly you should see these two screens if you select onto a tableview cell.

Note: In keeping with the states them I added two label to the detail view to work with later on.




12. Now if you can add a background image to the tableview cell by editing the cellForRowAtIndexPath method. Here I have a 320x65 pixel image called "LightGrey.png" which I'll include in the project at the end of the tutorial. Adding a background image really adds vibrance to your tableview.





13. Create a datasource by editing your ViewController.h and ViewController.m files so they match the ones below.
















Then make these changes in the ViewController.m file:



Changes:
1) @synthesize states and datasource.
2) In the viewDidLoad method call the function setupArray;
3) Create the datasource in setupArray;
4) Change the text label so that it reads from the datasource.

14. Edit the DetailViewController.h file so it matches the one below.



Then @synthesize them at the top of the DetailViewController.m file.


Then edit the viewDidLoad method.


15. Go back to the main storyboard file and select the detail view controller and "Control + Drag" from the DetailViewController to each of the UILabels and connect them to the appropriate outlet. 








16. Then go back to the ViewController.m file and edit the didSelectRowAtIndexPathMethod so it matches the following. This is just passing data from one view to the other.

So now when you select the state, the detail view will show the state's name and the state capital.








90 comments :

Morten G said...

Very nice tutorial. I notice that the Live Bytes in instruments increases when I switch between table and item view. Not many bytes but over time, it might be a problem.

Is it normal that the Live Bytes grows, when entering the same item View over and over again.

/Morten

Morten G said...
This comment has been removed by the author.
Hdim said...

Hi! Thanks for this tuto, I have a problem, when I am at step 4 and when I add UITableViewDataSource / Delegate, nothing is changed in my .m file..... Is it normal..?

Hdim said...
This comment has been removed by the author.
Avijit Paul said...

Thank you very much. I was new to App development and started with ios5 which made me crazy as all the tutorials are for 4 and I could not get the tableview done initially.

and to @Hdim, I had the same problem and I still have the same problem. Besides it crashed first for me.

After trying many time I closed Xcode and redid from start and that time it worked. It still did not fill up the .m file but at least when I started to type it started to show the code hints.

The Rob Brennan said...

Thanks for such an awesome blog post! I thought I was running into a personal wall when dealing with viewing detail from a chosen table, but this makes perfect sense. =)

sunil786 said...

Thanks for such a nice tutorial. very helpful!

Ole said...

Thanks for a perfect tutorial! I am completely new to iOS programming, but this one gave me a flying start. However, I have a couple of questions:
1. How can I arrange the values in the array either by wish or alphabetically?

2. When a cell in the table is pushed, it gets the usual hover effect before switching view. But when I go back to the table view again, the hover effect is still present on the last item I pushed. This happened not just on my app, but alsp when i downloaded your code.

I really hope you have an answer to these questions because they have been driving me mad the last qouple of days.

Again, thank you for the guide!

Technical Blogs said...

Helped with wiring storyboard's tableview and UIView. Not sure how much time I would spent trying to figure that out without this post. Thanks.

Josan said...

Very nice tutorial, but I have a problem, I want to access the property tableview to reload the new data in the table and not get it.I want do this:

- (void)playerDetailsViewController:
(PlayerDetailsViewController *)controller
didAddPlayer:(Player *)player
{
[self.players addObject:player];
NSIndexPath *indexPath =
[NSIndexPath indexPathForRow:[self.players count] - 1
inSection:0];
[self.tableView insertRowsAtIndexPaths:
[NSArray arrayWithObject:indexPath]
withRowAnimation:UITableViewRowAnimationAutomatic];
[self dismissViewControllerAnimated:YES completion:nil];
}

But I don't know how to do "self.tableVew".

Can you help me, please?

Raspés said...

Gracias por el tutorial. Excelentes imágenes y explicación. Ojalá puedas seguir haciendo mas!!!

David Jiang said...

How would I reload the data in the UITableView?

Maui Perspectives said...
This comment has been removed by the author.
Maui Perspectives said...

Great tutorial. How would I have to modify the .h and .m files of the Detail View Controller if I wish to pass a single image from an array in the View Controller? I have tried many ways and I am getting crashes or errors.

Sudarshan Shetty said...

check it out http://aboutios.blogspot.com/

Bear said...

Is it possible to have two segues from a table cell? When I click a cell I want to navigate to ViewController A or VIewControlleB. It won't let me drag two segues?

imp said...

Thanks for this Very useful tutorial.

David.Dong said...

Thats awsome
I just wondering is it possible that you can add search function to this tutorial?

Lauraine said...

I just searching this kind of things in search engines. My searching was ending here. Keep up your good work. I bookmarked it for general updates.
html5 video player| html5 player

jmin said...

If it crashes, use this

datasource = [[NSMutableArray alloc] initWithArray:[states allKeys]];


And be sure that the datasource is released in dealloc method.

that one Ginger said...

Great tutorial. Bookmarked this blog, I'm hoping it'll be of more help to me in the future! Keep the tutorials coming!

Sandy Shaw said...

I like your blog post. Keep on writing this type of great stuff. I'll make sure to follow up on your blog in the future.
Establishing Serial Point-to-Point Connection

GalaxyGamesKeith said...

Thank you for putting this up here. Was missing a simple step and needed someone to walk me through it quickly. Much appreciated!

Anonymous said...
This comment has been removed by a blog administrator.
Technology Blog said...

If anyone has suggestions on what they want me to talk about I will write more in the future.

vandit mehta said...

I Tried it but it gives me warning in Main.m file as 'Signal SIGABRT' and i can not solve it..
any suggestions about how i can solve it..
Thanks in advance..

david Rice said...

Thank you so much for writing a lot of this good information! I am looking forward to reading more.

Dissertation Writing | buy dissertation proposal

alex said...

This is really awesome blog and the information is more awesome and great to see!
Essay Examples

sundeep jan said...

hi sir with storyboard i have taken tableview in that i can set background image for that can u help me

Hamza Shahzad Shahzad said...

Splendid work
Cereb

Fabian Smith said...

Very interesting! Really very nice blog you :) Hamilton Resourcing
Human Resource Solutions UAE
Psychometrics Tests
Psychometrics Test Dubai
Talent Management
Integrity International
Executive Recruitment
The McQuaig Psychometric System
The McQuaig Job Survey
The McQuaig Word Survey
The McQuaig Self-Development Survey
Executive Search Firms in Dubai
Head Hunters Dubai
Executive Recruitment in Dubai
Emirati Talent Management

Zaki Anwar said...

Nice Post. It’s really a very good article. I noticed all your important points. Thanks 
Workers Compensation
Pain Treatments
Botox Injections
Discography
Epidural Injections
Epidural Lysis Procedure
Facet Blocks
Intercostal Nerve Blocks
Intrathecal Pump Therapy
Intradiscal Electrothermal Therapy
Intercostal Nerve Blocks
Joint Injections
Platelet Rich Plasma
Percutaneous Discectomy
P-STIM
Racz Epidural Neurolysis
Radiofrequency Lesioning
Selective Nerve Root Blocks
Spinal Cord Stimulation
Sympathetic Nerve Blocks
Vertebroplasty
Pain Locations
Arm Pain
Abdominal Pain
Back Pain
Cancer Pain
Chest Wall Pain

Stem Cell Therapy said...

Great information, you have a wonderful blog and an excellent article.
Platelet Rich Plasma Therapy
Elbow Surgery
Hip Replacement Surgery
Shoulder Surgery
Knee Replacement Surgery
Stem Cell Therapy

Anonymous said...

I am truly inspired by this online journal! Extremely clear clarification of issues is given and it is open to every living soul. I have perused your post, truly you have given this extraordinary informative data about it.
iOS App Development

Thot Code said...

Your weblog is admittedly good normally a satisfaction to examine your posts. iPhone Application Developer

App Planit said...

It’s going to be ending of mine day, but before ending I am reading this fantastic piece of writing to improve my knowledge. custom iPhone app development

Ramachandran Gopalan said...

Your Blog was very interesting to me. i’ll thnx you a lot for posting this interesting information
storyboard online

Keerthi said...

Excellent and very cool idea and the subject at the top of magnificence and I am happy to this post..Interesting post! Thanks for writing it. What's wrong with this kind of post exactly? It follows your previous guideline for post length as well as clarity..


iOS Training in Chennai

Sujitkumar said...

Hai Good information shared about IOS. In future everything about ios . This blog post is really helpful. Please keep updated tutorials…

venu puram said...

Excellent blog post I was actually checking for this content Thankyou for the Post well When I was having my PMP Training in Bangalore I was an issue with my UI of iPhone now I got your blog post got rectified.

Nazeer Rahaman said...

Gud Nice Information of
IOS 5 Storyboard and UITableViews Tutorial
Can this be integrated to this platform microsoft dynamics crm course

Linux Training India said...

Great Article!!
Linux Online Training India
Online devops Training India
Online Hadoop admin Training India

Naresh K said...

Informative Blog on iOS 5 Storyboard and UITableViews Tutorial... Thanks for your Valuable Information... MindMajix is providing Online Training on IOS Development Training.

Vivek Reddy said...

I would say while reading your article, i felt very proud. Because the information you written very useful, please keep posting this type of articles. If you guys looking for a IOS Training Bangalore. please click below link.

IOS Courses in Bangalore Marathahalli

Unknown said...

It 's amazing article and useful for developers
iOS App Development Online Course

Riya karakoti said...

Really a good post, thanks for sharing .keep it up.

Best Web Design Training Institutes in Noida

Best Hadoop Training Institutes In Noida

Best Digital Marketing Training Institute in Noida

Sap Training Institute in Noida

Best Java Training Institute in Noida

SAP SD Training Institute in Noida

Best Auto CAD Training Institute In Noida

aashutosh webtrackker said...

Salesforce Training Institute in Noida

Salesforce Training in noida

Best Salesforce Training Institutes in Noida

Best Aws Training Institutes in Noida

best aws training in noida

aws training institute in noida

best data science training institute in delhi

python Training Institute in noida

sas Training Institute in noida

linux Training Institute in noida




Arvind Rawat said...

Each department of CAD have specific programmes which, while completed could provide you with a recognisable qualification that could assist you get a job in anything design enterprise which you would really like.

AutoCAD training in Noida

AutoCAD training institute in Noida


Best AutoCAD training institute in Noida

rajesh redddy said...

Your very own commitment to getting the message throughout came to be rather powerful and have consistently enabled employees just like me to arrive at their desired goals.
AngularJs Training in Bangalore
Angularjs Online Training

Anonymous said...

I have read your blog its very attractive and impressive. I like it your blog.
simultaneous interpretation equipment
conference interpreting equipment
tour guide system
silent disco headphones
electronic voting pads
laser barcode scanner
bosch simultaneous interpretation system

nancy said...

It's very nice blog. I'm so happy to gain some knowledge from here.

nancy said...

This is a 2 good post. This post gives truly quality information.



RPA Training in Hyderabad

nancy said...

Thank you so much for sharing this.


RPA Training in Hyderabad

amarraj paindit said...

rpa training institute in noida
sas training institute in noida
hadoop training institute in noida
blokchain traninig institute noida


nancy said...

Your blog is very useful for me, Thanks for your sharing.


MSBI Training in Hyderabad

kiran mai said...

This Blog Is Very Informative and Useful Content.

Apptus Online Training
Performance Testing Online Training
Data Modeling Online Training
AEM Online Training
Blockchain Online Training

jyothi kits said...

nice blog.
hyperion Classes

Informatica Classes

Java Classes

Eminent It Info said...

I have read your blog its very attractive and impressive. I like it your blog.
Python training in marathahalli bangalore | Best aws training in marathahalli bangalore | Best Devops training in marathahalli bangalore

i4 consulting said...

Thank you for posting this. I have been looking for a quality article for some time now. Wordpress Development Singapore

sonu raj said...

nice info I bookmarked it.
FIND YOUR JOBS HERE : Hyseplacements

Anexas Europe said...

Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here. I'm taking reference from your post. Thanks for sharing.
Machine Learning With TensorFlow Training and Course in Muscat
| CPHQ Online Training in Singapore. Get Certified Online

Unknown said...

Machine Learning With TensorFlow Training and Course in Kyrgzystan​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

cloud ace said...

Nice post. By reading your blog, i get inspired and this provides some useful information. Thank you for posting this exclusive post for our vision....

vmware online training
tableau online training
qlikview online training
python online training
java online training
sql online training
cognos online training

jyothi kits said...

This post is much helpful for us.
Sharepoint Interview Questions and Answers
Oracle SOA Interview Questions and Answers

jyothi kits said...

I am waiting for your more posts like this or related to any other informative topic.
Dotnet Training
Etl Testing Training

madduri jagadeesh said...

best article with nice information thank you

DevOps Training in Hyderabad
Salesforce Training in Hyderabad
SAP ABAP Online Training
SEO Training in Hyderabad

Digital Floats said...

Great Article. Thanks for sharing info.

Digital Marketing Course in Hyderabad

Digital Marketing Training in Hyderabad

AWS Training in Hyderabad

Workday Training in Hyderabad

Bannu Babu said...

Nice information thanks for providing information that is worth sharing
ielts coaching in Hyderabad
Machine learning Course in Hyderabad
power bi training in Hyderabad
Python training in Hyderabad

DevOps Online Training said...

i'm Here to Get Great About DevOps, Thanks For Sharing
DevOps Training
DevOps Training in Ameerpet
DevOps Training institute in Hyderabad
https://www.visualpath.in/devops-online-training contact Us: 9704455959

mani said...

awesome article thanks for sharing


devops online training




python online traning




power bi online traning



machine learning online course

SAHASRA R said...

Great article,nicely explained tutorial,Thanks for the post
AWS Training in

Hyderabad

Digital

Marketing Training in Hyderabad


Big Data

Hadoop Training in Hyderabad


Digital Marketing

Course in Hyderabad





Training said...

Very Informative, Thanks for Sharing.

Digital Marketing Courses in Hyderabad

SEO Training in Hyderabad Ameerpet

SAP ABAP Training Institute in Hyderabad

Salesforce CRM Training in Hyderabad

digitalmrk said...

Usefull Article. Thanks for sharing info.

Digital Marketing training in Hyderabad

IELTS training

in hyderabad


sap sd online

training


sap fico online

training

Shaikfarha said...

Very interesting, good job and thanks for sharing information .Keep on updates.

Affiliate Marketing Training in Hyderabad

Online Reputation Management in Hyderabad

Email Marketing Course in Hyderabad

E-Commerce Marketing Training in Hyderabad


Digital shree said...

The best Article that I have never seen before with useful content and very informative.Thanks for sharing info.

Social Media Marketing Training in Hyderabad

Adwords Training in Hyderabad

Google Analytics Training in Hyderabad

Google AdSense Training in Hyderabad

Digital Nagaraj said...

Great Article. Thanks for sharing info.

Digital Marketing Course in Hyderabad

Top Digital Marketing Courses with the live projects by a real-time trainer

line Digital Marketing Courses in Hyderabad

SEO Training in Hyderabad

tanmay chaubey said...

Its really nice and informative.. Thanks for sharing

Microsoft Azure Training institute in Noida,

AWS Training Institute in Noida sector 16,

Cloud Computing Training Institute in noida sector 16,

Data science training institute in noida sector 16,

Data Science With machine learning training Institute in Noida sector 16,

Data Science With python training Institute in Noida sector 16,

Web-designing Training Institute in Noida sector 16,


tanmay chaubey said...

Its really nice and informative.. Thanks for sharing

software-testing Training Institute in Noida sector 16,

Digital Marketing Training Institute in noida sector 16,

hadoop Training Institute in noida sector 16,

Java Training Institute in noida sector 16,

linux Training Institute in noida sector 16,

node.js Training Institute in noida sector 16,

openstack Training Institute in noida sector 16,

Oracle DBA Training Institute in noida sector 16,

tanmay chaubey said...

Its really nice and informative.. Thanks for sharing

Php Training Institute in noida sector 16,

PlSql Training Institute in Noida sector 16,

Python Training Institute in Noida sector 16,

RPA Training Institute in Noida sector 16,

Salesforce Training Institute in Noida sector 16,

Sap fico Training Institute in Noida sector 16,

ERP Sap mm Training Institute in Noida Sector 16,

Sap Training Institute in Noida Sector 16,

SAS Training Institute in Noida Sector 16,

Blue Prism Training Institute in Noida,


siva said...

This blog is the general information for the feature. You got a good work for these blog.We have a developing our creative content of this mind.
Thank you for this blog. This for very interesting and useful.
Java training in Chennai
Java training in Bangalore
Java online training
Java training in Pune
Java training in Bangalore|best Java training in Bangalore

shivani said...

Excellent blog I visit this blog it's really awesome. The important thing is that in this blog content written clearly and understandable. The content of information is very informative.
Workday HCM Online Training!
Oracle Fusion Financials Online Training
Oracle Fusion HCM Online Training
Oracle Fusion SCM Online Training

Sanoritha said...

Hi, Nice Blog for reading this
Digital Marketing Training Institute in Hyderabad
Digital Marketing Training in Hyderabad
Digital Marketing Training in Ameerpet
Digital Marketing Course in Hyderabad Digital Marketing Course in Ameerpet Best Digital Marketing Course in Ameerpet
best digital marketing training institute in Hyderabad
Best digital marketing training in hyderabad
Best Digital Marketing Training in Ameerpet
Best Digital Marketing Course in Hyderabad
Best Digital Marketing Course in Ameerpet

Sanvi said...

Great post and informative blog.it was awesome to read, thanks for sharing this great content to my vision.

CEH Training In Hyderbad

shivani said...

Workday HCM Online Training
Oracle Fusion Financials Online Training
Oracle Fusion HCM Online Training
Oracle Fusion SCM Online Training

DevOps Online Training said...

I am Here to Get Learn Good Stuff About DevOps, Thanks For Sharing
DevOps Training
DevOps Training institute in Ameerpet
DevOps Training institute in Hyderabad
DevOps Training Online
DevOps Training Institute

shivani said...

The blog was absolutely fantastic! Lot of information is helpful in some or the other way. Keep updating the blog, looking forward for more content...Great job, keep it up
Workday HCM Online Training
Oracle Fusion Financials Online Training
Oracle Fusion HCM Online Training
Oracle Fusion SCM Online Training

shivani said...

Astonishing web diary I visit this blog it's incredibly magnificent. Strangely, in this blog content made doubtlessly and sensible. The substance of information is instructive.
Oracle Fusion Financials Online Training
Oracle Fusion HCM Online Training
Oracle Fusion SCM Online Training

shivani said...

Amazing web journal I visit this blog it's extremely marvelous. Interestingly, in this blog content composed plainly and reasonable. The substance of data is educational
Oracle Fusion Financials Online Training
Oracle Fusion HCM Online Training
Oracle Fusion SCM Online Training

Unknown said...

Really nice posts are sharing.
aws training in hyderabad

shivani said...

Excellent blog I visit this blog it's really awesome. The important thing is that in this blog content written clearly and understandable. The content of information is very informative.
Oracle Fusion Financials Online Training
Oracle Fusion HCM Online Training
Oracle Fusion SCM Online Training
oracle Fusion Technical online training