[digdog dig];
I'm Ching-Lan HUANG (黃 青嵐), and this is my tumblr.
-
New iOS UI Component: DDActionHeaderView
Recently, I released 3 different iOS UI Components on github.
They are
And I haven’t had a chance to talk about them all, but let me show you the first one, which is also my favorite: DDActionHeaderView.
Story of DDActionHeaderView
Back to December 2009, that’s almost one year ago, I was struggling to create my first serious iPhone utility app, lots of proof of concept design and user interface experiments ongoing back then. And one of my ideas was to create a new UI component that:
- Combine the core concept of UIToolbar and UINavigationBar.
- Keep the simplicity and accessibility at the same time.
- And users can use it fast.
Rapid, is a very important notion for designing utilities on small iOS devices like iPhone or iPod touch. Those little gadgets should launch fast, do things fast, and go away fast.
For example, you don’t want your users to waste time looking at strange icons on the toolbar and trying to figure out (or just by guessing actually) what those icons do. And meanwhile, there’s no much space for you to add description next to the icons.
Icons on toolbar seems to be a simple interface with clear functionality, but things could be worse when you have four or five different looking icons on the toolbar, and the situation gets even worse when each icons are bringing up their own UIActionSheet.
It becomes some kinds of crazy knock’em down games in carnival booths, and you’re not going to win prizes from your users for that.
And DDActionHeaderView is the solution…
One Icon to Rule Them All
The gray circle on the right is called Action Picker, it contains action items. Users can tap to expand that action picker and look for actions that can be executed.
Once users tap the action item icon, the action picker shrinks back to normal, and action executed. So now:
- You saved lots of spaces for you app on screen.
- You got users focus on what they want when they want.
- Action Picker designed to look like an extra layer hidden under the skin.
- A well chosen default icon (first one) for Action Picker to display, can provide more detail information for underlying action items.
Eat Your Own Dog Food
DDActionHeaderView’s variants (e.g. dataSource protocol version) were first used in my iPhone app QR+Emoji, and the version you saw on github is a simplified version that is used in my newly released app: FrostyPlace.
Requirement
- iOS 4.0 SDK or later, demo project is using iOS 4.2GM SDK.
- QuartzCore framework.
DDActionHeaderView uses Blocks, Quartz 2D, CALayer, CAGradientLayer, CAAnimation and UIGestureRecognizer.
Screenshots
License
DDActionHeaderView and other two projects are released under MIT License.
Source code and demo are available on github.
loading…
