iOS Development Tips

iOS, Xcode, Cocoa, UIKit and Objective-C tips, tricks and tutorials for iOS and Mac developers.

[iosdevtips]

How to disable iOS 9 App Transport Security in Xcode 7, and fix ‘Could not connect to the server’ errors

Apple made a radical decision with iOS 9, disabling all unsecured HTTP traffic from iOS apps, as a part of App Transport Security.

This helps in enforcing security best practices, but in many scenarios, you, the developer, don't control the server, or if you do, you want to load external content like arbitrary links in an in-app browser.

If you try to make HTTP requests with ATS enabled (using NSURLSession or libraries like AFNetworking), you'll see errors like this:

Error Domain=NSURLErrorDomain Code=-1004 "Could not connect to the server." UserInfo=0x12ed5bad0 {NSUnderlyingError=0x12ee495b0 "The operation couldn’t be completed. (kCFErrorDomainCFNetwork error -1004.)"

Or this:

NSURLSession/NSURLConnection HTTP load failed (kCFStreamErrorDomainSSL, -9802)

Or this:

App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.

Here's how to disable ATS entirely. Open Info.plist, and add the following lines:

Your Info.plist should look like this after adding these lines:

Please keep in mind that this solution should be your last resort. You'd ideally want to enable HTTPS on your service, or next, whitelist domains on which you want HTTP and if none of this is possible, then use this approach. Refer to this post for the finer details.

[iosdevtips]

Notes: The interesting things from WWDC, iOS 9, Swift 2

The WWDC keynote today was great, except for the part where it just wouldn't end. Tons of new stuff on the development front including Swift 2, iOS 9, CloudKit etc.

Here are some notes I gathered while browsing release notes, API diffs, feature pages and so on.

You no longer need a $99 developer membership to run iOS apps on your device using Xcode. Additionally, Mac and iOS developer membership have been merged, the price remaining the same:

Interface Builder can render blurs and transparency

Objective-C gets generics, which means collection objects like arrays, dictionaries can have specific types, just like Swift:

There’s a new UI class called UIStackView, which is a port of Mac’s NSStackView.

CloudKit can now be used on web too.

CASpringAnimation is public!

Apps can plug in to Safari as extensions and block content. Ad blockers incoming? Additionally, apps can populate content in Safari’s Shared Links section.

Developers can use SFSafariViewController, which has shared cookies, auto fill and other features from Safari.

UIPickerView can be resized to any size. No more ugly transform hacks.

iOS apps can show a text field in notifications, which was previously restricted to Messages.

Contacts can be finally accessed via an object oriented API, as opposed to the earlier C API.

Calling API methods not available on minimum deployment target causes a compile time error. There’s a new available condition to conditionally execute code and avoid crashes for using new APIs:

UICollectionView got a lot of new methods to support interactively moving items

There’s a new UIFieldBehavior in UIKit Dynamics that lets you model vector force fields. Examples of it include gravity, electric or magnetic fields etc.

(Image credit: Wikipedia)

Xcode Assets Catalog: Devices won’t download assets of all sizes, only 1x, 2x or 3x depending on its traits, reducing the app size.

Some interesting links: 

API Diffs

Apple’s Swift 2 prerelease ebook

Xcode 7 release notes

[iosdevtips]

Tip: Avoid retain cycles without doing the strong to weak dance

Retain cycles. We’ve all likely been bitten by it at least once. Especially with the increasing role blocks/closures play in modern day iOS development. As you probably already know, referencing any object from inside a block captures a strong reference to it, and if that object copies/retains the block, it results in a retain cycle, that could cause a memory leak unless the block is manually nil’ed out.

There’s of course a well-known way to avoid this problem. Use a weak reference with the __weak qualifier, but while looking at Facebook’s Pop open source project, I came across an interesting alternate solution.

From PopCustomAnimation.h:

/** @param target The object being animated. Reference the passed in target to help avoid retain loops. */ typedef BOOL (^POPCustomAnimationBlock)(id target, POPCustomAnimation *animation);

The parameters in the block are, in a way, redundant, because you can always get an implicit reference to these variables (through block’s scope variable capturing), but it’s very useful because now you can use these parameters rather than declaring a weak reference outside a block and using that.

This way you avoid retain cycles without having to do the whole strong → weak dance.

So the next time you’re designing an API that has a block or closure, keep this tip in mind. 

[iosdevtips]

How to easily inspect the return value of methods with breakpoints and Xcode’s debugger

I’m sure you’ve often wanted to inspect the return value of a method in Xcode’s debugger with breakpoints. But because you can’t put a breakpoint after the last line of a method, it becomes slightly tricky to figure out the return value. Thankfully, there’s an easy trick.

First, add a breakpoint to the last line of the method:

Build and run your project, and let Xcode break at the last line. Then, click on the “step out” button in the debugger panel:

After clicking the button, the control goes to the caller of this method, and in addition to the other variables in the current scope, you’ll also see a “Return Value” in the Variables View, from where you can inspect it, QuickLook preview it (click + space bar), print its description etc.

As you might have noticed in the code fragment at the top, I’m returning the UIBezierPath directly without storing it in an intermediate variable, so it wasn’t immediately obvious as to how to inspect it in the debugger. With this trick, you can inspect the return value without having to change your code and introduce an intermediate variable.

[iosdevtips]

RJImageLoader Animation with CAShapeLayer

Michael Villar's excellent Motion Experiments post had a great image loading animation. RJImageLoader is a recreation of that animation in Objective-C for iOS.

If you want to know how it was implemented, read this tutorial on raywenderlich.com.

Fork/Clone/Pod/Contribute!

[iosdevtips]

Replicating Twitter's bird zoom startup animation (in Swift!)

Twitter recently updated its iOS app with a really cool startup animation that transitions from the Default.png to the timeline view. The animation uses the Twitter bird as a window into the timeline view, and then zooms it in. Here's a demo:

Replicating the basic animation it is fairly easy. To make the starting point as simple as possible, I used a screenshot of my timeline rather than a full-blown UITableView. The other thing that's required is the Twitter logo, and Twitter lets you download that from its Brand Assets page.

So let's dive right in.

I started off with an empty Swift project, and wrote all my code in the AppDelegate itself.

First, let's add the screenshot on the window:

let imageView = UIImageView(frame: self.window!.frame) imageView.image = UIImage(named: "twitterscreen") self.window!.addSubview(imageView)

Our strategy to use the logo as a window into the main view can be implemented as a mask on CALayer. Every CALayer has a mask property that is also a CALayer and lets you mask the main layer or view. Here's how Apple describes it:

The mask layer’s alpha channel determines how much of the main layer’s content and background shows through. Fully or partially opaque pixels allow the underlying content to show through but fully transparent pixels block that content.

This sounds like what we want. We can put the Twitter logo in a new layer using the contents property, and use this layer as a mask for the image view:

self.mask = CALayer() self.mask!.contents = UIImage(named: "twitter logo mask").CGImage self.mask!.bounds = CGRect(x: 0, y: 0, width: 100, height: 100) self.mask!.anchorPoint = CGPoint(x: 0.5, y: 0.5) self.mask!.position = CGPoint(x: imageView.frame.size.width/2, y: imageView.frame.size.height/2) imageView.layer.mask = mask

Try running the project, and you should have the mask setup.

Next up, animating the mask. You'll observe that the bird reduces in size for a bit, and then increases in size, so to do that using just one animation, let's use CAKeyframeAnimation.

let keyFrameAnimation = CAKeyframeAnimation(keyPath: "bounds") keyFrameAnimation.duration = 1 keyFrameAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut), CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)] let initalBounds = NSValue(CGRect: mask!.bounds) let secondBounds = NSValue(CGRect: CGRect(x: 0, y: 0, width: 90, height: 90)) let finalBounds = NSValue(CGRect: CGRect(x: 0, y: 0, width: 1500, height: 1500)) keyFrameAnimation.values = [initalBounds, secondBounds, finalBounds] keyFrameAnimation.keyTimes = [0, 0.3, 1] self.mask!.addAnimation(keyFrameAnimation, forKey: "bounds")

Getting the animation's final size and timing right took some hit and trial, but I'd say the final result seems like a decent copy of the original one:

One improvement could be having Twitter's blue color outside the mask. Pull requests welcome! See the project on GitHub.

Liked the post? Follow me on Twitter @r0unak and try Design Shots, the best iPhone Dribbble app.

[iosdevtips]

Replicating UIScrollView's deceleration with Facebook Pop

Earlier this week Ole Begemann wrote a really great tutorial on how UIScrollViews work, and to explain it effectively, he even created a really simple scroll view, written from scratch.

The setup was quite simple: Use a UIPanGestureRecognizer, and change the bounds’ origin in response to translation of the pan gesture.

Extending Ole’s custom scroll view to incorporate UIScrollView’s inertial scrolling seemed like a natural extension, and with Facebook’s recent release of Pop, I thought it writing a decelerating custom scroll view would be an interesting weekend project.

In case you’re unaware, Pop is Facebook’s recently open-sourced animation framework that powers the animations in Paper for iOS. The Pop API looks mostly like CoreAnimation, so it isn’t that difficult to learn.

Two of the best things about Pop:

It gives you spring and decay animations out of the box

You can animate any property on any NSObject using Pop, not just the ones that are declared animatable in UIKit

Given that Pop has built-in support for decaying animations, implementing UIScrollView’s deceleration isn’t very tough.

The main idea is to animate the bounds’ origin in a decaying fashion using the velocity off the UIPanGestureRecognizer in its ended state.

So let’s begin. Start off by forking my fork of Ole’s CustomScrollView project, jump to the handlePanGesture: method in CustomScrollView.m. (Why start with my fork and not Ole’s project? He sets the translation to zero each time the gesture fires, which in turn resets the velocity. We, however, want the velocity to be preserved.)

We want to start a decay animation only after the gesture has finished, so we’re interested in the UIGestureRecognizerStateEnded case of the switch statement.

Here’s the basic flow of the code fragment embedded below:

We get the velocity of the gesture with the velocityInView: method.

CGPoint velocity = [panGestureRecognizer velocityInView:self];

We do not want any movement in x or y direction if there’s not enough horizontal or vertical content respectively. So we add checks for that.

if (self.bounds.size.width >= self.contentSize.width) { velocity.x = 0; } if (self.bounds.size.height >= self.contentSize.height) { velocity.y = 0; }

Also it turns out that the velocity we get from the velocityInView: method is the negative of what we actually want, so fix that.

We want to animate the bounds (specifically the bounds’ origin) so create a new POPDecayAnimation with the kPOPViewBounds property.

POPDecayAnimation *decayAnimation = [POPDecayAnimation animationWithPropertyNamed:kPOPViewBounds];

Pop expects the velocity to be of the same coordinate space as the property you’re trying to animate. The value will be an NSNumber for alpha (CGFloat), CGPoint wrapped in NSValue for center, CGRect wrapped in NSValue for bounds and so on. As you might have guessed, the change in the property value during the animation is a factor of the corresponding velocity component.

In our case, animating bounds means our velocity will be a CGRect, and its origin.x and origin.y values correspond to the change in the bounds' origin. Similarly, the size.width and size.height velocity components correspond to the change in the bounds’ size.

We don’t want to change the size of the bounds, so lets keep that velocity component zero always. Feed in the origin.x and origin.y values of the velocity with the pan gesture’s velocity. Wrap the whole thing into an NSValue and assign it to decayAnimation.velocity

