Learn how to subclass UIView to work interactively in Swift playgrounds.
- [Instructor] Subclassing UI views give you a lot of control of the user interface, more than a view controller. In cases where you're building a control in Xcode, or exploring a prototype on playgrounds where view controllers are bit more unstable, subclassed UI views are a great solution. Let's take a look. In the downloads, I created a project with a playground for you. So, you can go find the project, and you'll see right at the top here, there's a playground, so I'm just going to click on the playground and go into my playground here.
And I've already set some code up for you. So, we've imported UIKit and imported PlaygroundSupport. And I made two rectangle for CGRects and I made a backgroundImage which is saved into the Resources folder of the playground. So, what I'm going to do here is just create a view and then do that is just a class and we'll call it MyView and that'll be a UIView.
And when you subclass UIView, there are two initializers you're going to need. The first is required but we're not going to actually use it, so go ahead and type init here and you'll see somewhere here it says required init coder aCoder: NSCoder. And we do need the coder one but all you need to do here for the code is put super.init coder: NSCoder and just say this is aDecoder.
And that's it. It's got to be there but that's all you'll be using that for. The one that we actually use is the one with the frame, so do init again and you'll see frame: CGRect come up. Again here we're going to need a super, so we're going to call super.init init frame and I'm just going to pass along the frame from mine. Like that and that's the basics of what you need to get a UIView started.
You need these two. There's a lot of other things you can add but you definitely need these two. Now if I wanted run this in playgrounds, first of all, I'd get an instance of MyView, so I do let view equal MyView and here's something that's going to be interesting. We're going to use the frame here but there's a problem particularly in iPad playgrounds that it's very unstable in terms of its frame.
You can't just say self.frame or anything like that. It's got to have at this point in the code when you're running it, something that's really solid that you know is going to have a good frame, so what I've got in the habit of doing here is using UIScreen.main.bounds. And that gets you the main screen of your playground and its bounds and that'll be a perfectly good solid frame.
It's going a little much into the hardware but for iPad playgrounds in particular, that becomes a big issue and you end up with nils for your views if you don't have something solid there. The second thing we're going to do is we're going to do PlaygroundPage and if you've been to my course on playgrounds, you're familiar with this code as PlaygroundPage.current.liveView which is how you get any live views started in a playground.
The difference here is instead of putting a view controller like I did in the course, I'm going to put a view which is perfectly legal. You can use either views or view controllers for this. That's enough to run the code. I'm going to add one more line here and that is I'm going to take the view and I'm going to change this backgroundColor and I'm going to make it yellow. And now with the line running, I'm going to run this line here and you see we get our code and I can go up here and use the Assistant Editor but it's just as easy to use the results which will get me a yellow box here for my view or I can use the Quick Look which gives me a much bigger one and shows me I've got a big yellow box.
Yay, great. We can also add things here in view now which is the whole point. One place you can add them is of course in init. And I'm going to do a very simple one here 'cause one thing you may do with views is add other subviews based on some of the controls you already know. So, for example, let's just put an image here for a background image. So, I'm going to do let imageView equal UIImageView and we'll take an image.
I already have an image here which is my backgroundImage, so I'm going to use the backgroundImage here and that'll set the ImageView and then here all I have is do addSubview that I go do in a view controller, this one I don't need the view because this is already a view. I make that imageView. And with that I can run down here again and if we look at this, we get a gradient which is what my image was.
So, let's go over here. And you'll see that I have right here in resources a nice gradient and I'm getting the top of this gradient which is a much longer one. So, that's all you need to do. I added a couple other features to this if you want to play around with some stuff. If you go into the MyView.swift, I set this up for a view controller and if you look in the ViewController.swift code here, you'll see that it simply is just assigning a view and adding a subview.
I did pretty much the same thing but what I've added a little bit more some core graphics stuff. Now, core graphics is really a whole topic unto itself, and could be whole course unto itself so I'm not going to get into it but this'll give you some demonstration of that code. I also haven't done anything here with the CA layer which you can play with here in UIView or with auto layout which you can also use in these views. However, using all this stuff is a great and powerful way to develop new types of controls for your user interfaces or make your own.