As part of the iOS 7 webinar which was held on October 9th 2013, I decided to create a quick demo showing some of the most interesting features in iOS 7. However due to time constraints, I only picked the top three features and wrapped them up in a demo app.
So let's dig deeper into UIKit Dynamics, SpriteKit and Text Kit.
This demo mobile app, called "Featurama", was created using the standard Xcode template for a single view project. All Mobile apps in Xcode now use Storyboards rather than individual xib files (Interface Builder files). There are pros and cons to this approach but in general I think it's just a matter of getting used to.
But first, you can find the project on GitHub. Just click here.
The project is divided into 4 controllers:
- MainViewController: This contains the menu to go to different sections?
- DynamicsController: This shows the UIKit Dynamics Section?
- SpriteKitController: This shows the SpriteKit section (it also contains a scene class and 2 particle system files)
- TextKitController: This shows the Text Kit section
Let's take a look at each of these:
UIKit Dynamics
This section consists of a square which is dropped from some part of the screen and starts falling down towards the bottom of the screen since it's affected by gravity.
In the middle of the screen, there is a gray bar. When the square touches the upper surface of this bar, it collides and the physics engine kicks in.
The way this behavior is achieved is by adding behaviors to the all of those objects. For instance, this is the code for the square:
We first create a UIDynamicsAnimator [1], which basically is the engine that handles all the things that have to do with the physics engine. A UIGravityBehavior is then created which is added to the animator. Now, we can tell the scene that we have some gravity.
Next, we add a UICollisionBehavior to the mBox object [2], which is an instance of UIView. Again, this behavior is added to the animator. Since all UI elements are essentially UIView's, you can apply the same behavior to a button or label or any other UI element.
Finally, we add a UIDynamicItemBehavior [3] to the animator. This tells the animator how a certain object should behave. In this case we tell the animator that the mBox object should be very elastic and have a low density.
It may look like a lot of coding but the good thing is that it's really not that complicated. It's just a matter of adding behaviors to an object and then telling the animator about this behavior.
Now you may ask: how do we handle collisions? That is easy. You set yourself as the collisionDelegate of a behavior and implement the following method:
As an addition, when you tap the box, a force gets applied and the code for that is:
[mDynamicItemBehaviour addAngularVelocity:M_PI forItem:mBox];[mDynamicItemBehaviour addLinearVelocity:CGPointMake(0, 1000.0) forItem:mBox];Granted, this demo is probably not going win any awards for great usage of UIKit Dynamics. But it serves as an example of what you can do with it. I'm sure you can come up with some interesting concepts to use this feature and make your UI more dynamic and natural.
SpriteKit
The concept of SpriteKit as a framework is not new. We already have a framework called Cocos2D, which is also a 2D game engine and has very similar features as SpriteKit.
However, by using SpriteKit you are certain that your iOS7 mobile app runs well across on all iOS devices. It also has some features that are difficult to do with Cocos2D, for example playing back video in your game.
To start with SpriteKit, you will need to understand the difference between SKScene's and SKNode's.
A SKScene is, as the name implies, a scene. In gaming terms it can be your intro scene, options scene, game over scene, etc.
Inside this scene, you load SKNode's or rather subclasses of SKNode's, which are drawn into the scene. For example, it can be a button, text, or a particle system.
Scenes can have transitions and animations during the switch between one scene to another. Loading a scene is simple: create it and present it.
mSpriteScene = [[SpriteKitScene alloc] initWithSize:mSpriteView.frame.size];[mSpriteView presentScene:mSpriteScene];Inside the scene is where the magic happens. Here, you create subclasses of SKNode's depending on what you want to show. For instance in the following code example, a particle node is created and attached to a path node, which represents a circle.
you can see that we also apply a physicsBody to the node. This is because we want the ball to be affected by gravity and all kind of physical behaviors.
Note that the first 4 lines are all about particles. We load a file created by the built in particle editor into our app and set some properties.
Text Kit
Before we go into the code let's talk about how Text Kit handles the text.
All text in a document is stored in an NSTextStorage, which can then have one or many NSLayoutManagers. Then you create a UITextView which by itself has an NSTextContainer.
Sounds complicated? It's really not. Just keep the following in mind: UITextView
An NSTextStorage can have many NSLayoutManagers
Let's look at some of this mobile app code:
From now on it's just a matter of creating a text container and attaching it to the text view. For example, you could do something like this:
Once you have everything set up, you can start having fun. In the following code example, text styles are applied to certain words.
You can get pretty radical with this by doing all kinds of text transformations. However for this demo we just changed the fonts :)
and add some properties to it. Then, you make a UIFont which is added to an attributes dictionary. This dictionary is added to the text storage as you can see in the loops at the end of the code.
The result is this:
Notice, we used "preferredFontDescriptorWithTextStyle". This is to make sure we support the Dynamic type feature and apply the text size to whatever the user has chosen.
There is much more to the code than what I just talked about. So, I encourage you to download the project and take a look for yourself. Play with it, modify it, but above all, let it inspire you so that can see what features you can add to your app to make it even more impressive.
Now if you’ll excuse me, I'll go back to having some fun coding more mobile apps for iOS 7... Cheers!
About the Webinar
iTexico hosted a live webinar on October 9th 2013 "Top iOS7 Enhancements keeping your Mobile App Relevant & Usable" where I along with Abhijeet Pradhan (Chief Technology Officer) and David Sandoval (UI/UX Project Manager) talked about why iOS 7 is so important for mobile app developers, mobile designers and the enterprise. Of course, the SDK changes used in Featurama were part of the demo! If you want to learn more about what was discussed during the iOS 7 webinar, check out the full presentation by clicking on the link below:
Jesus De Meyer has a Bachelors degree in Multimedia and Communication Technology from the PIH University in Kortrijk, Belgium. He has 15 years of experience developing software applications for Mac and more than 5 years in iOS mobile app development. He currently works at iTexico as an iOS Mobile App Developer and in his spare time he works on his own mobile apps.
No comments:
Post a Comment