View Full Version : iPhone SDK and User Interface
I am designing an iPhone application and trying to find the resolution of all the iPhone user interface elements.
The iPhone screen resolution is 480x320 pixels.
While reading through the iPhone Human Interface Guidelines I'm tying to make sense of the user interface elements.
http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_statusnavmodeswitcher.jpg
For native applications, what are the dimensions of:
-Status bar
-Navigation bar
-Tab bar
-Toolbar
BlackWolf
03-20-2008, 02:52 PM
hi,
first of all, the iphone screen resolution is 320 width and 480 height.
the statusbar is 20px height and (obviously) 320px width.
a navigationbar depends a little. I believe the normal navigationbar is 44px height, but I'm not 100% sure, toolbar should be same. but there is also a navigation bar with a little text over the title, and I'm not quite sure about that.
I don't really know what you mean by tabbar, sorry.
and btw: you don't really have to worry about those. there are controllers for those things like NavigationController and ToolbarController and they handle those things automatically, so your window gets drawn between those. also, you can decide if the statusbar is visible or not by declaring different sizes for the UIWindow object. I believe the two are
[[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]
for a invisble statusbar and
[[UIWindow alloc] initWithFrame:[UIScreen mainScreen].applicationFrame]
for a visible one.
I'm currently in the middle of learning cocoa touch and all that myself, so I'm not so sure on all these things myself, but I guess that should be about right.
edit: oh, I see the picture now. the tabbar is actually called toolbar. so what did you mean by toolbar? :D
Stupid me, I never tried loading the above image in an editor and measuring it (since it is actually 480x320).
Status bar: 20 pixels
http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_statusbartypes.jpg
Nav bar: 44 pixels
http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_navbarnonavigation.jpg
Tab bar: 49 pixels
http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_selecteditemmodeswitcher.jpg
Toolbar: 44 pixels
http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_taskstyletoolbar.jpg
From the iPhone Human Interface Guide (http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/chapter_1_section_1.html#//apple_ref/doc/uid/TP40006556-CH1-SW1) there are status bar, navigation bar, toolbar and tab bar UI elements.
Toolbars: If your application provides a number of actions users can take in the current context, it might be appropriate to provide a toolbar. A toolbar appears at the bottom edge of the window.
Tab bars: If your application provides different perspectives on the same set of data, or different subtasks related to the overall function of the application, you might want to use a tab bar. A tab bar appears at the bottom edge of the window.
Since there is currently no interface builder in the SDK, I'm creating some UI concepts to illustrate my application before actually writing it. I'll also create some buttons that I can copy wherever I need them. My ghetto interface builder I suppose.
BlackWolf
03-20-2008, 03:11 PM
From the iPhone Human Interface Guide (http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/chapter_1_section_1.html#//apple_ref/doc/uid/TP40006556-CH1-SW1) there are status bar, navigation bar, toolbar and tab bar UI elements.
Toolbars: If your application provides a number of actions users can take in the current context, it might be appropriate to provide a toolbar. A toolbar appears at the bottom edge of the window.
Tab bars: If your application provides different perspectives on the same set of data, or different subtasks related to the overall function of the application, you might want to use a tab bar. A tab bar appears at the bottom edge of the window.
Since there is currently no interface builder in the SDK, I'm creating some UI concepts to illustrate my application before actually writing it. I'll also create some buttons that I can copy wherever I need them. My ghetto interface builder I suppose.
possible, but in cocoa they are called differently.
statusbar
http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_statusbartypes.jpg
Toolbar
http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_selecteditemmodeswitcher.jpg
navigation bar
http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/art/ui_navbarnonavigation.jpg
don't really know about the safari thingy. I think this is created manually.
I mean, don't get me wrong, you can call your stuff whatever you like. I'm just saying this is what those things are called in cocoa touch so you don't get confused ;-)
Knowing this also helps me to create the default image on app start.
The iPhone Human Interface Guidelines is for native apps (which would include cocoa). It seems the HIG and the cocoa reference are not on the same page (so to speak).
There is also the iPhone Human Interface Guidelines for Web Applications (http://developer.apple.com/webapps/docs/documentation/iPhone/Conceptual/iPhoneHIG/Introduction/chapter_1_section_1.html)
Safari, camera and email use a toolbar (according to HIG terminology). It appears the photos app uses a custom translucent application control that pops up from the bottom.
Although the phone app uses a tab bar, it might actually be more correct (based on the iPhone HIG) to use a toolbar since the buttons provide unique functions (such as dial pad, contacts and voice mail).
BlackWolf
03-20-2008, 03:50 PM
Knowing this also helps me to create the default image on app start.
The iPhone Human Interface Guidelines is for native apps (which would include cocoa). It seems the HIG and the cocoa reference are not on the same page (so to speak).
There is also the iPhone Human Interface Guidelines for Web Applications (http://developer.apple.com/webapps/docs/documentation/iPhone/Conceptual/iPhoneHIG/Introduction/chapter_1_section_1.html)
Safari, camera and email use a toolbar (according to HIG terminology). It appears the photos app uses a custom translucent application control that pops up from the bottom.
Although the phone app uses a tab bar, it might actually be more correct (based on the iPhone HIG) to use a toolbar since the buttons provide unique functions (such as dial pad, contacts and voice mail).
oooh, I'm so sorry I was just assuming you were talking about native applications. all this, of course, is different for web apps, you are completly right.
in that case your terminology is probably right. sorry about that. but as long as you know the scales of those objects you should be fine :D sorry bout that.
I am referring to native apps, thats what I'm developing. I just mentioned that there is another HIG specifically for web apps (where toolbar is referred to as a button bar).
I wonder what the cocoa api is to create each of these elements are.
BlackWolf
03-20-2008, 04:34 PM
I am referring to native apps, thats what I'm developing. I just mentioned that there is another HIG specifically for web apps (where toolbar is referred to as a button bar).
I wonder what the cocoa api is to create each of these elements are.
oh, alright then :D yeah, there are two guides. they are alot alike but differ in some terminologies.
anyway, the classes in cocoa touch are called
UINavigationBar (the black bar with buttons)
UIToolbar (the top bar)
just take a look in the UIKit Class Reference in the apple developer center. all interface elements are described there.
the statusbar cannot be accessed from cocoa and as I said, what you referred to as toolbar, the safari-bottom-bar, is, as far as I know, no interface element itself in cocoa touch, I think it was built manually :-)
regards
Ok, so now I'm looking at the iPhone OS Programming Guide (http://developer.apple.com/iphone/library/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Introduction/chapter_1_section_1.html#//apple_ref/doc/uid/TP40007072-CH1-SW1).
This guide goes into detail about Toolbars (where the HIG refers to Tab bar). Here's a diagram from the iPhone OS Programming guide:
http://developer.apple.com/iphone/library/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/Art/uitoolbarctlr.jpg
The API seems to refer to it as a toolbar so that too is what I'll refer to it as. It's also much more flexible as it can use badges and be customized (by allowing items to be dragged to it).