34,333
edits
Changes
no edit summary
[[File:ios_11_table_view_controller_added.png]]
Figure 29-1
[[File:ios_11_table_view_initial_controller.png]]
Figure 29-2
[[File:ios_11_table_view_controller_change_class.png]]
Figure 29-3
[[File:ios_11_table_view_cell_identifier.png]]
Figure 29 -4
== Designing a Storyboard UITableView Prototype Cell ==
Table Views are made up of multiple cells, each of which is actually either an instance of the UITableViewCell class or a subclass thereof. A useful feature of storyboarding allows the developer to visually construct the user interface elements that are to appear in the table cells and then replicate that cell at runtime. For the purposes of this example each table cell needs to display an image view and a label which, in turn, will be connected to outlets that we will later declare in the AttractionTableViewCell subclass. Much like any other Interface Builder layout, components may be dragged from the Object Library panel and dropped onto a scene within the storyboard. With this in mind, drag and drop a Label and an Image View object onto the prototype table cell. Resize and position the items so that the cell layout resembles that illustrated in Figure 29 -5, making sure to stretch the label object so that it extends toward the right-hand edge of the cell.
[[File:ios_11_table_view_cell_layout.png]]
Figure 29 -5
[[File:ios_11_table_view_cell_select_swift_file.png]]
Figure 29-6
Before a test run of the application can be performed the image files referenced in the code need to be added to the project. An archive containing the images may be found in the attractionImages folder of the code sample archive which can be downloaded from the following URL:
Select the Assets.xcassets entry in the Project Navigator panel, Ctrl-click in the left-hand panel of the asset catalog screen and select the Import… menu option. In the file selection dialog, navigate to and select the attractionImages folder and click on the Open button to import the images into a new image set.
== Compiling and Running the Application ==
Now that the storyboard work and code modifications are complete the final step in this chapter is to run the application by clicking on the run button located in the Xcode toolbar. Once the code has compiled the application will launch and execute within an iOS Simulator session as illustrated in Figure 29 -7.
Clearly the table view has been populated with multiple instances of our prototype table view cell, each of which has been customized through outlets to display different text and images. Note that the self-sizing rows feature has caused the rows to automatically size to accommodate the attraction images.
[[File:ios_11_table_view_story_running.png]]
Figure 29 -7
[[File:ios_11_table_view_swipe_delete.png]]
Figure 29-8
