The Problem: iPhone UI Navigation I want to have a TableView that works INSIDE a TabView.

Slides:



Advertisements
Similar presentations
Prof. Yitzchak Rosenthal
Advertisements

View-Based Application Development Lecture 1 1. Flows of Lecture 1 Before Lab Introduction to the Game to be developed in this workshop Comparison between.
Drupal Basics Part 3 Create a new page Main tabs menu Using the theme Agricultural Communications Services Integrated Media Training Sessions
Table Views UITableView. Overview Table view basics Tables display lists of data Each item in a tables list is a row Tables can have an unlimited number.
Fathom Overview Workshop on using Fathom in School Improvement Planning (SIP)
Detecting Collisions CSE 391 Fall 2012 Tony Scarlatos.
Creating and Editing a Web Page Using Inline Styles
Using Eclipse. Getting Started There are three ways to create a Java project: 1:Select File > New > Project, 2 Select the arrow of the button in the upper.
Create a calculator– 2nd iPhone programming exercise CSE 391 Fall 2012.
Word Processing First Steps
View Controllers (second part) Content taken from book: “iPhone SDK Development” by Bill Dudney and Chris Adamson.
Inventory Throughout this slide show there will be hyperlinks (highlighted in blue) follow the hyperlinks to navigate to the specified Topic or Figure.
Drawing forecast charts. Open NeLant basic map area.
Let’s Make a Movie Editing, Special Effects, and Movie Finishing.
Power Point Presentation - Advanced Julia J. Stahl Distributed System Specialist.
Storyboards Managing multiple views. Overview Create a single view application Give the project a name and click “Use Storyboards” and “Use Automatic.
Introduction to Computers II A Presentation of the Elmhurst Public Library.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
Google Earth How to create a Google Earth Tour and place it in your Wiki.
Chapter 9 Macros, Navigation Forms, PivotTables, and PivotCharts
Adding Websites to a Folder  Putting sites into an already existing folder Putting sites into an already existing folder  Adding an image on the icon.
Sprite Animation CSE 391 Fall 2012 Tony Scarlatos.
IOS WorkShoP Xcode 4 iOS 5 : “A Primer”. Objective-C iOS applications are written in Objective-C language using the Cocoa Touch library Objective-C is.
Xcode Presentation Tom Pletzke. Creating App from template Launch Xcode Select Tabbed Application.
SQL Maestro Hello World IQ Associates. Contents Initial setup Hello World.
IV.Creating & Editing a Video/Movie. Editing Techniques To open a project On the File menu, click Open Project. In the File name box, locate the saved.
Microsoft Outlook 2007 Basics Distance Learning (860) 343 – 5756 Chapman 633/632 Middlesex Community College Visit
Windows Movie Maker. What is Movie Maker? Windows Movie Maker allows one to…. create, edit, and share your movies right on your PC.
1 The EDIT Program The Edit program is a full screen text editor that allows you to: Create text files Create text files Edit an existing text files Edit.
USER SETUP. 2 This guide will show you how to add a new user or edit an existing one with Mifos X System How to add new user or edit an existing one?
1 Designing with a UIToolBar iPhone/iPad, iOS Development Tutorial.
Dreamweaver MX. 2 Overview of Templates n Templates represent a web page design or _______ that will be common to multiple pages. n There are two situations.
Active-HDL Interfaces Debugging C Code Course 10.
Project Deployment IT [211 CAP] How to convert your project to a full application.
Tabbed Views UITabBarController. Controller Architecture UITabBarController Controls the first view that the user sees The view controller class (and.
Navigation in iPads splitViewController. Overview Create a Master-Detail application Switch Device Family to iPad Give the project a name and click “Use.
2008 Adobe Systems Incorporated. All Rights Reserved. Getting Started with Adobe Presenter Modified by C. Candace Chou.
IOS with Swift Hello world app.
1 NORMA Lab. 5 Duplicating Object Type and Predicate Shapes Finding Displayed Shapes Using the Diagram Spy Using Multiple Windows Using the Context Window.
RIGHT Mouse Button Formatting Cut Copy Paste Save LEFT Mouse Button MAIN BUTTON Single clicks Double clicks Drag Highlight.
View Controllers Content taken from book: “iPhone SDK Development” by Bill Dudney and Chris Adamson.
OneNote 2007 Adding text and images from the web.
Course Summary Xcode & iPhone Simulator
Nav Controllers UINavigationController. Overview Nav Controller basics Like a tabview controller, a navViewController manages views A navigationViewController.
Windows Top 10 Time Savers! Pickens Technical College Business Department.
Table Views UITableView.
HTML Concepts and Techniques Fifth Edition Chapter 4 Creating Tables in a Web Site.
Lecture 10 Using Interface Builder to create Mac Applications.
Pictures, Pictures, Pictures!. Load your pictures:  Open your and save each picture to your computer. I suggest saving to the My Documents or My.
Creating and Editing a Web Page
Creating and Editing a Web Page Using Inline Styles
1 of 6 This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation.
VB.NET and Databases. ADO.NET VB.Net allows you many ways to connect to a database. The technology used to interact with a database or data source is.
Customizing Menus and Toolbars CHAPTER 12 Customizing Menus and Toolbars.
Copyright © Texas Education Agency, All rights reserved.1 Web Technologies Creating a Navigation Bar.
WebViews UIWebView. Controller Architecture UITabBarController Controls the first view that the user sees The view controller class (and xib) that manages.
Go to to register a new accountwww.weebly.com Put in your full name Use your Iona address Use a password that you will easily remember.
Iphone Online Training AcuteSoft: India: , Land Line: +91 (0) USA: , UK : +44.
Views in iOS Mobile apps for iPhone & iPad Telerik Software Academy
Objectives Create a folder in Google Drive.
Short presentation title up to 2 lines
Short presentation title up to 2 lines
EEC-492/693/793 iPhone Application Development
Module 6: Creating Web Pages and Working with Channels
EEC-492/693/793 iPhone Application Development
Lesson 1 - Automating Tasks
EEC-492/693/793 iPhone Application Development
Apple Xcode with Swift Demo
EEC-492/693/793 iPhone Application Development
Presentation transcript:

The Problem: iPhone UI Navigation I want to have a TableView that works INSIDE a TabView

Example: Table View Here Tab Bar Controller Here Clicking any cell navigates to a different “View”

The Solution: Interface Builder or Code Code is more straightforward, but may lead to lots of “setup” coding. I asserted that it was impossible in Interface Builder. I was wrong. We will look at both approaches.

Code Example: 3 Key Lines This is from my “Free Rice” application and builds 3 tabs with 3 views. The “middle” one is a Table View with “child views” - (void)applicationDidFinishLaunching:(UIApplication *)application { tabBarController = [[UITabBarController alloc] init]; aboutViewController =[[AboutViewController alloc] bundle:nil]; aboutViewController.title totalsViewController =[[TotalsViewController alloc] bundle:nil]; totalsViewController.title playViewController =[[PlayViewController alloc] bundle:nil]; playViewController.title UINavigationController *tableNavController = [[[UINavigationController alloc] initWithRootViewController:playViewController] autorelease]; tableNavController.navigationBar.barStyle = UIBarStyleBlackOpaque; tabBarController.viewControllers = [NSArray arrayWithObjects:aboutViewController, tableNavController, totalsViewController, nil]; [window addSubview:tabBarController.view]; }

3 Key Steps Minus “setup” code for each of the Views //Set Up the tabBarController in code tabBarController = [[UITabBarController alloc] init]; //Set Up a Navigation Controller to “hold” the TableView and it’s child views //Note that playViewController is made the “special” RootViewController here UINavigationController *tableNavController = [[[UINavigationController alloc] initWithRootViewController:playViewController] autorelease]; //Put the 3 views (including tableNavController) into the Tab Bar Controller. //Use an Array and place in the order you want them to appear in the tabs tabBarController.viewControllers = [NSArray arrayWithObjects:aboutViewController, tableNavController, totalsViewController, nil];

Interface Builder Example To be fair, there are a number of setup steps in order to use the code. Including setting up XIBs in Interface Builder and building the classes. I didn’t count those steps for the Code Example. 1. New Project 2. Tab Bar Application 3. Call it TabBar Demo 4. Add some icons (if you have them) to the resources folder select copy to project if necessary 5. Delete SecondView.xib from Resources (we don't need it) 6. Add a new "empty" xib to resources. 7. Call it FirstView.xib 8. Add a SecondView.xib in the same way 9. Remove FirstViewController from classes folder (.m and.h)

IB Example Cont. Steps Add a new file to Classes folder 11. Make it a UITableViewController subclass and call it FirstViewController 12. Repeat for a SecondViewController 13. Open FirstView.xib in Interface Builder 14. Drag a Table View from the library to the FirstView.xib window 15. Crtl + click on Table View and connect datasource and delegate to File's Owner 16. Select File's Owner and then click Object Identity "tab" of the "Inspector" 17. Make FirstViewController the Class Identity for File's Owner (selecting File's Owner first is important) 18. Ctrl + click Table View, connect New Referencing Outlet to Files Owner, (select view from the popup) 19. Close the Table View Outlets popup 20. Repeat steps for SecondView.xib

IB Example Cont. Steps (Editor's preference: Close IB!) 22 Open MainWindow.xib from Xcode (will open Interface Builder) 23 Click on the Tab Bar Controller "First View" window to put the right context into the "Inspector" pane 24 On Inspector:Tab Bar Controller Attributes (first tab) select the drop down for First - choose Navigation Controller 25 Repeat for Second 26 In Tab Bar Controller window, click twice on the first tab to bring up inspector where you can add graphics from "image" dropdown 27 Repeat for other button 28 Click "title" and change to First Nav Controller 29 click 2nd button and repeat putting "Second Nav Controller" on this one 30 Click back to the first button (once) and click the "view" in the middle 31 In the Inspector, (first tab) enter the NIB name (FirstView) 32 Click on Inspector's 4th tab and enter FirstViewController as the Class Identity 33 Repeat for second button with SecondView and SecondViewController respectively 34 Check that you have core graphics in the frameworks (should be there by default, but be sure) 35 Compile and run in simulator

IB Example Cont. Step 36 (To be fair, this step is required to code the solution too) 36. Usability requires adding code that does something useful (Implement necessary UITableView Methods in UITableViewControllers (FirstViewController and SecondViewController.) At a minimum: -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {} -- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {} -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {}