CS 329E Assignment 3


Assignment 3: Interface Builder



Project Description

This assignment will introduce Xcode's Interface Builder and give you experience creating GUIs and working with UI elements in iOS applications, as well as working with layout constraints.

Basic Requirements

To create this GUI interface, you will include the following objects in the main View Controller Scene:
  1. A Label displaying "Enter your name and hometown"
  2. A Label displaying "Name:" and an associated Text Field with placeholder text "Enter name"
  3. A Label displaying "City:" and an associated Text Field with placeholder text "Enter city"
  4. A button labeled "Save"
  5. An Image View displaying a picture of Austin (or some other city of your choice).
The text fields should be configured so that the keyboard displays "Done" rather than "Return."

The screen should use auto layout so that the screen displays correctly on both an iPad and iPhone of differing sizes. This will be easier if you place certain objects within stack views then position those stack views within the scene.

To use an Image View, drop an image asset in the Assets.xcassets folder then select it for the Image View's Image property.

The final product will look something like the below images with the layout adjusting automatically for the device:

If you are having trouble using autolayout, this tutorial provides a more in depth examination of how to use constraints. Your color and button layout schemes do not need to match this example, but it should work on both devices.

Extra Credit

For the base project, you must display correctly on multiple devices in portrait mode. Extend your project with a UIScrollView, which will allow you to scroll through the view content when in landscape mode.

Getting Started

To create a single-view application:
  1. Open Xcode and got to File -> New -> Project.
  2. Select iOS Single View Application project.
  3. Set Product Name to yourid_assignment3, and Organization Identifier to cs329e. Do not include Core Data or the Unit/UI Tests.
  4. Main.storyboard is created automatically.

What to turn in

You will submit a zip of the project folder, yourid_assignment3, that contains the file folder with code, assets, and yourid_assignment3.xcodeproj via Canvas. Note that if you do not correctly import your image into the Asset folder, it will not display correctly on our machines, so double check that to avoid losing points.


Last modified: 08/07/19 by Sarah Abraham theshark@cs.utexas.edu