Making Shapes and Colors

Let’s get to some code. Create a new app called Boxey (remember how? motion create Boxey). Now we need to add a window to our app.

Adding a UIWindow should be one of the first things your app does, so we need to add it in AppDelegate’s application:didFinishLaunchingWithOptions:, like this:

There are a couple of new classes in there, so let’s walk through it. We created our UIWindow using initWithFrame:. We use this method to create all UIViews, not just windows. It takes a CGRect object, but for windows we usually want a frame that fills the display. This is why we use UIScreen instead of specifying our own size.

UIScreen is an object that contains information about the displays our app is running on (chiefly the mainScreen). Its bounds returns the CGRect that describes the visual size of our application. Apple’s design guidelines suggest that your application should fill the entire screen (including underneath the status bar) and bounds will give us that dimension.

Next we set the background color with a UIColor. It has some obvious defaults such as whiteColor and blueColor, but we can also create arbitrary hues. UIWindow has a black background by default, and it will make our exercises a bit simpler if we set it to white.

So, we create our window with the appropriate settings and call makeKeyAndVisible. This is a special method for UIWindow that tells the system it will be the window receiving touch events and should be drawn to the screen.

That’s a lot of explanation, I know, but thankfully setting up a window needs to be done only once. More exciting is how we continue application:didFinishLaunching: by adding our first new UIView.

Again, we use initWithFrame:, except now we create a new CGRect object with the initializer new([x, y], [width, height]). The two arrays correspond to the origin and size subproperties of CGRect, as in rect.origin.x and rect.size.width. In some code, you might see CGRects created using the CGRectMake(x, y, width, height) method. RubyMotion also supports this style, which is how it works in the Objective-C iOS SDK, but CGRect.new is more idiomatic in Ruby. Remember that UIWindow is a subclass of UIView, so we then set its background color just like before.

Lastly we use addSubview: to add the view to our window. Even though we can access the subviews property of UIView, we can’t append or insert to it directly. Instead, we use specific methods like addSubview for those tasks.

Go ahead and run our app (just rake, remember?) and observe our blue box. Even though it looks like the following, at least we have something on the screen!

We’ll start to make it more useful with buttons in ​Adding Interaction with UIButton​.