Autolayout with Stack View

Leave a comment

Stack view is handy for displaying things in autolayout. For example say we want to autolayout this here calculator with all it’s buttons.

We are going to do this by taking row of buttons and embedded them in a stack

Then we take the five stacks and stack them together.

Then we are going to stack that whole thing with the blue display in a stack of stacks.

Then we are going to bind the top, bottom, left, and right to the outer edges.

Setup the stacks

So let’s start at the bottom and create a stack of the bottom row like so

Screen Shot 2016-10-08 at 7.10.33 AM.png

Then take all of these, and put them in a stack.

Space them out like so

Screen Shot 2016-10-08 at 7.11.54 AM.png

Screen Shot 2016-10-08 at 7.12.33 AM.png

Repeat the process for each row, and then add them all in one master stack (expect for the top display).

Screen Shot 2016-10-08 at 7.15.21 AM.png

Then do alignment fill and spacing.

Screen Shot 2016-10-08 at 7.16.06 AM.png

Screen Shot 2016-10-08 at 7.16.33 AM.png

And then include that with the top display in yet another stack.

Screen Shot 2016-10-08 at 7.17.12 AM.png

Screen Shot 2016-10-08 at 7.19.46 AM.png


Do the autolayout

And now we use the blue lines for the autolayout.

Control drag to the top, left, right, bottom as follows

Screen Shot 2016-10-08 at 7.21.12 AM.png

Screen Shot 2016-10-08 at 7.22.13 AM.png

Screen Shot 2016-10-08 at 7.23.12 AM.png

Cntl – Shot – Click let’s you select select a particular element under the mouse.

Screen Shot 2016-10-08 at 7.23.46 AM.png

Screen Shot 2016-10-08 at 7.25.47 AM.png

If we want an IBeam or constraint to go all the way to the edge and not just up next to it we can double click on it and change it to 0 points away


Screen Shot 2016-10-08 at 7.26.28 AM.png

Screen Shot 2016-10-08 at 7.27.20 AM.png

Screen Shot 2016-10-08 at 7.27.58 AM.png

Then do the same for the bottom, but this time select standard view (I don’t know why, just because it’s there)

Screen Shot 2016-10-08 at 7.29.21 AM.png

Screen Shot 2016-10-08 at 7.29.34 AM.png

Now when we do this is stretched our upper numbers. Meaning we did something bad with that spacing. We can fix by finding the button alone that top that was set to Fill but should really be Fill Equally.

Screen Shot 2016-10-08 at 7.30.05 AM.png

Screen Shot 2016-10-09 at 6.35.33 AM.png

Screen Shot 2016-10-08 at 7.32.13 AM.png

And all this can be viewed from Paul Hagerty Stanford video at the end of lesson 2.

The Way of the Web Tester

Leave a comment

Screen Shot 2016-09-15 at 5.45.37 AM.png

Hello everyone. A book I have been working on diligently for the last two years has finally hit the shelves. It’s called The Way of the Web Tester and it’s a book for anyone who wants to learn how to write automated tests for the web.

What’s in this book?

The book starts out by explaining what the three kinds of tests are that we typically see in web projects, along with some rules of them and guidance on where and when to use each.

We they spend a full two chapters at each level of something called the testing pyramid seeing how to add UI tests to legacy systems, how one can test web services, along with some rules of thumb around unit testing. That’s Part I.

Screen Shot 2016-09-15 at 6.25.50 AM.png

In Part II we build on the concepts outlined in the testing pyramid, but shift our focus to those skills specifically geared towards writing good tests.

First we look at some of the basics of programming, and show how by learning a few simple principles and practices we can dramatically increase the readability and maintainability of our automated tests.

We then look at some practices around test organization, and see how by simply grouping and organizing our tests in certain ways can make maintaining our tests so much easier.

And in the chapter on effective mocking, we look at some of the perils that come with this style of unit testing, and see how we can use mocks effectively while staying out of the swamp of mocking.

And we conclude with a section on the art of writing tests first. And see how beginning with the end in mind not only helps you test your systems, it can actually help you iterate on your design.

Who is this book for?

Screen Shot 2016-09-15 at 6.52.26 AM.png

If you are a tester who’s always wanted to get into test automation, this is the perfect book for taking that first step into a larger world.

If you are a developer, and you’d like to learn how to make your code even more robust, this book will show you how to move fast without breaking stuff.

