iOS/IB view layout template/inheritance guidance needed - ios

This is a "sort-of" question, that I am just hoping some astute individual can give me some guidance on.
I have an iOS project that has numerous screens (ViewControllers) that all share a top and bottom bar (an UIImageView with a button on each). I am using a storyboard because I want to be able to easily visualize the entire graph of screens.
Is there any way in Xcode 4.5 to make a sort of UI Template, or somehow subclass the "view" in IB so that whenever I make a new screen (VC) it inherits the top and bottom bars and the associated functionality?
I was hoping if I created a UIViewController subclass, put an IBOutlet for each ImageView and Button into it, and the associated IBAction for the two buttons, then subclassed it when making my VCs I would be able to link it all up, allowing me to only have to duplicate the visual elements on each screen. But alas, when I do that I get "not KVC-compliant" errors on the subclass (when linking it to the existing outlet and actions).
The other thought I had was to programmatically add the visual elements from a superclass, but then, for me, the problem is in IB I have to remember to account for the missing space at the top and bottom, which I will have to live with if that turns out to be the only option...
Is there some way to do this that I am not seeing or do I really have to code this all over and over for each screen?
Any insight/input/ideas greatly appreciated.

Related

Multiple Photos in slideshow type display within viewController?

I am new to Xcode (started a few days ago).
I'm trying to find a way to get a few photos or videos in a display where the user can scroll or tap through as they desire. There will be multiple viewControllers each with a different set of photos.
Is there any existing UI type data types I can just drag and drop to make this work? Or is this out of range of the capabilities for someone not using code specifically.
I know Java, C, C++, MATLAB, etc. but never have toyed with Objective-C until now. Point being, I should be able to follow any logic you can throw at me, but I'm unfamiliar with the GUI and layout of Xcode as a whole.
This is what I currently have.
This is what I want. Perhaps with functionality to tap to full screen the image or swipe to go to another image. (This image was made with photosop. I don't actually have the picture file in Xcode because I don't know how)
SOLVED: Placed desired images in "Supporting files" content folder inside Xcode. This allowed me to select which photo I want displayed in which ImageView. To fix the proportionality issue where photos in Simulator are far too large, I simply added height and width constraints along with some other centering aspects and got the desired result.
Add UICollectionView in your view and set flow of collection view is horizontal make cell size that you want to keep.
Take a look at UICollectionViewController where you can display multiple cells with embedded views for your images, and consider segueing between them via a UINavigationController.
Edit: Now that you've added screenshots, I'd recommend using a UICollectionView embedded on your subclass of a UIViewController instead of a UICollectionViewController. This should give you more flexibility.

Storyboard of a mockup

I am working on an e-commerce based app, and the designer has passed on the mockup to me. !
This is the mockup the designer has passed.
I am working on storyboard of this mockup and I have managed to get to this level as of now.
There are several views and features which cannot be included in this storyboard now because of the limited space. I know the designer has passed on me the rendered view, which can be seen on scrolling the app.
I wonder which could be the best approach to include all these views in a single storyboard or render them in a single view.
I have looked onto using xib files and calling them from my viewcontroller class, which could be a possible solution. But, I want to know, what could be the best solution?
Best solution is use Storyboard so that you have all screens at one place. But keep one thing in mind that start doing the whole project in XCODE 8 storyboard (Because XCODE 7 and 8 storyboards are not fully compatible with each other). So that you get compatibility with previous iOS versions also (< iOS 10)
Now as far as design is concerned, I would like to suggest you use autolayouts and proportional layout.
your View controller will always have self.view. Start on that view. First add navigation controller (with root view controller as your first prefered view controller on app start) or simply add one toolbar. Then add one UIScrollView to whole remaining space. Then start with your design inside UIScrollView. Don't forget to provide contentSize of UIScrollView.
For any help, feel free to ask.
The best solution would be using a tableView with multiple prototype cells for this kind of problem. Well, going through the concept as mentioned, I could easily scroll in the storyboard and maintain my design as per the mockup.

How to decide what view should be on top in Interface Builder

So i have a problem that i know how to solve but not in ann efficient/fast way. Look at this example that i have right now:
So I had made all the outlets before I decided that I need a background image. You can see that I marked them but they are under the UIImage. I can solve this by first removing the image and dragging all the views to another view controller then adding the UIImage and putting the views back on the ImageView but this is time consuming as I have other view controllers. Is there another way to move views up/down?
Think of the views as being listed in the order they are placed on top of others. You start at the top of the list, adding views, and then add the ones next on the list on top, one a time. That's how I remember the ordering.
As Luk2302 says, you can simply drag your views around inside your storyboard to change their order.
Note that there is also an "arrange" sub-menu in the editor menu for IB. You could select your background image, then pick editor>arrange>send to back to move the background view to the back of the stack of views.
P.S.: Don't call them outlets. They are views. Views can be linked to your code using IBOutlets, but they don't have to be. Plus other non-view objects like constraints can also be linked to your code with IBOutlets
Its simple.what you have to do is simply drag you imageview to the top of the view(then it becomes the first IBOutlet you added). I have added some images, then it will easy to understand.
this is your situation
this is the solution(drag it to the top of the view)
then your other IBOutlets come to the front like this

Xcode 5 - Tabs at the top

I wanna put "tabs" at the top of the view and I don't find in object library... does anyone knows? Thanks for the help.
Examples here:
http://imagizer.imageshack.us/a/img829/1808/47bw.jpg
http://imagizer.imageshack.us/a/img822/7048/oaum.jpg
There's a difference between navigational tabs like the second screen shot has and just a "tabbed" division of information like the first. The first one stays a single screen while the second one could also be considered an application that has different subviews under that tabbed navigation. The first screen is trivial and you should do this with UIViews with UILabels nested into them.
The second screen is more interesting. I don't think it's a good idea to use the built in tabbed navigation handlers because it's just not a good fit for that kind of layout. You could do it but you're writing a lot of code to get it completely like you want it. But if you would want to you could divide the screen with custom containers and trigger segues in the bottom part from the UIButtons you put on top and it's a pretty good way to handle those kind of segues from within Interface Builder.
More information:
http://sandmoose.com/post/35714028270/storyboards-with-custom-container-view-controllers
https://developer.apple.com/library/ios/featuredarticles/ViewControllerPGforiPhoneOS/CreatingCustomContainerViewControllers/CreatingCustomContainerViewControllers.html

Hiding some views in the interface builder

Is there a possible way to hide some views in Interface Builder? I don't mean to hide it when the app launches, but to hide it just in Interface Builder to be easy for me to see other views.
Actually I want to do that because my xib file has a lot of views and it is hard to see !
Admdrew,
Unfortunately there is no way you can do that in storyboard. The only thing you can do to view the Views which is overlapped by others, is drag it to the top.
For example, I drag PickerView to the red line to make it to the top, then edit PickerView, and drag it back to the previous position when finish: https://www.dropbox.com/s/e18nmr9mya9y0s8/DizSfOW_3F3a_wV4YVXgFk__h0PoFWbd3rs1HbcTN-4.png
I prefer to use many View Controllers, it's better for your performance. But I must say that in some cases, you still have to use many UIView place on top of others, and I think this is the best way to edit each View.
Cheers,
UPDATE AUGUST 17, 2015
Since XCODE 6.x already added in the feature called "Installed" in the right panel, so now you can easily disable the upper view for temporary by uncheck "Installed", then do-whatever-you-are-planning-to-do with the lower view. Just remember to return it to be checked after you finish.
Step by step following this:
1. Click to select the upper view.
2. On the right panel, look for "Installed".
3. Click to uncheck it.
That's it!
Cheers!
You'd use the Hidden property in the Attributes Inspector. But I'm not sure is this is what you'd like to achieve.
By doing that you'd need to set the attribute to Hidden = NO before running your app.
I think that using groups of views could be also a better way to handle lot of views in the same xib files. You could do that Editor -> Embed In -> View. Selecting all related views and making groups could help you to work with them easily by hiding or moving some groups.

Resources