Visualisations of UIKit View Classes and Other iPhone widgets - iphone

I'm slowly working through the iPhone Application Programming Guide and although it's been great I was wondering if anybody has seen any resources that match class names/widgets with a visualisation/diagram.
For example when I'm reading about Containers and UITableView's it'd be very helpful if I could see what the widget actually looked like. Thanks.

Once you get started with development, the UICatalog example project can also be very helpful. It shows each type of UI element (buttons, sliders, images, etc...) and you can look at the source to get a feeling for how it is used.

You can see how the controls look like in interface builder. You won't see the exact classname, but it's pretty straightforward. A progress bar is a UIProgressBarView, a button is a UIButton, etc.

Related

How to implement Spotify-like iOS app sidebar feature

I've already implemented a sidebar like that in Facebook/Path apps with ECSlidingViewController but I've noticed that Spotify app it's a bit different and has a very slick effect. The sidebar is not already full visible but it slides and show the icons as more as you swipe with your finger. How to animate the sidebar in this way?
Here an image for a better explanation.
Take a look at MMDrawerController https://github.com/mutualmobile/MMDrawerController
It has nice sample app and allows custom sliding effects, including the one you are looking for
There are many such libraries available to implement the behaviour you have asked for. I would recommend ECSlidingViewController since its easy to use plus it supports StoryBoards:
ECSlidingViewController
As i said there are a lot of different libraries to implement the same thing. You can also check the link HERE that contains a whole list of similar libraries.

How can I make a grid similar to iphone/ipads launcher screen?

I have seen a few grids made with UITableView but I don't really like how close together each cell is to the other. If there is a way of creating a grid system like the home screen on an iphone (the screen after it is unlocked) if would be great. I don't need an exact solution but a point in the right direction, maybe a set of libraries to look through would be great. I am running xcode 4.4.1
Thanks!
The key is UIScrollView has a paging mode (since could have more buttons than fit in the view). It's covered here's in Apple ocs:
http://developer.apple.com/library/ios/#documentation/WindowsViews/Conceptual/UIScrollView_pg/ScrollViewPagingMode/ScrollViewPagingMode.html
If you use that, each 'page' would have n buttons/views that when clicked would call a protocol/delegate call back for the consumer with the data to handle and it would evenly layout the UIView/buttons across that page view. Contact me if you want my sample.
You probably don't want to require iOS6 as a minimum requirement but if you do, you can do as H2CO3 suggested in the comment and us UICollectionview. Here's a tutorial: http://www.raywenderlich.com/22324/beginning-uicollectionview-in-ios-6-part-12
There's also some open source launchers that you can look into their code. Here's some (I'm sure there's more).
http://www.cocoacontrols.com/platforms/ios/controls/sespringboard
Code is at: https://github.com/sarperdag/SESpringBoard
Also: http://www.cocoacontrols.com/platforms/ios/controls/openspringboard
Use UICollectionView. You can create grid type views using that. It is available in iOS 6.
If you can target iOS 6+, use UICollectionView. It's one of the best new things in iOS for years and it will be as important as UITableView.
The layout you're asking for is only a few lines of code.
NSHipster has a good explanation of UICollectionViews and Ray Wenderlich has a good tutorial.
(There's lots of example code out there, but here's a very simple example project I did recently for another question involving UICollectionViews)

How to make iPhone app "skinnable"?

