Tutorial 59

Apple just introduced the new iPhone 6 (4.7in) and iPhone 6 Plus (5.5in). These are two additional sizes to the existing iPhone 4 (3.5in), iPhone 5 (4in), and iPad (9.4in). As iOS developers we have long enjoyed not having to develop for too many different screen sizes, unlike Android, until now. With this many screens available, your apps need to be flexible enough to work on all of them or Apple may reject it or even worse, users will complain it doesn’t work for them on their device.

Below is a simple tutorial to help you with adding constraints to your views using Storyboards, without having to write any code. This is helpful for handling auto rotation as well.

Designing an Interface using Constraints

1. Make a new project based on the Single View Application template, and name it AutoLayout.
2. Select Storyboard to edit the interface. One nice thing about using constraints is that they accomplish quite a lot using no code. All of the auto layout implementation can be done right here in the Storyboard.
3. Add four labeled buttons. Drag four round rect buttons from the library over to your view. Use the dashed blue guidelines to help you line up each one near its respective corner. Double-click each button, and assign a title to each one so you can tell them apart later.
   

4. Run It. Let’s see what happens now that we’ve specified that we support autorotation but haven’t set any autosize attributes. Build and run the app. Select Hardware Rotate Left, which will simulate turning the iPhone to landscape mode. Notice that all of the buttons except for the top left one is off the screen. We need to fix this.
   

5. The image below shows an example of the Auto Layout Menu. You’ll find this in the bottom right of the Storyboard. First select which view you want to modify, then choose one of the buttons to modify it’s layout properties.

   Align – Create alignment constraints, such as aligning the left edges of two views.
   Pin – Create spacing constraints, such as defining the width of a UI control.
   Issues – Resolve layout issues.
   Resizing – Specify how resizing affects constraints.

   

   © Copyright 2014 AppCoda

6. Let’s add our constraints. Click the upper-left button to select it. Choose the Pin button to change constraints for the button. Add 20px to the top and 0px to the left. Then press the “Add 2 Contraints” button to make the change.
   

7. You’ll see that the constraints are now set by the blue lines now displayed when the button is selected. You may not see blue lines for the top left button since all constraints for that location are by default.
8. Now do the same for the other three buttons.
   

9. Run it and look at the results. Each button stuck tight to its nearest corner. The buttons on the right shifted out to the right to match the view’s new width, and the buttons on the bottom were pulled up to match the new height.
   
   

   You can grab the full source code for this tutorial. Note: Built for XCode6-Beta7.

   Additional Tips for using Auto Layout

   Use Auto Layout to lay out your views relative to each other without fixed origins, widths, and heights, so that views reposition and resize appropriately when the language or locale changes. Auto Layout makes it possible to have one set of .storyboard and .xib files for all devices.

   Remove fixed width constraints. Allow views that display text to resize. If you use fixed width constraints, text may appear cropped in some views.

   Use intrinsic content sizes. The default behavior for text fields and labels is to resize automatically. If a view is not adjusting to the size of text, select the view and choose Editor > Size To Fit Content.

   Use leading and trailing attributes. When adding constraints, use the attributes leading and trailing for horizontal constraints. The attributes leading and trailing are equivalent to left and right. The leading and trailing attributes are the default values for horizontal constraints.

   Pin views to adjacent views. Pinning causes a domino effect. When one view resizes to fit text, other views do the same. Otherwise, views may overlap in some devices.

   Constantly test your layout changes. Test your app using different device sizes, like iPhone 4, iPhone 5, iPhone 6, iPhone 6 Plus, and iPad.

   Don’t set the minimum size or maximum size of a window. Let the window and its content view adjust to the size of the containing views.

   Auto Layout is enabled by default when you create a new project. To enable Auto Layout for an older project, select the first view of the View Controller, then select the File Inspector (first one on the left) and make sure the “Use Auto Layout” check mark is selected.

One of the best features for developers that came in the iOS 6 SDK is UICollectionView. It’s been a popular tool for developers since, so let’s review how to create one in Swift (if you need it in objective-c read Tutorial: Collection View using Flow Layout).

UICollectionView is very similar to UITableView but you can customize it a lot more and it can scroll horizontal, goodbye scroll views! Most recently I used a collection view for a bottom navigation scroller and it worked really well.

A UICollectionView view has three main components:
1. Cells: Display your content in cells that are de-queued as they leave the screen.
2. Supplementary Views: Add labels, section headers and footers to define your content areas.
3. Decoration Views: Decorate the collection view to look like a bookshelf or a background image.

Start by adding the delegates to your class file and define your collection view.

class ViewController: UIViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
    
    @IBOutlet var collectionView: UICollectionView?

The most common layout for a UICollectionView is UICollectionViewFlowLayout. Flow layout organizes items into a grid with optional header and footer views for each section. The items in the collection view flow from one row or column (depending on the scrolling direction) to the next, with each row comprising as many cells as will fit. Cells can be the same sizes or different sizes.

