KNMultiItemSelector – A multi-item selector/picker

Posted: June 7th, 2012 | Author: | Filed under: Custom UI, iOS | No Comments »

KNMultiItemSelector is a versatile drop in multiple items selector for iOS projects. It works with both iPhone and iPad for several usage scenarios. See features and screenshots below.

It is best use for selecting several items in a long list of hundreds or thousands of items such as contact list of Facebook friend list.

Features:

  • Multiple items selector with simple NSArray
  • Subclass of UIViewController
  • Enable/Disable table index
  • Enable/Disable search control
  • Enable/Disable recent items
  • Optional image with out-of-box caching
  • Facebook friends selector demo project

Basic Demo & Facebook Friends Selector Demo

iPhone and iPad screenshots

Source & Usage examples

You can get the full source-code from Github: github.com/kentnguyen/KNMultiItemSelector

Visit Documentation to see how it is used and other configuration options


Boilerplate Facebook application for iPhone

Posted: May 13th, 2012 | Author: | Filed under: Custom UI, iOS | No Comments »

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 published two open-source components of mine as a trial about a week ago. They are the KNPathTableViewController and KNSemiModal.

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.

So here it is: Boilerplate Facebook application for iPhone on Binpress
Head over there and you’ll find all the details about screenshots and even a demo video!


Semi-modal view with better context

Posted: May 4th, 2012 | Author: | Filed under: Custom UI, Development, iOS, UX | 7 Comments »

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.

KNSemiModal

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.

Here’s the post explaining the library : KNSemiModal Category for iOS

Or you can go directly to the source file on Github here UIViewController+KNSemiModal


A replica of Path’s table view

Posted: January 13th, 2012 | Author: | Filed under: Custom UI, iOS | 5 Comments »

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.

I have push the code to my public git repo at https://github.com/kentnguyen/KNPathTableViewController
You can get the code and run the Demo project to get an idea what you can do with it or follow my code below.


How to use and extend KNPathTableViewController

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.

-(id)initWithStyle:(UITableViewStyle)style;
-(id)initWithStyle:(UITableViewStyle)style infoPanelSize:(CGSize)size;

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

-(void)infoPanelWillAppear:(UIScrollView*)scrollView;
-(void)infoPanelDidAppear:(UIScrollView*)scrollView;
-(void)infoPanelWillDisappear:(UIScrollView*)scrollView;
-(void)infoPanelDidDisappear:(UIScrollView*)scrollView;
-(void)infoPanelDidScroll:(UIScrollView*)scrollView atPoint:(CGPoint)point;
-(void)infoPanelDidStopScrolling:(UIScrollView*)scrollView;

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.

Extending

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.

Oh and checkout my other app too.