For the past few weeks, I have been checking out a website called Binpress. Which is the commercial alternative to CocoaControls. The site is still new but it already has several components in it and not limited to just iOS stuff. They still have a lot of kinks in the publishing process, however, I find that the quality of components here are slightly better than those in CocoaControls, perhaps because the authors spent more time to polish up a paid package. However, I have to say this only applies to Obj-C components, the other languages are still behind CodeCanyon. Their commission is fixed at 30% though, much better than CodeCanyon which takes frickin 50%-70% of the sales!!!
So I also decided to try writing a commercial component that could be huge time-saver for iOS beginners. Given that there are a lot of companies in which the web developers now have to take up iOS programming to serve the changing need, I can see that there are a lot of developers struggling with getting a quick ready-to-use application template to start with. A template which they can just open up and instantly have Facebook connect and WYSIWYG welcome pages.
For a beginner, it is a daunting task having to know how to build and import libraries needed. With this application you don’t have to worry about those and just get your app running right away. This application is meant to help you get started your iPhone app quickly with Facebook login handling built right in and more importantly having an onboarding/welcome UI that you can modify easily with Interface Builder.
For a long time, since beginning of iPhone programming, the modal view has not had any major innovation. A quick search on cocoacontrol for “modal” returns 3 types of modal view:
– Fullscreen cover-up modal view
– Centered-popup type
– Date selector modal
The context problem
Out of the 3 types, the date selector is the only type that keeps the user aware of the current context that he is in (date for which field). By contrast, the other types of modal view practically cover up the entire screen and none or little context is visible. These implementations have been sufficient so far and sometimes the developers just have to include some context within the modal itself by setting the view’s title or include some kind of static labels.
But what if we could do better by adopting the same interaction by the date selector component? What if we need to somehow keep most of the context visible while presenting user with supplementary controls for adjusting behaviors of the context?
The Park Guides app by National Geography
The beautiful Park Guides app (iTunes link) launched just recently in Apr 2012 did an excellent job in solving the context problem.
So instead of the usual fullscreen modal view/popup view/UIActionSheet, the app shows a semi-modal view on top of the current view similar to the date selector component. However, the most interesting feature of this app is the way the current context is kept visible using a nice subtle animation. Instead of simply dim the view in the background like UIActionSheet, the entire view is scale down to about 80% and pushed back like a stack, creating a unique wow effect and at the same time, more of the background view is visible to the user. This is a great new way to interact with iPhone components.
It’s best to view the effect in a video clip here (1.3MB, .mov)
When it works, when it wouldn’t
Arguably this fancy implementation may not work in all cases. If you have a long Settings modal view in your app, it is not suitable. Or if you have a modal screen with text input, it wouldn’t work at all.
Nevertheless in many of the use cases it will be excellent addition to your app. Say for example you have a long Settings screen and different Tabs in your app, you might want to consider breaking down all the settings into different places where they are being used there and then.
Another use case showed in Park Guides app is providing extra content to the current view with a modal image (2nd screenshot above), adding more context while facilitate information-hiding.
In an attempt to learn CATranforms3D for the first time and replicate the same experience, I’ve created a custom Category add-on for UIViewController that makes presenting such a custom view easy.
If you have used Path recently, then the screenshots above should be very familiar. I am always very keen on learning about new ways of providing better user experience through interface design so Path 2.0 impressed me a lot in that area. There are several innovative UI controls in just one single app. The most noticable one was the fly-out menu. It has been replicated in Objective-C, CSS3 and even Adobe Edge.
So for the hackathon night at Anideo, I decided to replica and create a flexible foundation for another not less impressive control found in Path App : the overlay info panel that shows time when you scroll.
The screenshots above shows my progress so far after a few hours into it. It works pretty well with relatively little code. Download demo video of it in action here demo.mov (1.1MB)
The implementation I wanted has to be simple and flexible. Built with just a simple UIView for the overlay and a UIImage stretched to fill the background. It is highly customizable with 6 callback events that you can override to provide any functionality that you need.
First, the library consists of two source files and two graphic files for the background. Add these files to your XCode project as usual. Everything you need to know about this class can be found in .h file.
Create your own class based on KNPathTableViewController and use it like a normal UITableViewController out of the box. At this moment, only two init methods are supported, but you can submit a pull request to my repo and add more if you need to.
The infoPanelSize is the width and height of your overlay control. The background is created using UIImageView with a stretchable image based on the midpoints of the two images. Default size and other settings can be changed in .h as well.
After you have declared your custom class, override these methods in your implementations
All of these are optional but the most important one you should override is the infoPanelDidScroll:atPoint: call.
The overlay info panel UIView can be access using read-only property self.infoPanel and you can use this to add your custom elements.
In my Basic Demo, I added a single UILabel to the overlay and update it with the information about the current row it is at. The current row index can be calculated with the (CGPoint)point parameter.
In Path App, there is a lot more than just a simple UILabel: a round background clock, two moving clock hands, two dynamically sized labels that show date and time. Essentially they are additional information about the current postion it is at. And it is not limited to that single row as you can see in my Section Demo. The overlay label shows the current section it is at.
So from here, the possibilities are quite unlimited. You can use this control as another space-saving tool for the important-but-tiny tableview. You can potentially do away with the section headers and display it in the overlay instead. Alternatively, you can just use it as a fancy touch to your app. Up to you.
I do not have any future plan for the library but you could suggest more using the form below.
Also, let me know if you use it in any of your cool project.