Chapter 6 — Subclassing UIView and UIScrollView (iOS)
- Let’s make this! (Then let’s make some cool changes.)
Starting the Hypnosister App
- Launch Xcode and create a new project.
- Select the iOS→Applcation→Empty Applcation template.
- Create the new project like this.
- Launch the app and you should see this.
Views and the View Hierarchy
- What’s a view on the screen? A rectangle. We use a C struct for rectangles in iOS.
- CGRect contains two more structs, CGPoint, and CGSize.
- So, what’s this CGFloat thing?
- If you are running on a comuputer with a 64-bit architecture then CGFloat is a double. If your computer is 32-bit, then it’s a float.
- In your app’s HypnosisterAppDelegate.m file.
- First place that runs in our code.
- Used to set up the core parts of your apps when we’re not using Storyboards.
Creating a Custom View
- Create a new class named HypnosisView.
- Make the superclass UIView.
- Add this code to the
application:didFinishLaunchingWithOptions:after the comment
- Build and run the app, you should see this.
- Add another view with code. The whole method should now look like this.
- Run it and should should see this.
- Now we’ll add the small blue rectangle to the red view instead of the window. Replace the commented line with the new one for the second view
- You should see this now.
- Custom drawing! (It’s not as scary as it sounds.)
- The UIView class has a method named
drawRect:where all drawing actually occurs. You can override this method and do your own.
- Here’s the declaration of the method.
rectparameter is a rectangle struct.
- Here’s the full method.
- Here’s what we look like now.
- Next, we set the background images to clear so the white view shows through. Comment out these lines in the HypnosisterAppDelegate.m file.
- Open the HypnosisView.m file and add the highlighted line to this method.
- Run the app and you should see this.
- This sets us up to have some fun with drawing!
- We’ll start modifying the drawing method. Now we’ll draw in a loop.
- This is what have at this point.
- Let’s create just one HypnosisView and make it full size in the HypnosisterAppDelegate. Change this method to this.
- Here we go! That’s looking good.
UIKit Drawing Additions
- Next, we add this code to the
drawRect:method in the HypnosisView.m file.
- And we’re drawing text!
- Let’s not stop yet. We’ll add a drop shadow.
- Add a property to the HypnosisView.h file. No need to synthesize in the .m.
- Change the init method.
- And use the new property. Add this just before the
- The app should look the same but we are now set up for the next cool thing!
- Open the HypnosisterAppDelegate.m and add the highlighted code to this method.
- Open the HypnosisView.m file and add this method.
- Run the app and you should see this in the console.
- Add this method to the HypnosisView.m.
- Running the app now will get you a message saying, “Device started shaking!”, but the color doesn’t change.
- Add this method to HypnosisView.m.
- What kind of method is this?
- Why can’t we use this?
self.circleColor = color;
- Here’s the final
- Open the HypnosisterAppDelegate.m and modify this method to be this. The changes are between the highlighted lines.
- Run the app and you’ll see this.
- You can scroll around the HypnosisView inside of the scroll view.
What? Do this whole thing over?
- Yes, we’re going to do the whole app over using Storyboards. We’ll cheat a little and reuse our custom view class.
- Create a new Single View Application Xcode project and name it HynosisterWithSB.
- Click on the Main.storyboard.
- In the Storyboards editor click on the view.
- Click on the 3rd tab to open the Identity Inspector. Change the Class to UIScrollView.
- Align the project windows of the Hynosister and the HynosisterWithSB so that the Hynosister window is in front. You want to be able to see both of the project browser areas.
- Select both the HypnosisView.h and HypnosisView.m from the Hynosister project and drag them to the HynosisterWithSB project. Drop them just below the view controller.
- Check the Copy checkbox and Finish the copy.
- Find the View icon in the Object Library. Drag it on the scroll view. Center the view.
- Change the Class of the new view to HypnosisView.
- Change the size of the HypnosisView to 640×1136.
- Add a User Defined Runtime Attributes entry to the HypnosisView. The name of the attribute is circleColor. Make it a Color and select a nice color.
- Select the Scroll View and add a User Defined Runtime Attributes to it like this.