was successfully added to your cart.

Cart

Category

iPhone

A Mobile Developers Guide

By | Android, BlackBerry, iPad, iPhone, Mobile Development, Uncategorized, Windows Phone 7

App design is a thorny problem for most people. This is doubly true on mobile devices, where maintaining a sleek, user-friendly interface is trickier than it looks. Thankfully, there is a wealth of information on this subject, making it just a bit easier to decide on what an app should look like.

First is the  iPhone and Android site http://www.mobile-patterns.com/. Consisting of a gallery of the most successful apps (including Twitter, Instagram, Facebook etc), this site contains a list of categories that may be giving you problems. This list contains a handy menu of the most common features in apps, such as Lists, Camera Controllers and the like. Each page contains images of examples in practice, providing guidance on how to achieve a similar effect in apps currently being worked on.

Second is the iPhone only site http://pttrns.com/, which provides a similar service to the above site, albeit focused on iPhone. Apart from the magnifying glass enabling your cursor to see up close to the images, it’s all pretty similar to the site above. Where it differs though is selecting an image that you like doesn’t just display the image in a fuller size. Instead it takes you to all images listed on the site under the same app, along with a link to the iTunes website and ratings for the app.

Apart from the above sites, there exists a host of other sites in a similar vein. These include dribbble.com, www.lovelyui.com and www.androidpatterns.com. Sadly, these are all related to Android and iPhone, and I have been unable to find a site for BlackBerry devices. Thankfully, the BlackBerry site contains tips on how to create a standardised UI across BlackBerry devices. How to implement these features in code is a whole different problem. Hopefully I will address that in a future update!

Johann Van den Bergh

Mobile Software Developer

Cobi Interactive

Latest releases- VW Team Assist, News24 Samsung Smart TV and Sticky Art

By | Android, iPad, iPhone, Mobile Development, Releases, Web

In addition to numerous application updates, Cobi has recently developed an Android, web and iPhone app for Volkswagen Team Assist (commissioned by Amsterdam based FONKmobile), a Samsung TV app for News24, and our internal product division has created an iPad app called Sticky Art.

Team Assist is a driving schedule application for amateur football players in the Netherlands. The app gives users an overview of current and future games directly from the KNVB. Players can access the latest information about the games; see which team members are playing, the location of the next game, who is driving and where and when to meet.

The News24 application is the first locally developed Smart TV application in Africa. It allows users to access news content on their Smart TVs and navigate to stories or sections of interest using the remote as a cursor.

Sticky Art lets you design sticky-note art using your iPad. You can either create the design manually, or use the trace feature to convert a regular image into a sticky art. The app allows users to customise the window size, zoom in and out to get perspective of how the design will look and email or print the design from your iPad. A design inventory is also shown on your design so that you know how many stickies you need.

Download the VW Team Assist iPhone app

Download theVW Team Assist Android app

Download the VW Team Assist web app

Download the Sticky Art iPad app

The News24 app is accessible from the Samsung Apps Store via the Smart TV UI

 

Quick and Easy iPhone Gradients

By | development, iPad, iPhone, Mobile Development

The market for iPhone and iPad apps is competitive and sometimes a bit of extra eye-candy goes a long way. For a couple of projects I have had to give various items a gradient shaded background. There are two ways to do this. Core Graphics or Core Animation. Gradients in Core Graphics give you more customization and more control, but are more complex to implement, while gradients in Core Animation are simple, but may not be able to do everything you need. Here we are going to look are the fast Core Animation approach.

Make sure you #import <QuartzCore/QuartzCore.h>

To make a simple rectangular gradient all we need is to add a CAGradientLayer:

CAGradientLayer * gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = CGRectMake(0, 0, 80, 60);
gradientLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor redColor] CGColor],(id)[[UIColor greenColor] CGColor], nil];
[self.window.layer addSublayer:gradientLayer];

This produces a rectangle that can be used in any view:

We can give the layer rounded corners by adding:

gradientLayer.cornerRadius = 10;

For more complex shapes we can set a mask for the gradient layer using a CAShapeLayer:
//Make shape – Triangle
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL,40.0f, 0.0f);
CGPathAddLineToPoint (path, NULL,80.0f, 60.0f);
CGPathAddLineToPoint (path, NULL,0.0f, 60.0f);
CGPathCloseSubpath(path);

//Shape layer
CAShapeLayer * mask = [CAShapeLayer layer];
mask.path = path;
[gradientLayer setMask:mask];

//release path
CGPathRelease(path);

UIButton with a gradient:

 

The graph I made for a project using Core Animation layers:

Objective-C: Blurry UIView

By | development, iPad, iPhone, Mobile Development | No Comments

If you’ve been coding Objective-C interfaces for a while you will know that you set the position of a view using it’s frame property. This property is a CGRect which is made up of four float values.  newView.frame = CGRectMake(0.0, 0.0, 100.0, 100.0);

At first these floats were quite an annoyance because when debugging using NSLog() to check if frames were set correctly you have to use NSLog(@"%f",newView.frame.origin.x); and this is printed as a decimal number i.e. 0.00000