And if you are team lead, looking better ways to get your testers and developers together, his is the Rosetta Stone you’ve been looking for.

Once your team has a common framework, language and understanding around automated testing, they will be able to better coordinate they’ll their efforts and write the best automated tests for your project.

So wait no further. Crush bugs. Move fast. And have fun. I hope you enjoy The Way of the Web Tester.

On sale now at all reputable book stores.


How to create embedded extension app in Swift that calls back to host

Leave a comment

Create embedded extension

Create a new Single View Application (MyViewController)

Find the ‘+’ sign ‘Add a target’

Screen Shot 2016-09-29 at 7.07.55 AM.png

Click the iMessage Extension and give it a name (MyMessageExtension)

Screen Shot 2016-09-29 at 7.08.18 AM.png

Go ahead and Activate the scheme

Screen Shot 2016-09-29 at 7.09.46 AM.png

Should now see a new target representing your extension.

Screen Shot 2016-09-29 at 7.10.02 AM.png

If you run you should now see

Screen Shot 2016-09-29 at 7.10.53 AM.png

Screen Shot 2016-09-29 at 7.11.44 AM.png

Add the navigate back to host action

Add a button and outlet action to so when pressed extension redirects back to host.

Screen Shot 2016-09-29 at 7.16.38 AM.png

And add the follow code to the button action

import UIKit
import Messages

class MessagesViewController: MSMessagesAppViewController {

