iOS App Development iOS8 Xcode App Design

Design iOS app in Xcode

In this tutorial we will learn how to design iOS app in Xcode and Interface builder. Xcode provides a lot of tools like interface builder and storyboard to design our app.

We will use both storyboards and xib’s to design our interface.

Lets get started.

  • Create a single view application.
  • On the main storyboard. Drag a container view on the top half . The storyboard should look something like this. Go ahead and delete the view controller which is added from container view. After deleting it should look something like the right one.

ios_app_design1                        ios_app_design2

  • Now add a tableview and table view cell below the container.

ios_app_design3

 

  • Drag a UICollectionView Controller on to the main story board. In the collectionview cell drag a UIImageView and set the autolayout constraints to 0 on all the side. Download your favorite movie image and then drag it on to the xcode. Use this image to set as the default image for the imageview.

ios_app_design4_1                        ios_app_design4_2

 

  • Now CTRL+DRAG from the container onto the UICollectionViewController and select embed . It should look like this now

ios_app_design4_4 ios_app_design5

 

  • Now lets get onto setting autolayouts for the container view and the uitableview. For container view select constraint to 0 on top , left and right along with a height constraints of 250.
  • For UITableView set the constraint to 0 on top,left,bottom and right.

We have built the layout for the app but there is no data present in the app at this point. Lets go ahead and create the viewcontrollers to back the UI.

UICollectionview for horizontal sliding images

Create a new file called LayoutController.swift which subclasses UICollectionViewController and UICollectionViewDelegateFlowLayout

//
//  LayoutController.swift
//  Playground
//
//  Created by Shrikar Archak on 5/9/15.
//  Copyright (c) 2015 Shrikar Archak. All rights reserved.
//

import UIKit

let reuseIdentifier = "Cell"

class LayoutController: UICollectionViewController, UICollectionViewDelegateFlowLayout {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

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

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) ->; CGSize {
        println(self.view.frame.size)
        return CGSizeMake(200, self.view.frame.size.height - 10)
    }
    
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) ->; UIEdgeInsets {
        return UIEdgeInsetsMake(5, 0, 5, 0)
    }

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


    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) ->; Int {
        return 200
    }

    override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) ->; UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! UICollectionViewCell
        
        return cell
    }


}

To keep is simple lets say we have 200 images in the collectionview and the size of each UICollectionViewCell is (200, self.view.frame.size.height – 10). There are a few more setting on the collection view which you need to set.

Select the UICollectionView and make sure the scrolling direction is set to horizontal and the layout is set to Flow.

ios_app_design8
ios_app_design10

In the next tutorial we will be design the UITableViewCell for the custom look we need. If you need more detailed information on UICollectionView take a look at this tutorial where will will learn how to build a pinterest layout

Stay tuned for the next post. Xcode 6 interface builder

About the author

Shrikar

Backend/Infrastructure Engineer by Day. iOS Developer for the rest of the time.

/* ]]> */