decayAnimation.velocity = [NSValue valueWithCGRect:CGRectMake(velocity.x, velocity.y, 0, 0)];

Finally, add the decayAnimation to the view using the pop_addAnimation: method with any arbitrary key you want.

[self pop_addAnimation:decayAnimation forKey:@"decelerate"];

Here's the combined code:

With this you should have the basic deceleration working. You’ll notice that if your velocity is high, the view will scroll beyond its contentSize, but this could easily be solved by overriding setBounds: and adding checks to see that the bounds origin do not go beyond the thresholds. I’m surprised that Pop doesn’t add these checks itself.

A really interesting aspect of Pop is the ability to animate any property at all, not just ones declared as animatable by UIKit. Since we’re just animating the bounds’ origin, I thought this was a good chance to try out Pop`s custom property animation.

Pop lets you do this is by giving you constant callbacks with the progress of the animation, so that you can update your view accordingly. It takes care of the hard part of handling timing, converting the timing into the value of your property, decaying or oscillating the animation etc.

So here’s how you’ll do the same thing we did earlier, but now with your own custom property. Specifically, we’ll animate bounds.origin.x and bounds.origin.y. You’ll see that the structure of the code largely remains the same, except for the initialisation of this giant POPAnimatableProperty.

The property name, as I understand, can be any arbitrary string. In this case, I’ve taken it to be @"com.rounak.bounds.origin"

There’s also an initializer block with POPMutableAnimatableProperty as the argument. (I think this initialisation pattern is called the builder pattern.)

POPMutableAnimatableProperty has two important properties, readBlock and writeBlock. In readBlock you’ll have to feed data to Pop, and writeBlock you’ll have to retrieve that data, and update your view. The readBlock is called once whereas the writeBlock is called on each frame update of the display (via CADisplayLink).

Pop internally converts everything into vectors, and hence it asks and gives you data in the form of a linear array of CGFloats.

In readBlock you simply assign bounds.origin.x and bounds.origin.y to values[0] and values[1] respectively.

prop.readBlock = ^(id obj, CGFloat values[]) { values[0] = [obj bounds].origin.x; values[1] = [obj bounds].origin.y; };

And in writeBlock you read values[0] (bounds.origin.x) and values[1] (bounds.origin.y) and update your view’s bounds.

prop.writeBlock = ^(id obj, const CGFloat values[]) { CGRect tempBounds = [obj bounds]; tempBounds.origin.x = values[0]; tempBounds.origin.y = values[1]; [obj setBounds:tempBounds]; };

The magic happens in the writeBlock which is called each time with values that follow a decay (or an oscillating) curve.

You’ll notice that since we’re operating in just two dimensions here, our velocity is CGPoint, and not CGRect.

Here's the combined code:

The entire project with the deceleration can be found on GitHub.

Liked the post? Follow me on Twitter @r0unak and try Design Shots, our Dribbble app.

[iosdevtips]

Experimenting with Facebook's open source animation framework POP

Facebook today open sourced its highly-anticipated animation framework called Pop that powers the animations in the Paper for iOS app.

Pop's methods for defining animations resemble Apple's Core Animation API, so it should be quite easy to pick up if you've worked with CoreAnimation before. Even if you haven't, writing a basic animation with Pop is quite easy.

Here's a simple animation to move a view from one point to another with a spring effect:

POPSpringAnimation has a few more properties to define the behavior of the spring, including springBounciness and springSpeed. Changing its values to this:

springAnimation.springBounciness = 20; springAnimation.springSpeed = 20;

Makes the animation look like this:

The property you want to animate is represented by a POPAnimatableProperty. The property can expectedly be on your view or layer, but Pop actually lets you animate any property on an NSObject (for example constraints). There are a bunch of convenient constants to help create a POPAnimatableProperty using the propertyWithName: initalizer:

kPOPViewAlpha; kPOPViewBackgroundColor; kPOPViewBounds; kPOPViewCenter; kPOPViewFrame; kPOPViewScaleX; kPOPViewScaleXY; kPOPViewScaleY; kPOPViewSize;

You can get callbacks on start, end, etc. by implementing the POPAnimationDelegate protocol and assigned your class' object as POPAnimation delegate.

- (void)pop_animationDidStart:(POPAnimation *)anim; - (void)pop_animationDidReachToValue:(POPAnimation *)anim; - (void)pop_animationDidStop:(POPAnimation *)anim finished:(BOOL)finished;

If you've worked with top level UIView block animation APIs, pop will take some time getting used to, especially for finding UIView equivalent properties. I found out that POPSpringAnimation doesn't have a duration property, instead (I assume) its timing is controlled by its velocity and spring properties. And if you're hunting for the equivalent of delay, it's beginTime (which mirrors Core Animation APIs).

There's still a lot to explore in Pop, and I'm particularly fascinated by its ability to animate arbitrary properties of any object. I'll try to explore this angle further.

Liked the post? Follow me on Twitter @r0unak and try Design Shots, our Dribbble app.

[iosdevtips]

Xcode got updated to version 5.1.1 today. Release notes say there are a lot of bug and crash fixes. Hoping Xcode crashes lesser with this update.

[iosdevtips]

The best Xcode plugins

There are a lot of Xcode plugins to augment the IDE with additional features, conveniences etc., but it is a pain to discover and install such plugins. Alcatraz is a really great package manager that makes it a breeze to install Xcode plugins. Here’s how it looks:

In Alcatraz, you’ll find plugins, color schemes and templates for code fragments. You can install it by visiting alcatraz.io.

Here are some of the best Xcode plugins available in Alcatraz to boost your productivity:

Fuzzy Autocomplete

Like the fuzzy search in the Open Quickly (⌘ + Shift + O) dialog? Bring the same fuzzy search to variable auto completion:

Easy text manipulation

Delete whole line(s)

Copy whole line, where there's no text selection

Move to first non-blank character when you press ⌘ + ←

BBUDebuggerTuckAway

Make your debugging sessions more pleasant with this plugin that auto hides the debugger as soon as you start typing:

Adjust Font Size

Increase or decrease font size with ⌘+ or ⌘-.

KSImageNamed

See the actual image while typing [UIImage imageNamed:]. Magical!

Lin

See localisations of a string as you type NSLocalizedString

QuickLocalization

Quickly convert @"string" to NSLocalizedString(@"content", @"content") with a keyboard shortcut

OMColorSense

Like KSImageNamed, but for UIColors. Don’t like the color? Edit it with the standard color picker, and the plugin will insert the RGB values for you:

Developer Color Picker

Pick colors from anywhere in the system, and copy them as [UIColor colorWithRed:blue:green]

SCXcodeSwitchExpander

Have an enum, and want to write a switch statement with all enum values? Type the variable, and the plugin generates all the cases:

SCXcodeMinimap

Get a Sublime Text like minimap in the standard Xcode editor

BlockJump

Jump between methods, pragma marks etc. with keyboard shortcuts.

XAlign

Align code around the = sign, by #defines and @property

Xvim

Bring Vim key bindings to Xcode. Sadly this plugin breaks with Xcode 5.1.

Think I've missed a useful plugin? Let me know. I'm @r0unak on Twitter.

[iosdevtips]

What happens when you call valueForKey on NSArray or NSSet

I’m slightly familiar with key value coding, but never really used it in any project. But I think I’ve found a good use for KVC, which I didn’t know about:

Calling valueForKey on a collections like NSArray or NSSet calls valueForKey on each member of the array or set.

What’s the use of this, you ask? Read on.

An example use case from our Dribbble app Design Shots — I have a User object and a Comment object. Each comment has a user property, and I have an array of such comments.

To get all the users who’ve commented, I’d normally have to do this:

NSMutableArray *users = [NSMutableArray array]; for (Comment *comment in self.comments) { [users addObject:comment.user]; }

But with KVC, I can do this in just one line:

NSArray *users = [self.comments valueForKey:@"user”];

Internally, valueForKey is called on each comment with the @“user” key, which returns a User object. These objects are then returned as an array in the users variable.

Have any feedback about this topic? I'm @r0unak on Twitter

[iosdevtips]

This changes everything: Xcode 5.1 can now Quicklook preview, debug UIViews

One of the main reasons why Reveal is so useful is that it lets you see UIViews objects that are not visible on the screen. Xcode 5 added support for previewing UIImage objects, and Apple has extended QuickLook preview to UIViews as well, with Xcode 5.1.

To see this in action, just fire up any project, put a breakpoint at any line that has a UIView, and click on the eye icon, either in the debugger after clicking on a variable, or by hovering over a UIView object in your editor:

And this is what you see when you click:

This is going to be really great for one of those debugging sessions where the UIView exists, but it isn't partially or fully visible on the screen.

(Screenshot of Design Shots, a Dribbble iPhone app you should try!)

Have any feedback about this topic? I'm @r0unak on Twitter

[iosdevtips]

Create your own custom loader UIActivityIndicatorView

Ever wanted to have your own custom loader view instead of iOS’ default spinning circle?

If what you want isn’t very complicated, you could probably achieve it very easily using UIImageView's animationImages property. The catch is that your animation should be easily expressible with images. If so, you do:

[iosdevtips]

Xcode tip: See who committed a certain line in a file

Working on a project with multiple people and discovered a glaring bug? There's an easy way to see who was responsible for committing it using Xcode's advanced source control features.

Just right click on the line and click on "Show Blame for Line"

Once you click that, you should see the person who committed the line along with the commit message for further context:

From here you can see the diff between your working copy and the revision when that particular change was committed or see the "blame" for the entire file.

You can access the same view by long clicking the "Version Editor" button at the top-right in Xcode.

[iosdevtips]

Monitor changes to an @property with this simple tip (And no extra code!)

Ever wanted to monitor changes to a property of a class? I would initially implement a custom setter for the property and then add a breakpoint in that function, but there’s an easier way.

Just put a breakpoint on the line you’ve declared your @property:

Now when the value of this property is being changed, control would come to this breakpoint, and give you a stack trace so that you know where the value change is happening:

Really neat right?

Happy debugging!

[iosdevtips]

Search for methods easily in a file or project

Finding methods in a huge file can be a tough task, especially if you use the usual Find option and have to jump over all the method calls to finally arrive at the method definition. Fortunately, there's a simple way to do this.

Find methods within a file

You might have seen the dropdown that lists all the functions in a file. It is accessible from the "breadcrumb" bar at the top:

When you click on the rightmost element, you'll get all the functions in your current file:

But it's difficult to discover that you can also search within this list of functions names. To do so, simply start typing the first few letters of the method name you want to find and the search box should automatically appear:

Find methods within a project

There might also be cases where you don't know where a method is declared or defined. In such situations, you can use the the "Open Quickly" search box, which can be opened by pressing ⌘ + Shift + O. Just start typing in the method name, and it should start giving you suggestions, narrowing down the results as you type. (Note that your results will also contain files.

[iosdevtips]

Painless, easy UIImage debugging

If you've tried to create a UIImage instance from data fetched over the network, you know the errors that could come up. To easily verify if your image has been initialised correctly, you can use this simple tip.

Set a breakpoint one line after you've initialised your UIImage object.

When the control halts at that line, hover over your UIImage object, and you should see a popover like this:

Click on the eye icon beside the "i" icon, and you'll see a quicklook popover that should contain your image. (If everything is done right.)

As you can imagine, this is a much better debugging technique than creating a temporary UIImageView just to show the image. (Unless of course, you need the UIImageView in your app.)

(Screenshots from Pinterest's "Pin It" demo project.)