    @IBAction func hostPressed(_ sender: AnyObject) {
        let selectedName = "Jonathan"
        let URL = NSURL(string: "extension://name=\(selectedName)")!
        extensionContext!.open(URL as URL) { success in
            print("openURL returned: \(success)")

What this code is saying, is we are going to navigate back to our host, by creating a URL and passing a single variable in it.

Screen Shot 2016-09-29 at 7.18.50 AM.png

Now if you run this right now it won’t yet work. We need to register this URL scheme with our host application so it knows to wake up and receive URLs that start with ‘extension’.

Add URL schema to host

Click on your main Single Page View application target and click your Info.plist

Screen Shot 2016-09-29 at 7.23.17 AM.png

Screen Shot 2016-09-29 at 7.24.30 AM.png

This next part is tricky because adding URLs is a pain with the editor. But this is the URL schema we want to create is this. So go ahead.

Screen Shot 2016-09-29 at 7.25.21 AM.png

Or do as follows

Move your mouse over ‘Information Property List’ until you see a plus sign form on the right. Click it.

Screen Shot 2016-09-29 at 7.46.41 AM.png

Then start typing URL types and then hit return

Screen Shot 2016-09-29 at 7.46.50 AM.png

Then click the arrow pointing right, beside URL types, to expand it

Screen Shot 2016-09-29 at 7.49.37 AM.png

Click the right pointing arrow again, this time on Item 0 and add your extension value there.

Screen Shot 2016-09-29 at 7.50.44 AM.png

To add the value to host on Item 0 hit the ‘+’ sign to the right of Item 0 (adding a row) and start typing URL Schemes

Screen Shot 2016-09-29 at 7.53.24 AM.png

Then expand the arrow to the left of your scheme and double click the value column to enter your value there

Screen Shot 2016-09-29 at 7.55.51 AM.png

You should now be ready. Phew!

We can now go back to our extension target, run it, and when we press the button we should navigate from our embedded extension back to our host application.

You will know you are successful if you start here

Screen Shot 2016-09-29 at 7.36.21 AM.png

and you end up here (you can add a label to your host application if you want to verify you made it back.

Screen Shot 2016-09-29 at 7.36.29 AM.png

Note! Don’t worry if the simulator dies when you hit the button navigating back. That’s expected. The simulator kills the extension when you navigate back. You are now changing application back to your host application. So that’s OK.

If you want to see if run smoothly install it on your phone and try it there. Should work no problem.

Good luck!

How to hookup dataSource and delegate UITableViewDataSource

Leave a comment

I always forget this. To hookup your your UITableView to your ViewController always remember to control drag from your outlets to the ViewController.

You can do it by dragging your table up to your viewController like this all in the single pane.

Screen Shot 2016-09-28 at 4.39.44 PM.png

Or you can drag across the screen by selecting your table and dragging from the outlets on the right to your viewController on the left.

Screen Shot 2016-09-28 at 8.49.10 AM.png

Screen Shot 2016-09-28 at 8.48.56 AM.png

How to dynamically move UIView with autolayout

Leave a comment

Here we see an example of how to move an entire UIView with auto layout.
The idea here is to:

  1. Create a UIView
  2. Add some controls to it
  3. Make something happen.
  4. And then move the entire view by adjusting the value of a constraint.

First create a new single page application and drag a UIView onto it.

Screen Shot 2016-09-28 at 7.30.02 AM.png

Give it a background colour of green. Stretch it out so it locks to the sides of the parent view.

Then add have autolayout automatically add some constraints to it by clicking

Screen Shot 2016-09-28 at 7.37.57 AM.png

Screen Shot 2016-09-28 at 7.38.07 AM.png

This will automatically add the necessary constrains for us. Including the top one which we want to manipulate.

Then drag the top constraint over as an outlet, and add two buttons to reset it’s size programatically.

The buttons are going to reside inside our new UIView

Screen Shot 2016-09-28 at 7.39.59 AM.png

We are going to slide the whole view up/down by pressing the buttons and manipulating the value of the top constraints.

Add constraints to the Up/Down buttons so they stay embedded in the UIView like so

Screen Shot 2016-09-28 at 7.40.55 AM.png

Screen Shot 2016-09-28 at 7.41.26 AM.png

Screen Shot 2016-09-28 at 7.41.36 AM.png

Screen Shot 2016-09-28 at 7.42.03 AM.png

Your constraints should now look like this.

Screen Shot 2016-09-28 at 7.42.20 AM.png

Now the fun part. Add code to slide the entire UIView up and down.

Do this by adding actions for the up/down buttons and the following code.

If you want to get fancy you can add an animation like in the down button.

All the code and everything should eventually look like this.

Screen Shot 2016-09-28 at 7.50.09 AM.png


#import "ViewController.h"

@interface ViewController ()
@property (strong, nonatomic) IBOutlet UIView *baseView;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *topConstraint;

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    CGRect newFrame = self.baseView.frame;

    newFrame.size.width = [[UIScreen mainScreen] bounds].size.width;
    newFrame.size.height = [[UIScreen mainScreen] bounds].size.height;
    [self.baseView setFrame:newFrame];

    self.baseView.userInteractionEnabled = YES;

- (IBAction)upPressed:(UIButton *)sender {
    NSLog(@"Up pressed");
    self.topConstraint.constant = 0;
    [self.view layoutIfNeeded];

- (IBAction)downPressed:(UIButton *)sender {
    NSLog(@"Down pressed");

    [UIView animateWithDuration:0.5
                         self.topConstraint.constant = 100;
                         [self.view layoutIfNeeded];


And when you run it and press the up/down buttons, the whole thing should like up/down.

Screen Shot 2016-09-28 at 7.51.34 AM.png

Screen Shot 2016-09-28 at 7.51.39 AM.png

How to dynamically move an object in autolayout

Leave a comment

Layout a button with some constraints like this.


Create an outlet of the constraint you want to manipulate.

Then add a button, so that when you press it, you can adjust the value of the constraint so it moves.


Now when you press the move button, the constraint value will change and the button will move.

Now if you want to get really fancy, you can animate the movement like this.


- (IBAction)movePressed:(UIButton *)sender {

    [UIView animateWithDuration:0.5
                         self.topConstraint.constant = 100;
                         [self.view layoutIfNeeded];

Objective-C Unit Testing Tricks

Leave a comment

Getting to an objects innards through categories

Normally you only want to test an object entirely through it’s public API. But for those times when you need to access an objects innards (but would or can’t expose them), you can make them public by defining the inner method as a category in your unit test.

- (void)testAddNumberToStack {
    Calculator *calc = [Calculator new];
    [calc pushOperand:1.0];
    XCTAssertEqual(1, calc.stackCount); // private


-(NSUInteger)stackCount {
    return [self.myStack count]; // private


@interface Calculator (Tests) // category

Alternative to partical mocks

For those times when you want to override a method in a class under test, declare a new class and override the method in your test.

@interface TestSubclass : ClassUnderTest

@implementation TestSubclass

- (void)methodToOverride

// In the test
- (void)testSubclass
    ClassUnderTest *testObject = [TestSubclass new];



Older Entries

%d bloggers like this: