What is the best way to implement a look and feel similar to the PPD Clinical Trials Mobile app (allows search for clinical trials) where it appears they have implemented a UINavigationController and UITabBar controller as overlays over the MainWindow and a high res background.
Also as a follow up to this question is there anywhere that has some stock iPhone 4 graphics (buttons, icons, and especially backgrounds) that can be used for mocking stuff up?
EDIT 0: By the way, I don't know that they use a UITabBarController for the bottom, but from all indications they do use a UINavigationController up top. It behaves as you would expect.
It seems to me that the PPD Clinical Trials Mobile app is composed of the following elements:
a modal view controller on top of the background;
the modal view controller has got a frame smaller than the screen size;
the modal view controller contains a UINavigationController;
the effect of transparency is obtained by setting the alpha property of the views inside the modal view controller to something below 1.0 (which means opaque).
Stock graphics/components:
http://spoiledmilk.dk/blog/iphone-ui-design
http://www.teehanlax.com/blog/iphone-gui-psd-30/
Icon sets:
http://glyphish.com/
As for the screenshot, I reckon you could accomplish it's contents in the following way:
Background: Static image, created in Photoshop or similar (pixlr.com as a great free online alternative)
Navigation bar: Overridden the default UINavigationBar and set the frames of the components differently.
Selection menus: Overridden default class objects again.
Hope this was of some help!
Related
All my views/pages in apps so far have been full screen UIViewControllers that i push and pop from the stack.
I see some apps create a new view/window that appears about the 1/3 the size of the full screen on an iPad, containing tables of items to select or other UI elements. They are commonly used to allow users to filter the current view they were on.
Seeing them in apps, I guess that they are just adding a UIView to there current screen and change its frame depending on where on the screen they want it to appear.
Or am I wrong? Is there another/better way to do this?
I guess you are talking about UIPopovercontroller. There are several tutorials to build the same.check this. Hope that helps you.
It's a little unclear from your question what the view looks like.
If the view is "attached" to a UI element (has a little triangular arrow connecting it to, e.g., a button) and goes away if you tap outside it, then it's a view presented from a UIPopoverController.
If the view overlays everything and dims the content behind it, is likely a model view controller presented with a presentation style of ether page sheet or form sheet.
Both are common and easy to set up. See the class documentation I have linked.
In most cases, these are probably normal modal view controllers whose modalPresentationStyle property is set to either UIModalPresentationPageSheet or UIModalPresentationFormSheet.
Yes you can make your own UIViews and just add them as subviews. Another option for iPads specifically is with the UIPopoverController class.
I'm writing an iPhone app (which will be my first ios app) that has about 50 screens, each of which has the same background - where the background is an image covering the entire screen real estate and another image at the top as a banner.
Each screen will have some text along with 0, 1, 2 or 3 buttons appearing beneath the banner image.
What is the best design for putting this together?
The options I could think of were (in every each I was planning on having a root controller which is responsible for displaying each view as appropriate).
1) Have 50 separate screens as xibs (and associated view controllers), each of which contains the two background images plus however many buttons each particular screen needs.
2) Have 4 superclasses as xibs - (representing no buttons, 1 button, 2 button, 3 buttons) and have each of those contain the background images and as many buttons as appropriate. Then have 50 subclasses which simply just set the text and button content as appropriate using the superclasses instance variable outlets.
3) Have the root controller have a view which contains the two background images which is there permanently, and each of the 50 views displays its text and buttons on top of that.
4) (If this is possible, I need to check if a window can have images). Same as 3, except the root controller doesn't have a view, the main window displays the background images and each class displays its text and buttons on the top of this. So each view controller would have to load and display the text and button objects using code (in which case there's not much point to have xibs for them).
Is there another solution? Is one of these the "best" solution?
If I went with 3 would it not be possible to define the position text and buttons in a xib? (because in order to do so they would need a parent view in order to position them in interface builder, but if that were the case then when the view is drawn the background wouldn't be visible).
If 4 is possible, then the root controller has no view, therefore does it still need to be descended from UIViewController, or could it simply be descended from NSObject?
I think at the moment I am leaning towards option 2) as that way I can design all the views visually as xibs, but there are only 4 of them. Unless there is a better more elegant solution.
TIA
What you can do, is one XIB with all the buttons and then you would set then hidden accordingly. Although it would tie you up a bit. The 2) option is more flexible. The 3) is ok too. You could have one rootViewController, just to hold the images and then you could something like this:
[rootViewController.spaceForMyChildView addSubview: myNewViewController.view];
The "spaceForMyChildView" would be a view that would hold your child views.
I would do fusion between 2) and 3) probably.
UIWindow inherits from UIView, so can have anything within it. So (4) is feasible, though you're starting to get into tricky water if you want to support any sort of view rotation.
I'd think an inverted (2) would be the easiest thing — have a single superclass that upon viewDidLoad adds the background and top banner programmatically. Have your specific controllers inherit from that and design them graphically to contain whatever you want, mindful that the image and banner will subsequently be added.
That said, if your views are really as simple as a single text area and up to three buttons, always with fixed positions, then it sounds like a single view that repopulates its fields from a data source, as Jacky Boy suggests, is probably the smartest thing.
I am doing a lot of researching lately about how to get a different looking with nice effects UITabBar on my iPhone app, but unfortunately I am only finding things on how to replace background color etc.
Well, I've checked out this app called Momento which is pretty cool and presents a very slick tabBar:
So there are a couple of elements here I would like to ask you guys if you could help me by giving me the right directions on how to get a similar effect :)
Arrow above items: as you can see this app has this animated arrow that runs above the selected item with a very smooth animation.
Selected Stated of the item's image is not that blue-ish default one neither the default state which displays in a different shade of brown and gray version.
nice Items separators with beveled vertical lines.
different background image for the tabBar
different height for the tabBar
At this point after some research I am able to set the height and background image by subclassing UITabBarController but I'm still not sure on how to accomplish the other items specially the first one related to the nice arrow effect.
How do I do this? Please clarify what can or can't be done by subclassing the UITabBarController and specially if can be done in Interface Builder.
There's a project on github called BCTabBarController that aims to mimic the tab bar used in Twitter for iPhone. It's got some of the things you're looking for, and should give a great starting point.
Both of these are good answers, but both libraries have problems: BCTabBarController doesn't know how to create the "blue" highlighted version of a tab bar icon; and iDevRecipies doesn't send events to child viewcontrollers nor resize the navigation bar on rotate.
Be warned: custom nav bars are a lot of trial-and-error debugging (as I have found).
Simply use a UIView with TabBar width and height.Add custom background image and custom buttons on the view.Set the fileowner of the view as AppDelegate.Now you can simply connect the IBActions with the buttons.The Custom view can be placed over the tabbar by addSubView to the TabBar controller's view.You can switch between viewcontrollers by using the setSelectedIndex method of tableviewcontroller in the button action.
I'm trying to pop up a UIWebView on iPad with a web site that is specifically sized for the iPhone (320x480). I want the web view to be centered, and transition in using a zooming animation. Other apps have this functionality, but I can't seem to find out how to do it. I've tried various combinations of presentation & transition style, but no matter what I do, the web view takes up the entire screen and slides vertically to cover the screen. I've made the web view 320x480 in IB, and am using UIModalPresentationStyleFormSheet, which should make it at least slide up into the center of the screen using a small window, but that is not occurring.
anyone know what's wrong?
Are you setting the property of the parent UIViewController or the modal UIViewController? Because you should be setting the properties of the modal UIViewController before presenting the controller instead of the parent.
This might be no help at all because you're doing the right thing, but it was the first error I made when starting to use MVCs.
maybe any of the autosize property is set. just do one thing bind your webview with the code and through code try to set the frame. Hope it will work as it worked many times to me when i faced similar types of problem.
hAPPY cODING...
I have been working with a iPhone app that I would like to have switch views like the Palm Pre does for multitasking. I know the usual way of switching views by using the black bar at the bottom of the app but the app I am working on does not lend itself to having a big black bar in the way (see attached picture #1).
I guess my question is, how do I shrink the current view (Current Location window) and show other views on the sides? (see attached picture #2) Then be able to swipe left and right to view other views. I have no idea how to do this and would be eternally grateful if someone could help me out with this.
http://www.threepixeldrift.com/images/deep-storage/webOScardapp1.jpg
http://www.threepixeldrift.com/images/deep-storage/webOScardapp2.jpg
The architecture should be similar to that of NavigationController: you have a number of ViewControllers each responsible for one card in your app. Then you have a 'super-controller' which controls these ViewControllers, by adding and removing their controlled views from the superview when necessary.
You'll need to use CoreAnimation and write the animations yourself.
i would use a UIScrollView and each card can be a small view that is shown by setting the contentoff set.