I was asked by a client to make a "skinnable" app and I don't really know what that means.
I googled like crazy and I didn't found a clear answer or an example.
If anyone has a clue about this, any tip would be appreciated.
Thanks.
Generally this means the app will allow the user to choose different looks for the UI, each of which will have a different color scheme, feel, etc.
What I actually did with my project. I decided to use multiple storyboards to give me greater control over the entire UI and UX of each theme. I programmatically link them all together via a master storyboard that links them all together. That's what I did, and it works very very well. Performance is great, while still maintaining high level of fine grain control over each theme. You can even keep your Header and Implementation files the same for individual view controllers, just so as you keep the names the same on the storyboard.
So for instance, one of my apps that I'm working on called Jam-mout (A music player) has multiple high quality themes. (Image attached). Each theme has it's own storyboard.
For iPhone apps, where the majority of the GUI design is provided by the operating system, you could do it by setting custom Navigation bar background images, custom button graphics, and different fonts/sizes/weights and whitespace. Make sure you're working with a designer who's familiar with the iPhone GUI (if you're not working closely with a designer this is going to be a nightmare).
I recently put together an app for a client who wanted a heavily customised GUI: http://itunes.apple.com/us/app/gogoparis/id428497937?mt=8. A 'skinnable' app would have several sets like this, so the user could choose between several different overall styles. (I hope your client has an enormous design budget!)
my post here should help you get started:
What is the recommended method of styling an iOS app?
if you need live theme changes, each theme in this example could post notifications when the user selects another theme (or skin) - then you can update either the theme instance itself.
alternatively, you can create identifiers for themes which are mapped (NSCFDictionary) to a central theme factory. an example identifier for a specific view for use with the theme factory could be a string MONImageSelectorTableCellThemeIdentifier.
an example manager/factory which handles all theme loading and vends references to themes:
#interface MONThemeManager : NSObject
//...
- (MONTheme *)themeForCurrentlySelectedSkinForViewWithIdentifier:(NSString *)identifier;
//...
#end
beyond that, it's hard to answer your question in more detail without knowing your requirements. the implementation of skinning an app can range from very simple to very very complex. good luck.
Already some good answer here, but I'd add that if you use a ui toolkit such as Three20
you can skin everything using CSS as you might for web pages.
I do realise this is an old post, but I thought I'd share my penny on the matter:)
To make any Cocoa app skinnable you need you think of 3 aspects of the app:
1) Uniformity: By this I mean that on all windows, views (including buttons, text inputs etc...) you want to have a 'standard' that will apply throughout the app. This is the first thing you need to look at. Although iOS and OS X alike already have 'themes' as to put it i.e. Apples default way of shading and laying things out, you can override these (refer to the individual view / window etc... documentation.
2) Performance: With skinning etc... performance is always an issue when it comes to writing your own drawRect etc... methods. The code apple have in place for the 'default' is already optimised, so you need to keep a close eye on the performance of the app whilst you are doing this. Good examples are: Do I use an image with a gradient, or do I use NSGradient? Both of which have performance issues when it comes to rendering them, but it's a question of which is the better of the two
3) userDefaults: This is generally the area where you'd be getting your 'skin settings' pulled from. userDefaults is basically where you store all of the information which you generally set in a preference pane.
If I were you I'd look into the class reference of it:
http://developer.apple.com/library/mac/#documentation/Cocoa/Reference/Foundation/Classes/NSUserDefaults_Class/
Furthermore, here's a nifty example of using userDefaults:
http://mobile.tutsplus.com/tutorials/iphone/nsuserdefaults_iphone-sdk/
Hope this helps!

Building a complex view with Three20 - resources?

I'm using three20 for most of my iPhone app.
One of the views I need to create is relatively complex. It needs a top bar (under the nav bar) with some controls and label, an image view below this bar (which occupies most of the body) and another bottom bar with more controls and labels (above the tab bar control).
I don't have much UI experience - my only experience with anything UI is laying stuff out using CSS, etc on websites. Apple's online doc seems to assume that the reader knows a bunch about rectangles, layouts, frames, etc or is using InterfaceBuilder. And three20 isn't too well documented either.
So my question is:
Is it possible to design something like what I describe in IB and then still have a three20-based app use it? If so, any tips/pointers on how would be much appreciated.
Can you point me to some documentation that explain how views/controls etc are rendered. I'm pretty sure I can figure it out if I find some decent explanation/tutorial for it. (Book recommendations/online references work too)
You can use IB with Three20. It's not recommended, but you can call the -initWithNib method instead of the default -init method in your URL mapping.
ie:
[map from:#"tt://dashboard/(initWithNib:)" toViewController:[TableViewController class]];

iphone application layout

I'm trying to get started with an iPhone application, I had a look around at other questions but i'm still sorta stuck so hopefully someone can help...
First thing is I'm totally confused with the whole view concept, I'm more used to visual studio so I'm going to use the term 'form' to describe what I have in my head.
I want to achieve a home screen in an application with say 9 icons (much like the iphone home screen) which each lead to a different 'form'. Each form may have a different function so say one might be a simple calculator, one might play a video etc.
How do I do this, its destroying my soul trying to do something so simple... If you guys even have any links to get me on the right track it would be greatly appreciated
I suggest you take a look at the Stanford iPhone Programming Course. If you don't have the time to look through it all, I reccommend at least Lectures 5 and 6 about Views and ViewControllers. The slides are quite instructive and they come with video presentations that should help you get on your way in about an hour.
Apple's samples are a great place to start. There are some simple ones that can show you how views and view controllers work.
Also, in Xcode, when you create a new iPhone app template, that template usually has enough code to display a view, and sometimes a flip-side view or more. Sometimes, you should stop reading, and do.
I had the same weird learning curve as you, as things don't initially seem to make sense but they do - and once you've got your head round them they make perfect sense trust me!
Your 'forms' are viewControllers in this M-V-C land, they control all the 'view' (which are controls or any object which can be seen) within them. Normally they are loaded from a Nib (design from the interface builder), but don't have to be.
The way I would go about your problem is to use a navigationController as the base to handle all of your view controllers.
A navigation controller needs a rootviewcontroller to start so this will be your desktop Viewcontroller. I'm not sure how you are planning to populate this but all the icons will need to be stored in some kind of array. I suggest you use a simple UIButton. When then button is pressed you then alloc and init and push the required view controller.