Estimated Time
10 minutes


Custom Button

So, you’ve got yourself a C4S file that a designer put together and you need to integrate it into an existing project. The designer has given you a sketch file of a custom button design, and a C4S file that lays out the animation that happens when a user taps the button.

Download these files:

Xcode Project – The existing project “you’ve” been working on

Design Files – The sketch and C4S files the designer has been working on

In this tutorial you will learn:

  1. How to export code from C4S
  2. How to replace a UIButton with a custom element from C4S
  3. How to customize the code you’ve just integrated

Let’s get started.

Xcode Project

After opening the project, you’ll see that there are 3 custom view controllers and a custom class:

  • HomeViewController
  • FeaturesViewController
  • TeamViewController
  • Page

The Home and Team controllers are simple extensions of UIViewController. The Features controller is an extension of UIPageViewController that has additional code to handle the loading of pages as well as the addition of a UIPageControl.

Storyboard

You can see the app architecture by having a look at Main.storyboard. In this file you can see that we’re using a UITabbarController that points to an instance of each custom view controller class.

You can also see the four pages have been laid out. These will get loaded into the Features view controller.

The Button

You’re given a new C4S file and asked to replace the button on the Home screen with one that animates after it triggers.

Here’s what that file looks like:

Before you export, you should change the name of the transition so that it makes more sense in code.

Change the name of the transition to `UserConfirmedTransition`

Export!

Time to export some code. Choose:

File > Export Code…

At the bottom of the export panel, make sure to:

Deselect Export Project

And…

Deselect Export View Controller

Then…

Choose Export

Since we're only replacing a basic view whose behaviour won't be modified, there is no need to export a view controller.

The Code

Have a look in the folder to which you exported. There are 3 files and a folder:

C4StudioCommon

The guts of the export are in the C4StudioCommon folder. These files are basic requirements for running the generated code.

Other Files

For this project, there are 2 additional files:

  • SignUpButtonView.swift
  • UserConfirmedTransition.swift

Integration

Time to put your button where your button is. The first step is to drag all the files and the folder into Xcode (remember to copy files if needed). I put them all in a new Group in the Project navigator.

Home View Controller

There are 3 things to add to the HomeViewController.

  • A boolean to track if the button has been pressed
  • An outlet to link with a SignUpButtonView
  • An action to handle the user input

Modify the HomeViewController to look like this:

class HomeViewController: UIViewController {
    var requested = false
    @IBOutlet var signUpButtonView: SignUpButtonView?

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    override func prefersStatusBarHidden() -> Bool {
        return true
    }

    @IBAction func requestAccess() {
        guard let button = signUpButtonView else {
            return
        }

        if !requested {
            UserConfirmedTransition(view: button).animate()
            requested = true
        }
    }
}

How We Animate

You’ll notice a method call in the action:

UserConfirmedTransition(view: button).animate()

This is the pattern we currently use for initiating animations. The UserConfirmedTransition.swift file has a set of property animations that can be applied to any SignUpButtonView object. These get triggered by creating a transition object and then calling its .animate() method.

Add the View

There are three things we need to do to add the view.

  • Check the expected size of the view
  • Remove the current button
  • Add the view and set up its autolayout properties

Let’s get to it…

View Defaults

When C4 Studio exports a view it places a Defaults struct at the top of the class. Ours looks like this:

public struct Defaults {
    public static let size = CGSize(width: 270.0, height: 60.0)
    public static let backgroundColor = UIColor(red: 0.901960784313726, green: 0.901960784313726, blue: 0.901960784313726, alpha: 1.0)
}
This can be found in `SignUpButtonView.swift`

From these defaults you can see that the button view’s size should be {w: 270, h: 60}.

You’ll also notice that this object is a subclass of UIView.

Add the View

In Main.storyboard you can

Delete the button that says “Sign Up for Alpha Testing”.

Then…

Add a new UIView and size it to 270 x 60

Change the view’s type…

Change the view’s type to SignUpButtonView

WHAM! You'll see that you can see State A of the view. Yes... C4S exports @IBDesignable views!

Add the following autolayout constraints:

  • Horizontally in Container
  • Fixed Width
  • Fixed Height
  • Top (Constrain to nearest neighbor)

Finally…

Connect the view to the controller’s signupButtonView outlet:

Add a Gesture

To finish off, let’s add a gesture recognizer to the view. Simply…

Drag a TapGestureRecognizer on top of the view

And,…

Connect the gesture to the controller’s requestAccess action

RUN IT!

You’re done! Now run the app and tap on the button!

Easy. You’ve just replaced a standard UIKit button with a custom view from C4 Studio!

Round Corners?!

Now, your designer had a look at the app and remembered that there should be rounded corners on the button.

Do you have to redo everything?… NOPE!

You can easily add setup code to the SignUpButtonView class.

In SignUpButtonView.swift add the following method:

func roundCorners() {
    layer.cornerRadius = Defaults.size.height / 2.0
    layer.masksToBounds = true
}

Then call that method from the two inits, like so:

public override init(frame: CGRect) {
    super.init(frame: frame)
    createViews()
    roundCorners()
}

public required init?(coder: NSCoder) {
    super.init(coder: coder)
    backgroundColor = Defaults.backgroundColor
    createViews()
    roundCorners()
}

Run it again!

Now You’re Done.

This tutorial has walked you through swapping a standard UIButton with a custom animated view built using C4 Studio.

On top of that, the app we used was entirely designed using Storyboards. So, you now know that it’s possible to work between C4 Studio and Interface Builder.

You’ve also learned a about how C4 Studio exports code, and the logic behind triggering transitions.