Simple iOS Application

Creating an iOS Project

  1. Open Xcode
  2. Choose “Create a New Xcode Project”
  3. Select “Single View Application” and click “Next”
  4. Create a product name for the application such as MyFirstApp
    1. Note: Language is set to Swift, and the device is set to Universal.

 

Basic Xcode Navigation

There are three basic panels we will use to create and application:

  • Navigator Area: Panel on the left-hand side that displays a directory of our project and additional navigation features.
  • Editor Area: Panel in the center that shows details of files selected from the Navigator Area.
  • Attribute area:  Panel on the right-hand side that corresponds to things selected in the Editor Area.

Additional details can be found here: https://developer.apple.com/library/ios/recipes/xcode_help-general/Chapters/Recipe.html#//apple_ref/doc/uid/TP40010548-CH9-SW1


 

Layout for First Application

  1. Click Main.storyboard from the Navigator area and the Editor area will show a blank box.
  2. Look at the bottom of the Attribute area. This is your object library, where you can drag and drop different design elements.
    1. Note: When you move an object to your layout a set of blue lines will appear depending on where you move it. This is to help align objects with the layout size.
  3. Drag and drop objects that you want to use for your project. Each object has its own attributes that can be changed. I recommend playing around with the settings.

Here Is An Example of My Layout:

My layout out design.
I used 4 labels, 1 button, 1 switch, and 1 slider.

 

Run Application and Layouts

  1. Launch application/Autolayout
  2. Click the “Run” button, and view your masterpiece!

Wait a minute?!  It doesn’t match! I lined it all up on the blue lines!

Welcome to the challenges of Xcode layout!  I will be the first one to admit that I am still learning the ins and outs of responsive layout, but I will show some things I have discovered through trial & error, and I’ll provide some links to other, more knowledgable designers.

To get started, I have provided an image of the Layout area which is at the bottom of the Editor panel when looking at a storyboard.

Example:
Image of the layout area under editor area of Xcode

 

The right-hand side of Layout area has four icons:

  • Stack: Aligns selected objects into a stacked view. Can change between vertical and horizontal display.
  • Align: Positions selected objects on view controller based on positions on the screen.  Examples include top, bottom, horizontal, vertical.
  • Pin: Adds constraints to selected objects based on fixed area.  Examples include: aspect ratio, and width/height away from another object.
  • Resolve Auto Layout Issues: Fixes any constraints missing or incorrect.  Examples include Add Missing Constraints, Clear Constraints, and Reset to Suggested Constraints (my personal favorite if you are ever lost.)

The center of the layout area controls what size layout to use based on the size of the device.  This defaults to width and height as “any”. This means the layout can be used as a baseline for any device.  If you change the layout size to fit an iPhone, then any constraints added will be explicitly for that layout.  This allows you to build different constraints based on the different devices you are designing.

The left-hand side expands a hierarchy of your layout. Here, you can tweak existing constraints, and see any sort of errors that might show up based on miss aligned constraints.  Any constraints that are highlighted in red mean your layout is not setup correctly. If this happens, I highly recommend going through a few different tutorials on auto layout to find the problem.

Links:

https://www.weheartswift.com/auto-layout-101/

http://www.raywenderlich.com/115440/auto-layout-tutorial-in-ios-9-part-1-getting-started-2

Note: If in doubt choose Add Missing Constraints to help “fudge” what isn’t quite working well.


 

Bringing Our Objects to Life

Our next step is getting our button, switch, and slider to respond based to an action.  The easiest way to setup this interaction is to drag and drop our objects as either an Outlet(variable) or Action(method).

  1. First, select the “Assistant Editor” in the top Toolbar. It looks like a vin-diagram on the top right-hand side of Xcode.
  2. Notice that we now see two editors, make sure that one shows our Main.storyboard and the other shows ViewController.swift.
  3. Example:

    Showing Main.storyboard and viewController.swift

  4. Move your mouse icon over the button we created and while holding the Control key drag the mouse into the ViewController class. When you let go of the mouse you will see a pop-up over the button.
  5. Leave everything the same, add a name for the button, and click Connect. This creates an interface builder with in our code allowing us to call the name of object to access it.
  6. Example:

    Interface builder menu

  7. The button now has a name, but it still needs to do something. We repeat the same drag and drop process, but change the Connection to Action,  create a name for the method, and you can either leave the type as any or change to UIButton.
  8. Example:

    Interface behavior action

  9. Repeat these step for however many additional objects you want to use.
  10. Run your application

Example:

My setup of actions and outlets

Note: In a bigger application I would create classes that contained what onClick, onSwitch, and onSlide would call, but for such small application I put everything into the ViewController.

//
//  ViewController.swift
//  MyFirstApp
//
//  Created by Casey Morris on 10/5/15.
//  Copyright © 2015 Casey Morris. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var myButton: UIButton!
    
    @IBOutlet weak var mySwitch: UISwitch!
    
    @IBOutlet weak var mySlider: UISlider!
    
    @IBOutlet weak var myScore: UILabel!
    
    var clickCounter:Int = 0
    var isDoubled:Bool = false
    
    @IBAction func onClick(sender: UIButton) {
        if(isDoubled == true){
            //Add score and update clickCounter
            // as a String via text method in the label myScore
            clickCounter = (clickCounter++)*2
            myScore.text = String(clickCounter)
            
        }else
        {
            clickCounter++
            myScore.text = String(clickCounter)
        }

    }
    @IBAction func onSwitch(sender: AnyObject) {
        if (mySwitch.on)
        {
            isDoubled = true
        }else
        {
            isDoubled = false
        }

    }
    @IBAction func onSlide(sender: UISlider) {
        //Convert Float value of slider to integer
        let choiceValue:Int = Int(sender.value)
        
        //Array of predefined colors
        let colorsArray = [
            UIColor(red: 90/255.0, green: 187/255.0, blue: 181/255.0, alpha: 1.0), //teal color
            UIColor(red: 222/255.0, green: 171/255.0, blue: 66/255.0, alpha: 1.0), //yellow color
            UIColor(red: 223/255.0, green: 86/255.0, blue: 94/255.0, alpha: 1.0), //red color
            UIColor(red: 239/255.0, green: 130/255.0, blue: 100/255.0, alpha: 1.0), //orange color
            UIColor(red: 77/255.0, green: 75/255.0, blue: 82/255.0, alpha: 1.0), //dark color
            UIColor(red: 105/255.0, green: 94/255.0, blue: 133/255.0, alpha: 1.0), //purple color
            UIColor(red: 85/255.0, green: 176/255.0, blue: 112/255.0, alpha: 1.0), //green color
        ]
        
        myButton.backgroundColor = colorsArray[choiceValue]
        

    }
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

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


}


Feel free to copy and paste my code, just make sure to link your interface builder objects with my existing outlets and actions.


Additional Links

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s