Prettier Password Generator (iOS)

Learning Objectives

• Develop familiarity with iOS Auto Layout
• Learn the basics of designing UI for both portrait and landscape orientations
• Apply styling using both UIAppearance protocol and sub-classing

Please work in pairs on this homework assignment. If possible, work with the same partner as in your previous homework.

TIP

We will be using GitHub Classrom to manage homework submissions from now on. That won't change a whole lot in terms of how you use Git, it only affects how you will initially create your repo. Instead of creating the repo from scratch under your GitHub account, you will follow the GitHub classroom assignment link to create the repo for your solution.

Part A: Using Auto Layout in iOS (Portrait orientation)

You are to enhance the password generator app from the previous homework by applying Auto Layout constraints so it display all the widget correctly across many different sizes of iPhone. You don't have to support iPad for this exercise. The main screen of your app shows the generated password using a Label, a button to regenerate the password, and another button to clear the Label.

The main screen layout (the left image below) is as follows:

• The random password label and the three buttons should be placed horizontally center
• The random password is shown in a font bigger than the normal font for the buttons
• Place a large gap at the top and bottom of the random password
• All the three buttons be placed in a vertical UIStackView and have uniform width, 1/3 of the screen width.

The setting screen layout (the right image below) is as follows:

• The slider length is 40% of the screen width, with standard trailing space to the edge of the safe area
• The two toggle switches are left justified with the slider
• The three labels are left aligned with standard leading gap from the edge of the safe area
• Each of the labels is vertically centered with its associated widget to its right

TIP

Checkpoint:

• Resolve all the layout issues in portrait orientation.
• Confirm your autolayout settings work for a variety of screen sizes (in portrait mode only)
• Do a git-commit and git-push before moving on to part B.

Part B: Support Landscape Screen Orientation

Reconfigure the auto layout constraints to also support landscape screen orientation.

A sample screenshot of the main screen is shown below:

• Both the password and the UIStackView of the three buttons are vertically centered.
• The password label width is 40% of the screen width
• The stack view width is 25% of the screen width
• Add leading gap for the password label, and horizontal gap between the password label and the UIStackView

A sample screenshot of the settings screen is shown below

• The password length label is 40% of the screen width
• The slider is placed below the above label
• The use numeric label has the same text baseline as the password length label
• The labels for the toggle switches are 25% of the screen width
• Each toggle switch is vertically center with its label

TIP

Checkpoint:

• Resolve all the layout issues in landscape orientation. If done, correctly this should not affect any of the previous portrait only constraints.
• Confirm your autolayout settings work for a variety of screen sizes (in both portrait and landscape orientations)
• Do a git-commit and git-push before moving on to part C.

Part C: Apply Custom Styles

• Apply colors of your choice to the buttons. Pick color combinations which are visually distinguisable from the default iOS blue foreground/white background
• Add rounded corners to the buttons
• Apply the same color choices to the slider and toggle switches

WARNING

Only the UIButton should be styled. Keep the bar buttons in their default style.

It was introduced in lecture that there are two different techniques of styling widgets in iOS:

• Via UIAppearance proxy object
• Via subclassing

In this homework you are required to use both technique and do your own research to determine the actual property names to use in your Swift code.

WARNING

Be aware that some of styling overrides may work only in one technique and not the other. You have investigate which ones work and which one dont.

Deliverables

Please read the following very carefully:

• Make sure you have git-pushed all of your code updates to the repo you created via this GitHub Classroom invitation link by the due date.

  IMPORTANT

  The instructor will grade your homework based on the last commit pushed prior to the due date on the default branch (typically the main branch) of your repo. If your solution was developed in a different branch, be sure merge it to the main branch or change your default branch setting on GitHub. I will not browse through multiple branches in your repo.

• There is nothing to submit via Blackboard

Grading Rubrics

Grading Item	Point
Main screen layout (portrait mode)	5
Setting screen layout (portrait mode)	5
Main screen layout (landscape mode)	5
Setting screen layout (landscape mode)	5
Styling via UIAppearance proxy	5
Styiling via sub class	5