Define the UICollectionView & UICollectionViewFlowLayout properties in the viewDidLoad method.

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top: 20, left: 10, bottom: 10, right: 10)
    layout.itemSize = CGSize(width: 90, height: 90)
    collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
    collectionView!.dataSource = self
    collectionView!.delegate = self
    collectionView!.registerClass(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell")
    collectionView!.backgroundColor = UIColor.whiteColor()
    self.view.addSubview(collectionView!)
}

Most of the properties are self explanatory but the key is to define your cell class if you are using custom cells (just like table views) and setting the size of the cells, above they are set to 90×90. Choose your section insets which is the spacing in between each cell, I have it set to 20 for the top and 10 for the rest. Lastly define the layout, we’re using let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout().

Setting up a UICollectionView is very similar to a UITableView, so you’ll recognized a lot of the methods below.

func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return 1
}

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 20
}

Above we’re defining how many items and sections are in the collection view. If you have more than one section, then you’ll need to define the number of sections, if you only have one you don’t need that method.

Below is the real meat of the UICollectionView, defining the cells with your data. If you choose to use a custom cell you can add images or whatever you need to display.

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CollectionViewCell", forIndexPath: indexPath) as CollectionViewCell
    cell.backgroundColor = UIColor.blackColor()
    cell.textLabel?.text = "\(indexPath.section):\(indexPath.row)"
    cell.imageView?.image = UIImage(named: "circle")
    return cell
}

Finally you can drag the UICollectionView object into your view within your NIB or storyboard. Move and scale the collection view to where you want to display it and review all of the properties within the inspector. Be sure to hookup the collectionView reference outlet and dataSource and delegates so the collection view can provide all the functionality available. Do the same for the Collection View Flow Layout. (See image on the right).

You can grab the full source code for this tutorial. Note: Built for XCode6-Beta7.
If you need it built using Xcode 6.3 (Swift 1.2).

Sometimes you need all users to use the same version of your App. There are many reasons for this but the most popular is to ensure all users have a specific new feature that’s only available in the latest version. Another popular reason is you changed a data source or functionality that is no longer supported in older versions of your app. This will force the user to upgrade the app on their device and will not allow them to use their current version anymore.

It’s important that this feature is built into your very first release of your application (v1.0) so you can force all users to upgrade when you need to.

Below is a tutorial to help you add a forced upgrade alert in Swift.

Web Server API

1. Create “appVersion.php” on your Server. This can be created using any kind of Web API (Perl, PHP, Ruby, etc..).
2. Write this code into your file. This code will give out your latest App Version.

Get App Version using NSURLConnection

1. You’ll need the following method to read in the latest App Version from the Web Server API.

   func getAppVersion() {
       let url = NSURL(string:"http://www.brianjcoleman.com/code/appVersion.php")
       let cachePolicy = NSURLRequestCachePolicy.ReloadIgnoringLocalCacheData
       var request = NSMutableURLRequest(URL: url!, cachePolicy: cachePolicy, timeoutInterval: 2.0)
       request.HTTPMethod = "POST"
       
       // set Content-Type in HTTP header
       let boundaryConstant = "----------V2ymHFg03esomerandomstuffhbqgZCaKO6jy";
       let contentType = "multipart/form-data; boundary=" + boundaryConstant
       NSURLProtocol.setProperty(contentType, forKey: "Content-Type", inRequest: request)
       
       // set data
       var dataString = ""
       let requestBodyData = (dataString as NSString).dataUsingEncoding(NSUTF8StringEncoding)
       request.HTTPBody = requestBodyData
       //println("Data String: \(dataString)")
       // set content length
       //NSURLProtocol.setProperty(requestBodyData.length, forKey: "Content-Length", inRequest: request)
       
       var response: NSURLResponse? = nil
       var error: NSError? = nil
       let reply = NSURLConnection.sendSynchronousRequest(request, returningResponse:&response, error:&error)
       
       let results = NSString(data:reply!, encoding:NSUTF8StringEncoding)
       println("API Response: \(results)")
       self.serverAppVersion = results!
   }
   

Display UIAlertController in Swift

1. Then you need to compare the minimum app version from the web server against the app version the user has on their device.
2. If the minimum app version from the server is greater than the users app version it will display an alert view and force the user to upgrade.
3. Add the method below into your first view controller in your app.

   func checkForAppUpdate() {
       
       getAppVersion()
       
       var minAppVersion = self.serverAppVersion
       var appVersion = NSBundle.mainBundle().objectForInfoDictionaryKey("CFBundleShortVersionString") as String
       
       println("Current Version: \(appVersion) -- Minimum Version: \(minAppVersion)")
       
       //Compare App Versions
       var minAppVersionComponents : NSArray = minAppVersion.componentsSeparatedByString(".")
       var appVersionComponents : NSArray = appVersion.componentsSeparatedByString(".")
       
       var needToUpdate = false
       
       for i in 0..
   Lastly you'll need to call the checkForAppUpdate() from viewDidLoad() so it will only get called the when the app is initially loaded.
   

You can grab the full source code for this tutorial. Note: Built using XCode6.1
If you need it built using Xcode 6.3 (Swift 1.2).