After getting used to this and starting a project that required 3 columns down the screen I thought that I could finally use the floats to their full effect. So I divided the space neatly by three and drew UILabels. UILabel *firstLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, 1024/3, 768.0)];

Unfortunately this caused my UILabels to become fuzzy or blurry. After an extensive google search I found out that you should NOT be setting your frames using float values. Although CGRects take float values, when a UIView gets drawn and it has a decimal value in the frame it will blur that value to the nearest integer. This makes sense when you remember that the value you are giving is meant to represent a pixel value and a view cannot end halfway through a pixel.

So you should ensure that your frame does not contain any decimal values. An easy way to do this is to use the roundf() function. If placed around all 4 values in your frame you will always have an integer value, however this is a lot of extra code and you only have to do it where there is a possibility of having a decimal value. So my above label example became
UILabel *firstLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, roundf(1024/3), 768.0)];

Using a view’s center property it is possible to get a point with a .5 value (any view with a width or height that is odd will give you a .5 value). Using a view’s center to position another view should therefore be done using roundf(). For example say you have a white view and you want to cover it from the middle to the bottom right corner with red:

UIView *bigView = [[UIView alloc] initWithFrame:CGRectMake(30.0, 30.0, 67.0, 71.0)];
bigView.backgroundColor = [UIColor whiteColor];
[self addSubview:bigView];

UIView *smallView = [[UIView alloc] initWithFrame:CGRectMake(
                                roundf(bigView.center.x),
                                roundf(bigView.center.y),
                                roundf(bigView.frame.size.width/2),
                                roundf(bigView.frame.size.height/2)
                                                                                                )];
smallView.backgroundColor = [UIColor redColor];
[self addSubview:smallView];

[bigView release];
[smallView release];

When you wish you had a strongly typed compiler!

By | development, iPhone, Rant | No Comments

The other day a work colleague of mine ran into some troubles with an unrecognized selector exception crashing his iPhone application…the exception looked something like this:

NSInvalidArgumentException’, reason: ‘-[__NSArrayI addObject:]: unrecognized selector sent to instance …..’

After much frustration, and a fair bit of time spent with a bunch of us trying to hunt down the problem, it turned out to be a problem that could have been noticed immediately had the compiler been strongly (stronger) typed. Yes, ultimately the problem arose due to programmer error, however, this particular instance is just one example of why I prefer strongly typed languages (such as Java).

The error came about as a result of attempting to add an object to an NSMutableArray type that was actually pointing to an NSArray object. This type of scenario is shown in some demo code below:


NSString *test = @"test";
NSMutableArray *mutableArray = [[NSMutableArray alloc] init];
[mutableArray addObject:test];
NSArray *immutableArray = [[NSArray alloc] init];
mutableArray = immutableArray;
[mutableArray addObject:test]; // Exception: unrecognized selector

From the above code, it is easy to see that a subclass type is being assigned to a superclass type. In Java, for instance, this would immediately have been flagged as an error (conversion error between types), and the problem resolved fairly quickly. To be fair to Objective-C, a warning is given when attempting to perform an incompatible assignment, however, this simply just does not seem to be enough sometimes and the result can be a real pain for developers. Fortunately, this time around, it was not myself who bore most of this pain 😛

Make your iPhone look like WP7

By | iPhone, Windows Phone 7 | No Comments

For all you guys with jailbroken iPhones and and want a different look and feel, why not try out the WP7 theme. Here are some quick instructions from Gizmodo.

1. Install Backboard from Cydia.
2. Make sure you have created a “Default” backup, if not, press the add button in Backboard and give it a name.
3. Go on your device and click on this link: backboard://http://wyndrepo.googlecode.com/files/OS7Beta.zip
4. Press “Yes” and wait for it to download. This may take a few minutes depending on your internet connection.
5. Select OS7 from Backboard. Press Install. Respring.

This is the result.

Consulting Rate Calculater iPhone App available now on the App Store

By | Apps, Cobi News, iPhone | No Comments

Cobi Interactive, in partnership with Beyond438, have developed a business utility application for the iPhone. The app enables you to quickly and easily calculate your hourly, daily, weekly and monthly rates and profit. The app offers an intuitive and simple interface with the ability to view, edit, save and email your rate sheets. Switch currencies with ease or updating any charge out rate or cost rate cell in the sheet to assist in determining the optimal rate structure for your next project.

Paid version available here and free version here.

Key Features:
>> Hourly, daily, weekly and monthly values all editable and visible in a single sheet.
>> Multiple currencies with selectable base and comparable currencies (Limited currencies available in lite version).
>> Exchange rates updated in realtime.
>> Save rate sheets for later viewing/editing (Full version only).
>> E-mail rate sheets in CSV format (Full version only).
>> Configurable hours per day, week and month.

Usage Examples:
1. A consulting manager can save his/her team’s rates for quick lookup. Quickly lookup a consultant’s rate structure when getting a call at the airport for a specific position.

2. The manager of a multinational consulting firm can enter the charge out rate in GBP and the cost rate in USD to review the profit of a US-based consultant working in the UK.