Description: Create a version of the Colors app (the app that displays a list of

Question

Description: Create a version of the Colors app (the app that displays a list of colors in a table view) that allows the user to select a color from the table view and segues to a view Controller that displays detail about the selection. The app is to use a navigation controller.

Purpose: The challenge provides experience with navigation controllers and segues.

Requirements:

Target Platform: iOS Single View Application
Language: Swift
Devices: Universal

The table view is to look like the following:

Explanation / Answer

Colors With Navigation / Colors with Navigation / Colors with Navigation / Base.lproj / Main.storyboard
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="12121" systemVersion="16F73" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="DsN-Ce-g13">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12089"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--Colors View Controller-->
<scene sceneID="tne-QT-ifu">
<objects>
<viewController automaticallyAdjustsScrollViewInsets="NO" id="BYZ-38-t0r" customClass="ColorsViewController" customModule="Colors_with_Navigation" customModuleProvider="target" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="y3c-jy-aDJ"/>
<viewControllerLayoutGuide type="bottom" id="wfy-db-euE"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<tableView clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="prototypes" separatorStyle="default" rowHeight="44" sectionHeaderHeight="28" sectionFooterHeight="28" translatesAutoresizingMaskIntoConstraints="NO" id="Dhe-Ce-Bww">
<rect key="frame" x="0.0" y="64" width="375" height="603"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<prototypes>
<tableViewCell clipsSubviews="YES" contentMode="scaleToFill" selectionStyle="blue" hidesAccessoryWhenEditing="NO" indentationLevel="1" indentationWidth="0.0" reuseIdentifier="colorCell" textLabel="cBF-e0-kYV" id="Jhy-kj-k3W">
<rect key="frame" x="0.0" y="28" width="375" height="44"/>
<autoresizingMask key="autoresizingMask"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="Jhy-kj-k3W" id="8Oj-MQ-8iN">
<rect key="frame" x="0.0" y="0.0" width="375" height="43.5"/>
<autoresizingMask key="autoresizingMask"/>
<subviews>
<label opaque="NO" multipleTouchEnabled="YES" contentMode="left" text="Title" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="cBF-e0-kYV">
<rect key="frame" x="15" y="0.0" width="345" height="43.5"/>
<autoresizingMask key="autoresizingMask"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</tableViewCellContentView>
<connections>
<segue destination="2lU-7e-IHG" kind="show" id="FZh-SC-8Sp"/>
</connections>
</tableViewCell>
</prototypes>
<connections>
<outlet property="dataSource" destination="BYZ-38-t0r" id="6BU-Eq-fH3"/>
<outlet property="delegate" destination="BYZ-38-t0r" id="Wpq-Nc-2q6"/>
</connections>
</tableView>
</subviews>
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="trailing" secondItem="Dhe-Ce-Bww" secondAttribute="trailing" id="09c-ZI-0IC"/>
<constraint firstItem="Dhe-Ce-Bww" firstAttribute="top" secondItem="y3c-jy-aDJ" secondAttribute="bottom" id="3Ve-48-qGC"/>
<constraint firstItem="Dhe-Ce-Bww" firstAttribute="leading" secondItem="8bC-Xf-vdC" secondAttribute="leading" id="Dnx-cb-ecD"/>
<constraint firstItem="wfy-db-euE" firstAttribute="top" secondItem="Dhe-Ce-Bww" secondAttribute="bottom" id="L3g-CX-8RE"/>
</constraints>
</view>
<navigationItem key="navigationItem" id="0kq-E6-gje"/>
<connections>
<outlet property="colorsTableView" destination="Dhe-Ce-Bww" id="WlE-eE-hw0"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="831" y="-645"/>
</scene>
<!--Color Detail View Controller-->
<scene sceneID="DhN-M4-ofb">
<objects>
<viewController id="2lU-7e-IHG" customClass="ColorDetailViewController" customModule="Colors_with_Navigation" customModuleProvider="target" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="MrF-OA-PIG"/>
<viewControllerLayoutGuide type="bottom" id="Evj-Fq-D3C"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="sT6-Ll-fHG">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="3e4-iB-r5j">
<rect key="frame" x="166.5" y="323" width="42" height="21"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<constraints>
<constraint firstItem="3e4-iB-r5j" firstAttribute="centerX" secondItem="sT6-Ll-fHG" secondAttribute="centerX" id="5sO-eH-v2u"/>
<constraint firstItem="3e4-iB-r5j" firstAttribute="centerY" secondItem="sT6-Ll-fHG" secondAttribute="centerY" id="p3H-Kd-Sk9"/>
</constraints>
</view>
<connections>
<outlet property="colorNameLabel" destination="3e4-iB-r5j" id="wCa-dQ-JE1"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="vRK-fY-GZ7" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="1528.8" y="-645.42728635682158"/>
</scene>
<!--Navigation Controller-->
<scene sceneID="FZ0-7t-gqu">
<objects>
<navigationController automaticallyAdjustsScrollViewInsets="NO" id="DsN-Ce-g13" sceneMemberID="viewController">
<toolbarItems/>
<navigationBar key="navigationBar" contentMode="scaleToFill" id="xe7-al-vE7">
<rect key="frame" x="0.0" y="0.0" width="375" height="44"/>
<autoresizingMask key="autoresizingMask"/>
</navigationBar>
<nil name="viewControllers"/>
<connections>
<segue destination="BYZ-38-t0r" kind="relationship" relationship="rootViewController" id="98z-DI-F48"/>
</connections>
</navigationController>
<placeholder placeholderIdentifier="IBFirstResponder" id="sAl-gO-g2d" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="85.599999999999994" y="-644.52773613193403"/>
</scene>
</scenes>
</document>

Colors With Navigation / Colors with Navigation / Colors with Navigation / Color Detail ViewController.swift
//
// ColorDetailViewController.swift
// Colors with Navigation
//
// Created by Jamie Flores on 7/21/17.
// Copyright © 2017 Jamie Flores. All rights reserved.
//
import UIKit

class ColorDetailViewController: UIViewController {

var color: Color?
  
@IBOutlet weak var colorNameLabel: UILabel!
  
override func viewDidLoad() {
super.viewDidLoad()

colorNameLabel.text = color?.name
  
self.view.backgroundColor = color?.uiColor
  
self.title = color?.name
  
// Do any additional setup after loading the view.
}

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

/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destinationViewController.
// Pass the selected object to the new view controller.
}
*/

}
Colors With Navigation/Colors with Navigation / Colors with Navigation / Colors View Controller.swift
//
// ColorsViewController.swift
// Colors with Navigation
//
// Created by Jamie Flores on 7/21/17.
// Copyright © 2017 Jamie Flores. All rights reserved.
//
import UIKit

class ColorsViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
  
//var colors = ["red", "orange", "yellow", "green", "blue", "purple", "brown"]
  
var colors = [Color(name: "red", uiColor: UIColor.red),
Color(name: "orange", uiColor: UIColor.orange),
Color(name: "yellow", uiColor: UIColor.yellow),
Color(name: "green", uiColor: UIColor.green),
Color(name: "blue", uiColor: UIColor.blue),
Color(name: "purple", uiColor: UIColor.purple),
Color(name: "brown", uiColor: UIColor.brown),]
  
@IBOutlet weak var colorsTableView: UITableView!
  
override func viewDidLoad() {
super.viewDidLoad()
  
self.title = "Colors"
  
// Do any additional setup after loading the view.
}
  
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
  
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
  
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return colors.count
}
  
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "colorCell", for: indexPath)
  
//cell.textLabel?.text = colors[indexPath.row]
  
let color = colors[indexPath.row]
  
cell.textLabel?.text = color.name
cell.backgroundColor = color.uiColor
  
return cell
}
  
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
tableView.cellForRow(at: indexPath)?.isSelected = false
}
  

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if let destination = segue.destination as? ColorDetailViewController,
let row = colorsTableView.indexPathForSelectedRow?.row{
destination.color = colors[row]
}
}

}

Related Questions

Navigate

• Browse (All)
• Browse D
• Subjects