Brian Long Consultancy & Training Services
Ltd.
March 2011
Accompanying source files available through this
download link
On the main view of your Utility Project you can clearly put what you like. In this case we will add an image. We could use Interface Builder to add an appropriate control to the main view and set its attributes but this time we’ll skip Interface Builder and do it solely in code.
To add an image to an iOS project you can copy the file into the source directory
tree; mine is called Fire.jpg (whose dimensions are smaller than that of an iPhone
screen) and has been placed in the project’s main directory alongside the source.
In MonoDevelop you notify the project of the image’s existence firstly by adding
the image to the project (right-click the project and choose Add, Add Files... or
press
A
),
and secondly by right-clicking the image in the project and choosing Build Action,
Content.
Now in the main view controller’s ViewDidLoad()
you can write:
public override void ViewDidLoad()
{
base.ViewDidLoad();
//Deal with image
var image = new UIImage("Fire.jpg");
var imageView = new UIImageView(image);
var appF = UIScreen.MainScreen.ApplicationFrame;
var imgS = image.Size;
imageView.Frame = new RectangleF((appF.Width - imgS.Width) / 2,
(appF.Height - imgS.Height) / 2, imgS.Width, imgS.Height);
View.AddSubview(imageView);
}
This loads the image file into an Image control, adds it to an image view, sets the image view frame to be centered in the application frame and finally adds the image view into the main view. The main view of the application can now be seen below. Something a little more helpful and informative would be better in a real application, but there is a loose reason why the picture was chosen. This is a temperature conversion program and fires imply high temperatures.
If you want to play about you could make this image draggable. Let’s build a new
class UIDraggableImageView
that inherits from UIImageView
and supports being dragged around. The class is actually quite simple and operates
by overriding the methods TouchesBegan()
, TouchesMoved()
and TouchesEnded()
to shift the image view’s frame around based upon
where the user drags their finger. You may recall we used those methods to track
touch movement in an earlier project.
The class looks like this:
using System.Drawing;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
...
public class UIDraggableImageView: UIImageView
{
public UIDraggableImageView(UIImage image): base(image)
{
UserInteractionEnabled = true;
}
private PointF startLocation;
private void MoveImage(NSSet touches)
{
//Move relative to the original touch point
var pt = (touches.AnyObject as UITouch).LocationInView(this);
//Use a separate frame var to ensure both new coordinates are set at once
var frame = Frame;
var appFrame = UIScreen.MainScreen.ApplicationFrame;
frame.X += pt.X - startLocation.X;
if (frame.X < 0)
frame.X = 0;
if (frame.X + Image.Size.Width > appFrame.Width)
frame.X = appFrame.Width - Image.Size.Width;
frame.Y += pt.Y - startLocation.Y;
if (frame.Y < 0)
frame.Y = 0;
if (frame.Y + Image.Size.Height > appFrame.Height)
frame.Y = appFrame.Height - Image.Size.Height;
Frame = frame;
}
public override void TouchesBegan(NSSet touches, UIEvent evt)
{
var pt = (touches.AnyObject as UITouch).LocationInView(this);
startLocation = pt;
Superview.BringSubviewToFront(this);
}
public override void TouchesMoved(NSSet touches, UIEvent evt)
{
MoveImage(touches);
}
public override void TouchesEnded (NSSet touches, UIEvent evt)
{
MoveImage(touches);
}
}
Since the image is intended for single touch, TouchesBegan()
just plucks
any of the touch objects from the passed in set; typically there will only be one
anyway. The location of that touch is then recorded as the starting point. As the
user’s finger is moved around the MoveImage()
helper routine does the
job of incrementing or decrementing the x and y coordinates of the frame and ensuring
it is kept inside the screen boundaries.
Just change the line in MainViewController.cs from this:
var imageView = new UIImageView(image);
to this and you have a draggable image:
var imageView = new UIDraggableImageView(image);
This class was based on a code snippet from http://monotouchexamples.com.
The example above includes an image but it is embedded in one of the views. A common aspect of commercial applications is a launch screen (or splash screen), which serves to distract the user from the length of time the application takes to start up and initialize. The Apple UI guidelines suggest that a splash screen should be an image of the application running but this is often ignored. Applications typically include company marketing information, logos for the application and the company etc.
So how do we include a splash screen? Moreover, how do we include icons so our applications stand out a little more than they currently do?
The answer to the questions is to add various specially named files to the project and set their Build Action to Content. Let’s look at a launch screen first.
To incorporate a launch screen it is simply a matter of adding a file called Default.png to your project (not forgetting, of course, to set its Build Action to Content), set to a size of 320x460 (the iPhone resolution is 320x480 and this image size takes account of the 20 pixel high status bar). That image will work for iPhone 3 and iPod Touch. It will also work with iPhone 4 but you may recall that the pixel resolution of iPhone 4 has doubled.
To cater better for the improved display of the iPhone 4 (and to avoid the original image being stretched to fit) you can also include a 640x920 file called Default@2x.png (similarly set to have a Build Action of Content) and this will be used automatically when the application is launched on an iPhone 4.
This Utility Project we have been working on is included in the files that accompany this article. In the project are two launch images as per the specification above. They are the same image, a picture of some ice (cold temperature), but Default.png has been shrunk to the smaller resolution. In order to prove the point and be sure the right file is used, a big number 3 has been drawn on the smaller file and a big number 4 on the larger file. The following screenshot shows this same application being launched in the iPhone 4 Simulator.
You can switch between simulating the various hardware options in the Simulator by choosing Hardware, Device and then either selecting iPhone (for the iPhone 3 and iPod Touch Simulator), iPhone (Retina) (for the iPhone 4 Simulator) or iPad.
Go back to the top of this page
Go back to start of this article