Basic iPhone App w/ Thumbnails, Full Images, Video - iphone

I'm trying to determine the best starting structure (navigation, windows based, something else) for my iPhone app. I'm a complete noob with everything Apple (just got the mini a couple days ago).
I currently have three apps on Android and want to port to iOS. The apps are very basic. Here's a quick description with fake examples.
1st Screen - 2 Buttons (Cat / Dog) - Users selects one (Dog)
2nd Screen - 6 thumbnails of Dogs (all visible on screen) - User selects one.
3rd Screen - Full image of user selected thumbnail. Full image is clickable.
4th Screen or pop up - If user clicks full image, a 3 second video clip (mp4) plays. After playing, automatically goes back to Full Image screen.
In XCode 4, what would be the best starting point? Navigation, Windows, Single View, or just blank and hammer it out?
Ideally, I would like this to be dynamic where I only create the basic views and variables based on the user selection drives what is displayed.
Any help is greatly appreciated. Thanks!

I would go with navigation based app but hide the navigation bar or at least the back button so that the user can't go back on their own. This will work well because you can get the nice slide animation between screens. And you can use multiple views easily so you don't have to worry about trying to cram all of your stuff into one view and animate it.

Related

Submitting an app only for iPhone 5/5s/5c

I've worked on my application for a couple of months, I hired a designer to do the UI and every screen in the app is based on 3 main elements - top bar, bottom bar and content.
I tried to use auto-layout and setting the top and the bottom bar was a piece of cake, but the image I use for a background in the content view shouldn't be resized (it's based on circles and they turn into ellipses).
Is there a way for me to submit the app only for the iPhone 5/5s/5c?
You can't specify device types within the iPhone category. Your best bet is either to design a layout that can work for both screen sizes, re-design the layout so it automatically displays a "4S version" and a "5 version" depending on the user's device, set it to a ScrollView so the user just scrolls up and down to see the full page, or design it so the individual elements can be cropped (or squeezed together) on the smaller screen without actually resizing the individual pieces.

iPhone auto-zoom while interacting with selection list

We are working on a mobile website framework and recently found the below issue on iphone.
Issue : when I visit the form elements using the iPhone and select the dropdown lists, the display zooms in a little to make the list visible. When I select an option and tap Done, the display remains zoomed; I have to pinch to get back to how it was.
Is there a way to make the screen scale back to the proper size?
Thanks / Lokesh

Which Launch Image Should I Use?

I'm building a game for the iphone, and the main window displays an image in the background describing the game, and I have few other layers of images which are the buttons such as Start New Game, Options and Help.
Should the launch image be only the background image describing the game without the extra image layers or should it be image including the other layers which are Start New Game, Option and Help?
Thanks.
The bit covering launch images can be found here. Below is an example launch image (left) provided by Apple.
Their docs specifically site concerns about localization, so it's probably best to do without the text and provide an image that just has your background chrome for the view.
The launch image should give the illusion of a really fast launching of your app. So the better image in your case is an hybrid of your proposal.
You should have the background image describing the game with the extra image layers without the text inside your buttons (Start new game, etc.) If you include the text, the user could think that your app is loaded and would tap on it.
Hope this helps
All the Apple guidelines on launch images are available here (scroll down to "Launch Images" section). It seems like the convention is to show buttons but not table view data, based on the examples show and from observing other Apple apps.
It's probably up to you to determine which looks better. I have seen many apps on the app store that totally ignore all of these things you aren't supposed to do:
An “application entry experience,” such as a splash screen
An About window
Branding elements, unless they are a static part of your application’s first screen
So I don't think it's that important for App Store acceptance, but it is very important for user experience.

How to show images in grids like iphone photo gallery does on iOS

I'm working on an iphone app and want to have a page showing multiple images in multiple grids (each grid has a image that will response when a user tabs on it), like the default iphone photo gallery app would show image thumbnails.
The first thing came to my mind was tableview with customize cells. Each cell would display some buttons and each button represents an image and set the cell as non-selectable. So the user can tab the buttons (the images) but not the cell itself. But is this the best way? Is this how the built-in photo app does it?
Thanks a lot
There are several open source grid views.
AQGridView
Also previously answered here:
Previous Answer on SO
You might want to wait for iOS 6 (hint, hint).
Login to developer.apple.com and look at the WWDC 2012 Videos (i.e. What's New In Cocoa Touch).

iPhone App Tutorial/Help Screen UI

What is the best way to create tutorial or help screens that can be viewed in an iPhone App on launch?
I'm debating between using two paradigms:
Edit a screenshot of the app with an image editing program to add static help text. Interaction is tapping or scrolling through the tips. This involves creating a custom UIViewController to advance to the next help screen.
Create a custom iPhone UIControl on top of the App user interface that can be tapped to advance to the next tutorial tip. The application will transition between the modes and will be active, rather than static. It involves adding hooks into the App's custom ViewController's to handle "TutorialUIControl" objects.
Here's some screenshots of the application that I need to make help screen UI for, it's an application that creates artwork. More App Information
Screenshot 1: View mode that allows viewers to scroll through an image list, like the UIImagePicker, but for custom image collections.
Screenshot 2: Action mode - allows viewers to select images to save to the "My Saved" album from the active art generation album "My Evolution" or evolve images using sexual/asexual image reproduction.
The "right" answer really depends on the application you are designing. I would highly suggest getting as many apps as you can and looking at how they do help. See what works and what doesn't and think about how that is related to your own design.
In my app (a game) I chose to build a set of static images that could be scrolled through to provide detailed help (based on Apple's sample code). But, I also built an interactive tutorial that plays the first time you run the game. I also pop up a welcome overlay the first time the app is run and suggest what button to press to start a game.
It also helps if you test your tutorial with a lot of different people. After several designs with things too complex, I boiled down my instructions to something extremely simple: "Press the green buttons", and then built up from there.
You can easily store a preference to say whether the app has been launched before, and if that entry is blank you run the tutorial again.
You can create an HTML tutorial that you view through a UIWebView. In on of my iPad apps, I just made a large image that I presented modally with images and text explaining how to use the app.
For iPhone, the best way to include a "How-To" tutorial for your app would have to be a web document, seeing as how you can add images and formatted text.
Alternatively, You can add more views to your controllers with transparent backgrounds and animated buttons and text, for a more interactive feel.
To answer my own questions many months later.
I revamped and used WEPopover to show my help popups, as seen in the iPhone/iPad App, Wallpaper Evolution Lite. The help disappears only if tapped or the button it was attached to was pressed. Using this flow I could highlight a series of buttons to the user.
I added help images within the application to highlight interaction behaviors with the content. The tap, zoom, and drag images are fully interactive.
As #WrightsCS mentioned HTML is another avenue. I use the UIWebView to provide a more in depth help/tips screen with contact information.
In my upcoming app, I'm making use of a paging UIScrollView with help content highlighting app features. The help screen is loaded on the first start of the app, and is accessible through a help menu option.
Here's my fork of the WEPopover github project: https://github.com/PaulSolt/WEPopover