[Swift 5] Implement UI for review function

Introduction

In this article, we will implement the review function only using stars and comments.

What to make

If you look at this article, you can implement only the review function using stars and comments as shown below.

Target audience

--Programming beginners who want to develop iPhone apps using Swift --Those who want to implement the review function

Development environment

• Xcode 12.3
• Swift 5

table of contents

--Implementation method --Library installation (pod install) --Create Main.storyboard --Create RatingViewController.xib --Coding --Association --Reference site

Implementation method

Now, let's actually implement it.

1. Library installation (pod install)

Fill in the podfile as shown below and install the two libraries.

pod 'PopupDialog', '~> 1.1'
pod 'Cosmos', '~> 23.0'

2. Create Main.storyboard

Place the required parts in Main.storyboard as shown in the image above.

--Label to display the number of stars --Label for displaying comments --Button to perform a review

3. Create RatingViewController.xib

3. 1. Completed form of RatingViewController.xib

Create the UI as shown in the image below.

3. 2. Create the RatingViewController.xib file

3. 3. Change the size of UIView in RatingViewController.xib to Freeform

3. 4. Place the required parts in RatingViewController.xib

Necessary parts

--Two Label --TextField for commenting --UIView to select a star (CosmosView is set to Class as shown in the image below)

4. Coding

4. 1. Coding ViewController.swift

ViewController.swift

import UIKit
import PopupDialog

class ViewController: UIViewController {
    
    @IBOutlet weak var starLabel: UILabel!
    @IBOutlet weak var commentLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    func showCustomDialog(animated: Bool = true) {
        
        // Create a custom view controller
        let ratingVC = RatingViewController(nibName: "RatingViewController", bundle: nil)
        
        // Create the dialog
        let popup = PopupDialog(viewController: ratingVC,
                                buttonAlignment: .horizontal,
                                transitionStyle: .bounceDown,
                                tapGestureDismissal: true,
                                panGestureDismissal: false)
        
        // Create first button
        let buttonOne = CancelButton(title: "CANCEL", height: 60) {
            self.starLabel.text = "You canceled the rating dialog"
        }
        
        // Create second button
        let buttonTwo = DefaultButton(title: "RATE", height: 60) {
            self.starLabel.text = "You rated \(ratingVC.cosmosStarRating.rating) stars"
            self.commentLabel.text = ratingVC.commentTextField.text
        }
        
        // Add buttons to dialog
        popup.addButtons([buttonOne, buttonTwo])
        
        // Present dialog
        present(popup, animated: animated, completion: nil)
    }
    
    
    @IBAction func showCustomDialogTapped(_ sender: UIButton) {
        showCustomDialog()
    }
    
}

4. 2. Coding RatingViewController.swift

RatingViewController.swift

import UIKit
import Cosmos

class RatingViewController: UIViewController {
    
    @IBOutlet weak var cosmosStarRating: CosmosView!
    @IBOutlet weak var commentTextField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //Default 3 for the number of stars.Set to 0
        cosmosStarRating.rating = 3.0
        
        commentTextField.delegate = self
        view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(endEditing)))
    }
    
    @objc func endEditing() {
        view.endEditing(true)
    }
}

//Processing related to textField
extension RatingViewController: UITextFieldDelegate {
    
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        endEditing()
        return true
    }
}

5. Association

Finally, don't forget to associate. This is completed!

Reference site

-PopupDialog's GitHub -Cosmos's GitHub