#pixfor

A popular pattern in iOS lately (especially in apps with a focus on photo taking) is the raised / highlighted middle TabBar button. It’s easy enough to get a native TabBar in an iOS PhoneGap app using one of the two popular plugins (NativeControls and TabBar). There is even a great article on getting a raised middle TabBar button on iOS.

But not everyone using PhoneGap can comfortably turn that article into a modified TabBar plugin. There was even a recent thread on this topic in the PhoneGap Google Group recently.

Since I have done this in one of my apps, I thought I might post a quick outline on how to use the code in the iDevRecipes article above to get one of these buttons into one of the plugins above.

The Button Image

This is the button I created for my app Pixfor. It’s basically just a green tinted screenshot of the middle third of a standard TabBar with an Aperture icon and a subtle shadow. You certainly don’t need to have a tinted gradient as well as your larger icon or whatever. That’s just a design decision. The great thing about how this works is that the touch goes straight through the added UIButton, so the highlight of the TabBar still happens so if your button image has transparency, it will show through nicely.

The button image is named aperture-tab.png and also has a corresponding [email protected] image for retina devices.

Note: these images (unlike the icons normally used in the TabBar plugins as icons) are added to the project through XCode as a resource, not just copied into the www folder with the other PhoneGap assets.

The JavaScript Code

For the JavaScript code, all you really need to do is create a TabBar item with an empty label and an empty icon.

For example, in NativeControls:

window.plugins.nativeControls.createTabBarItem("takepix", "", "", options);

and in TabBar:

window.plugins.tabBar.createItem("takepix", "", "", options);

The Objective-C Code

Pixfor happens to use the NativeControls plugin, but the code below should work in both.

They both have a method in their respective .m files that creates the TabBar (create in TabBar and createTabBar in NativeControls). *

Both these methods end with

[self.webView.superview addSubview:tabBar];

What we are going to do is add the following code directly after this line before the closing brace.

This code will add a custom UIButton using our image centered on our TabBar. Note the file name aperture-tab.png in the first line. The retina @2x version does not need to be explicitly referenced.

And there it is! Our special TabBar button.

People like apps. Especially free ones. It's relatively easy to get someone to have a look at a new app. Sadly, websites seem to be much less exciting.

When I created Pixfor I had the idea that people would use the website to create their album, then get their friends and family to download the Pixfor app and because it had come as a request from the album owner, they would get the app and use it.

It's become apparent that it's much easier to get people excited by an app. But with Pixfor, the app is a second class citizen unless you have been asked to take photos for someone's album. On it's own it seems limited and pointless probably because it is.

So my task now is to make the app both more welcoming in its blank state (having just started it up for the first time), and possibly more importantly, to make the app more stand alone.

Signing up in the app already creates a Pixfor account capable of logging into the site and creating an album, but in a coming update you will be able to create a new album right in the app. You'll also be able to share that album with friends and encourage them to join in by downloading the Pixfor app for themselves.

I am also hoping to put off forcing people to sign up until they actually try and join someone else's album or create one of their own. Getting in to the app and having a look around really shouldn't require forking over your email address :)

The side project I have been working on for the last two months is finally live.

http://pixfor.me

Pixfor is, in many ways, the 21st century update on the idea of leaving disposable cameras on the tables at weddings. It is also a great deal more than that.

It's a combination of an app (currently iOS only) and a SaaS web site. 

OK, I know that's a terrible song, but this is the beginning of something different for me.

No longer content to just write software for other people, I have decided to have a go at creating my own product. I struggled to come up with an idea that was both interesting to build and thought people might actually have a use for. Then one night I came up with the idea for Pixfor.

Pixfor is not revolutionary. There, I said it. There are other "guest photography" apps available for the iPhone right now. Most have fairly mediocre UI/UX, and nearly all are terribly mired in the one niche – weddings – but they could still be used for other things in theory... I suppose.

However, I am hoping that even though many of the Pixfor concepts are available elsewhere, Pixfor comes together as an altogether more interesting and useful tool than those already out there. I see Pixfor useful not just as another guest photography app (with a much better pricing model, mind you) but as a much more generally useful online shared photo album.

Apple's Photostream is awesome. I love it. Combined with an Apple TV it becomes every bit as magical as Apple claim. Unfortunately, it's kind of a shame that only my photos go into it instead of mine and my wife's (as an example). We take many many of photos of our kids, as I am sure most parents do, but unless she actively sends me one of the ones she takes or we sync her photos to the same iPhoto album as I use (annoying, but possible)... I might never see and enjoy those photos.

If I set up a "Family album" for us in Pixfor and we both checked in to it... we could use the Pixfor app to take photos of our kids and they would all just automatically be available for either of us to look at at any time here at pixfor.me. I could then easily share one of the photos my wife took on my Twitter stream, etc.