AC-iOS-Objective-C Mid Unit Assessment

Setup

  1. Clone your fork locally to your laptop.

  2. Work on the assignment.

  3. Upon completion, commit locally.

    git add -A
    git commit -m "<NAME> final submission"
    
  4. Push to your repo.

    git push origin master
    
  5. Go to github and make a pull request.

  6. Paste the link from your fork into canvas

The Assessment

Overview

Your app will display a table full of crayon colors, and clicking on a color will show you a view that lets you mess around with that color's red, green, blue and alpha values.

Project Componenets:

Inside this repo, you will find a Crayon model that has:

  • NSString *name
  • double red;
  • double green;
  • double blue;
  • NSString * hex;
    • (NSArray *)allTheCrayons

There is also an empty Storyboard. You have no existing View Controllers, so you will need to create your own.

The Requirements

Load allTheCrayons into a Table View.

  • The name in each row should be the Crayon's name.
  • The subtitle in each row should be the Crayon's hex value.
  • The background color of each row should be the Crayon's color (derived from the Crayon's red, green and blue.

When the user selects a row, you should segue to a Detail View. The Detail view should have:

  • A UILabel to show the name of the selected Crayon
  • A background color that starts as the same color as the selected Crayon.
  • A UISlider and UILabel that represents the current red value
  • A UISlider and UILabel that represents the current green value
  • A UISlider and UILabel that represents the current blue value
  • A UIStepper and UILabel that represents the current alpha
  • A reset UIButton that sets all the sliders and labels to be the corresponding colors of the Crayon the user selected and resets the alpha to 1.0.

The values of each of the sliders should start at the appropriate values from the selected Crayon. The range of each slider should be between 0.0 and 1.0.

The value of the stepper should start at 1.0. The range of the stepper should be from 0.0 to 1.0.

As the user manipulates the sliders and stepper, the background color should change accordingly in real time.

Steps to achieve MVP (Minimal Viable Product)

  1. Set the background color of the rows by building a UIColor from with the Crayon model's red, green, and blue properties and set the textLabel's text to the color name. You don't need to make a custom TableViewCell to do this. Just use the default UITableViewCell.

  2. Implement prepare(for:) on your View Controller or TableViewController in order to pass the color information over to the Detail ViewController. This Detail ViewController should have a label with the color name and color its background just as you did with the table cell row. The Sliders should be in the correct posititons as specifed by the tapped color's RGB value.

  3. Build your Detail view controller and connect outlets and actions as appropriate to the Slider and Stepper controls and your Labels. Use one Label to display the Color's name, and four Labels below each Slider and Stepper that live-update when the Sliders or Stepper changes their values.

  4. Add your Stepper, which increases or decreases your Alpha value by 0.1 when tapped.

  5. Add a UIButton which should reset all your sliders/stepper/labels to their appropriate staring values based on the passed in Crayon.

A note on color

The following initializer will be helpful:

[UIColor colorWithRed: green: blue: alpha:]

All four arguments to the initializer are of type CGFloat and expect a value between 0.0 and 1.0.

The doubles provided for the Crayon values are from 0 from 255. You will need to convert them proportionally to the appropriate CGFloat by dividing by 255.

Extra Credit

Do any of the below, or none at all, or all of 'em for a total of 4 extra bonus points.

  1. Create a convenience initializer on the Crayon model that uses the "hex" field to populate the the red, green, blue properties for your crayons.

  2. Use TextFields, instead of Labels, to show each RGB value. Typing in a value manually should affect the respective slider's positions and update the background color.

  3. Have the Labels change to a lighter color to make it easier to read once the view gets too dark.

  4. Create a segmented control with two titles "Decimal" and "Hex". If "Decimal" is selected, the labels should all be in decimal between 0 and 1. If "Hex" is selected, the labels should all be in hex between 0 and FF.

Rubric

Criteria Points
App uses AutoLayout correctly for all iPhones in portrait 8 Points
Follows MVC design 4 Points
Variable Naming and Readability 4 Points
Table View is correctly configured with the correct color names, hex values and background color 8 Points
Segue is implemented correctly, and the appropriate crayon is passed to the Detail View Controller 4 points
Detail View's Sliders and Labels display the correct RGB values 4 Points
Sliders and Stepper update the background color/alpha dynamically 4 Points
Button resets all values to their starting values based on the passed in Crayon 4 points

A total of 40 points, with 4 extra credit.