UIKIT + UIScrollView + JSON

UITableView With Custom Cells + Details Screen — Part 2

Second part of this tutorial, we are going to explore how to pass data between views and UIScrollView. Swift 5 & Xcode 12.

From the author

Difficulty: Beginner | Easy | Normal | Challenging

Environment : Xcode 12 & UIKit

Introduction

Following part 1 of the tutorial, we are going to implement the protocol to make the cells clickable, pass data to another ViewController and set up a UIScrollView in it to present a range of data. If you missed part 1, check it out first:

UITableView With Custom Cells + Details Screen — Part 1

Make the cells clickable

Head to the ListViewController.swift and add the protocol to make the cells clickable, pass the data and present another ViewController. Copy/paste the following protocol in your file:

Here, we are using didSelectRowAt method to present a new ViewController, we are passing the data that each row contained.

Let’s Create the Details View

Create a new file > CocoaTouch Class > Subclass of UIViewController > Call it DetailsViewController.

Passing data

Since we want to pass the data from the selected cell to the ViewController we just created, we need to add the Model Beer variable to the DetailsViewController.

Add the following line of code at the top:

var beer: Beer!

Then, run the app, click on a cell and it will push another empty ViewController like this:

Let’s create the UIScrollView

First thing first, let’s declare these two variables at the top of the DetailsViewController:

Then, add the following function after the viewDidLoad method:

Also, call this function inside the viewDidLoad method — we are basically setting up a UIScrollView that is equal to the height of the views it contains: let’s created these views!

Let’s add the Views

Copy/paste the following after the setupScrollView function and add the setupViews() inside the viewDidLoad method:

Here, we aded a serie of elements: an image at the top and a serie of 4 labels: name of the beer, category, IBU level and short name.

Also, add the following line inside the viewDidLoad method (again 😉) to download the image and cache it:

Don’t forget to add the framework at the top of the DetailsViewController:

import SDWebImage

Run the App 📲

You can now run the app, explore the list of beers, click on a cell and discover more about it: description, ibu level and more!

Final result:

Thanks for reading! I’m always happy to have a chat and collaborate at hello@sullivandecarli.com. Consider subscribing to enjoy unlimited access to my articles and all of Medium through my referral link

GitHub repository:

Sullivan677/Biirr