Autolayout Take 4

Leave a comment

Here is how you hang one button beneath another.
You have x2 constraints you need to fullfill: x and y.

It’s confusing because we are going to draw x2 verticals lines, but the first is actually an x constraint.

The first constraint we are going to add is going to center the button horizontally under the upper button.

Screen Shot 2016-04-25 at 10.39.41 AM.png

Which results in

Screen Shot 2016-04-25 at 10.39.49 AM.png

So this is an x constraint – even though it looks visually like a y constraint. It’s red because we haven’t told it yet how to hang in the y. So we are going to do that now by adding vertical spacing by control dragging from the button button to the subscribe above.

Screen Shot 2016-04-25 at 10.40.10 AM.png

Which results it

Screen Shot 2016-04-25 at 10.40.17 AM.png

Now all our constraints have been filled and we are good to go!

Autolayout Take 3

Leave a comment

Here is how you do simple autolayout. Everything hinges of one element. So start at the top and work your way down.Screen Shot 2016-04-13 at 2.55.43 PM.png

Anchor Track Name to the top by dragging from label towards the top.

Screen Shot 2016-04-13 at 2.55.57 PM.png

This will give you one constraint. But you still need something to anchor you vertically.

Screen Shot 2016-04-13 at 2.56.09 PM.png

Control drag from Track Name down

Screen Shot 2016-04-13 at 2.59.21 PM.png

Screen Shot 2016-04-13 at 2.59.28 PM.png

Blue means you are good. Orange means you are OK, it just wants to adjust your layout. But Track Name is now good.

Next let’s anchor the Play button directly underneath the Track Name. Control drag from Play button to Track name again.

Screen Shot 2016-04-13 at 3.04.21 PM.pngScreen Shot 2016-04-13 at 3.04.28 PM.png


Now, same problem as before, Play is partially defined. We need to anchor it too. Control drag again down into the open.

Screen Shot 2016-04-13 at 3.07.21 PM.pngScreen Shot 2016-04-13 at 3.07.28 PM.png

Now we need to hook up the next previous buttons. Here we can control drag from Play to each selecting Horizontal spacing.

Screen Shot 2016-04-13 at 3.11.25 PM.pngScreen Shot 2016-04-13 at 3.11.57 PM.png



And then the magic move is to a line on the play button by going

Screen Shot 2016-04-13 at 3.44.46 PM.pngScreen Shot 2016-04-13 at 3.44.52 PM.png

And repeating for the next button.

For the ImageView let’s set it up so that there is a always a margin to the right. Control drag from image view to the right border


Screen Shot 2016-04-13 at 3.46.21 PM.png


Screen Shot 2016-04-13 at 3.46.39 PM.png

Now to get it to respect the border, click on the constraint and go adjust the options on the right margin as follows

Screen Shot 2016-04-13 at 3.47.51 PM.pngScreen Shot 2016-04-13 at 3.48.35 PM.png

This means give me at least a 15 margin, with a lower priority of 500.

Repeat for the other side and bottom

Screen Shot 2016-04-13 at 3.50.27 PM.png


Now another magic move is to have a constraint on it’s aspect ratio so it stays a square.

Screen Shot 2016-04-13 at 3.51.05 PM.png

And of course anchor it to the top via the play button.

Then to fix the final layout issues on the image view add various anchors around the image view, and you can always check and see what constraints are missing by looking in the upper right hand corner.


Screen Shot 2016-04-13 at 4.12.50 PM.png

Screen Shot 2016-04-13 at 4.12.57 PM.png

Screen Shot 2016-04-13 at 4.13.04 PM.png

Screen Shot 2016-04-13 at 4.13.09 PM.png


AppCode Formatting

Leave a comment

When you go Alt + Option + Command you can instantly reformat all your code in AppCode. But sometimes you want to adjust the layout to meet your teams coding standard.

Here is a list of tweaks I have had to make and where to find them in AppCode.

Adding a space after a property

Screen Shot 2016-04-11 at 8.22.08 AM.png

Ones I haven’t figured out yet

There should be no space between id and Protocol here.

@property(nonatomic, strong) id<PlayerAPI> playerAPI;

Space after const in variable

ConnectionParams * const connectionParams =

AppDoc examples

Leave a comment

/// @c YES if the user can play songs on demand, otherwise @c NO.

 *  Fetches the foo.
 *  @param callback A callback block that will be invoked when the fetch request has completed.
 *                  On success `result` will be populated by an instance of `id<Foo>`.
 *                  On error `result` will be `nil` and `error` will be set.
- (void)fetchFooWithCallack:(nullable FooCallback)callback;

 * Initializes a new user API.
 * @discussion This is the designated initializer.
 * @param client A client responsible for sending and receiving messages
- (instancetype)initWithClient:(Client *)client;

Objective-C Object Initialization

Leave a comment

Here are some guidelines and macros for using designated initializers in objective-c.

Basically you pick your own initializer as the designated one. And the assumption is that it will call it’s parent when initializing.

If you have many convenience initializers, they should all come down to one main initializer. You can make that one up with the NS_DESIGNATED_INITIALIZER macro also.


@interface Foo : NSObject

* Initializes a new user API.
* @discussion This is the designated initializer.
* @param client A client responsible for sending and receiving messaging to Spotify app.
- (instancetype)initWithClient:(Client *)client NS_DESIGNATED_INITIALIZER;

#pragma mark Unavailable Initializers

- (instancetype)init NS_UNAVAILABLE;
+ (instancetype)new NS_UNAVAILABLE;


@implementation SPTAppRemoteUserAPIImplementation

- (instancetype)initWithClient:(Client *)client
   self = [super init];
   if (self) {
       _client  = client;
   return self;

How to add XCode subproject

Leave a comment

When you have an XCode project and you want it to depend on another project (say because you want to depend on the output binary), just drag the project file in from the finder and setup the Target and Binary dependencies so it looks like this:

Screen Shot 2016-04-04 at 3.07.12 PM.png


Drag in the subproject into your main project folder

Screen Shot 2016-04-04 at 3.28.37 PM.png

Screen Shot 2016-04-04 at 3.28.44 PM.png


Then select your project -> Build phases to add the Target Dependencies

Screen Shot 2016-04-04 at 3.28.55 PM.png


Then add the Link Binary with Libraries

Screen Shot 2016-04-04 at 3.29.05 PM.png

Now your project will build with the subproject and always get the latest binary.

Filling areas using transparent color without affecting the border, in Illustrator CS6

Leave a comment

If you ever want a transparent brush with which to color your illustrations, open up the appearance window and lower the brush opacity.

Screen Shot 2016-04-01 at 6.32.38 AM.png


Older Entries


Get every new post delivered to your Inbox.

Join 343 other followers

%d bloggers like this: