Skip to main content

Xcode from scratch for scaredy cats: Hello with a little class (UIView subclass)




This time we're going to do two things:

(1) write some text
(2) subclass this text so that we can reuse it.



In order to do this first we need to create a new project entitled: "ALittleClass" using the same method outlined in the first 'Xcode from scratch for scaredy cats' post. We are then going to create a "New File ..." within this project and call it "ALittleClass"




When creating this new file you will be prompted first to choose a template - select iOS -> Cocoa Touch -> Objective-C Class followed by the Next button. You will then be asked to insert a filename beneath which is written - "Subclass of" - in this second box you need to select or type UIView and press enter.





Inside the new .m file ("ALittleClass.m") you'll find some code that is "commented out". You need to remove the comments around this. So that it looks simply like this:



- (void)drawRect:(CGRect)rect

{





}


Comments are highlighted green and follow two forward slashes // or are placed over multiple lines between /* slash asterisk ... asterisk slash */

We are then going to create a string of text, like this:

NSString *darling = @"Hello with a little class";

and place it inside the now uncommented method. We can then refer to this simply by calling "darling". Before we can use it though, we need to locate a point at which we're going to place (or to use the correct term - "draw") the text in relation to this rectangle we're drawing.

To do this we need to create a point:

CGPoint newpoint = CGPointMake(50,30);

We then decide on the font properties:

UIFont *fontsmall = [UIFont systemFontOfSize:30.0];

and finally the colour:

[[UIColor grayColor] set];

We are then ready to put all of these variables together and draw our text.

[darling drawAtPoint:newpoint withFont:fontsmall];




Meaning that our method in "ALittleClass.m" will now look like this:


- (void)drawRect:(CGRect)rect
{
NSString *darling = @"Hello with a little class";
CGPoint newpoint = CGPointMake(50,30);
UIFont *fontsmall = [UIFont systemFontOfSize:30.0];
[[UIColor grayColor] set];
[darling drawAtPoint:newpoint withFont:fontsmall];
}

If we run our app at this stage it will load without any issues, but the screen will be blank. This is because we need our main view controller - "ALittleClassViewController.m" - to make use of this subclass and make it visible to the app. 


We make use of the subclass and make visible what is contained in it by creating an instance of the subclass, allocating memory to the object and then initiating it within a frame. 


Don't let these terms frighten you, it only takes two lines of code to do all that is described  in the preceding paragraph. But before we can insert these two lines of code, we need to enter another line of code in "ALittleClassViewController.m" at the top of the file beneath the one that is automatically created by Xcode and reads:


#import "ALittleClassViewController.h"

our line of code that should be inserted beneath this reads simply:

#import "ALittleClass.h"



We then need to enter code in the -(void)viewDidLoad method of "ALittleClassViewController.m", as we have done in previous posts:



- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}

We need two lines of code here. First the one that creates the class pointer and allocates memory to this object:

ALittleClass *classy = [[ALittleClass alloc] initWithFrame:CGRectMake(100, 100, 400, 100)];

This creates the object with a frame in the co-ordinates and of the size specified in the CGRectMake instruction (the first two numbers are x, y co-ordinates taken where the top left corner is 0,0, and the second two are the width and height).

Then we follow this with a line of code that places the object, in this instance a UIView subclass, into our main view.

[self.view addSubview:classy];

The point of all this is that we can then re-use code so the next time we want to add "ALittleClass" we simply add two similar lines:


ALittleClass *classytoo = [[ALittleClass alloc] initWithFrame:CGRectMake(200, 400, 400,100)];
[self.view addSubview:classytoo];

And we then have the object rendered twice with two different names and we can refer to them independently. For example we might want to set the background colour of "classy" to green:


classy.backgroundColor = [UIColor greenColor];

and the background colour of "classy too" to yellow:

classytoo.backgroundColor = [UIColor yellowColor];




So our code in the "ALittleClassViewController.m" file will end up looking like this:



- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.


ALittleClass *classy = [[ALittleClass alloc] initWithFrame:CGRectMake(100, 100, 400, 100)];
[self.view addSubview:classy];


ALittleClass *classytoo = [[ALittleClass alloc] initWithFrame:CGRectMake(200, 400, 400,100)];
[self.view addSubview:classytoo];

classy.backgroundColor = [UIColor greenColor];

classytoo.backgroundColor = [UIColor yellowColor];
}
The two objects we have created are the same type (or "class") of object but with unique elements.


There are many analogies used by iOS programming books for this. One is the dog used by Matt Neuburg in Programming iOS 4: Fundamentals of iPhone, iPad, and iPod touch Development (Definitive Guide). He explains how every dog is a dog but there are different breeds with different characteristics that subdivide them. Equally you might allude to a car being of a certain make and model but it being possible to paint it in a range of colours that is in part independent from the core essence of the object (and in fact you can choose to respray the car at any time without affecting all the other cars of the same make and model that exist, just as you can change the colour of an object in iOS without changing all the others).

As with all analogies there are limits to which these explain the scenario, but they can be of some help in initially understanding the concepts of objects and how they relate to a "class" of object. (Neuburg also writes of Plato's theory of forms whereby the class of an object is the ideal form of that object.) However, this has been quite a lengthy post already, and I don't think it will add value here to go any further into philosophical analogies.

Once again I've moved simply from point to point in this post, and have also reused elements from previous "Xcode from scratch for scaredy cats" posts so as not to introduce too much that is new all at once. If you have any queries or comments please as always use the box below.

Comments