Custom UIView Examples in Swift

Introduction

Creating custom UIViews in Swift allows you to encapsulate complex layouts and behaviors in reusable components. This is particularly useful when you want to create a unique interface that isn’t achievable with standard UIKit components. Below are three diverse examples that will help you understand how to create custom UIViews in Swift, complete with context and code snippets.

Example 1: Custom Circular Progress View

Context

This example demonstrates how to create a circular progress view that can be used to show progress in downloading files or completing tasks.

import UIKit

class CircularProgressView: UIView {
    private let shapeLayer = CAShapeLayer()
    private let backgroundLayer = CAShapeLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayers()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayers()
    }

    private func setupLayers() {
        let circularPath = UIBezierPath(ovalIn: bounds)

        backgroundLayer.path = circularPath.cgPath
        backgroundLayer.fillColor = UIColor.clear.cgColor
        backgroundLayer.strokeColor = UIColor.lightGray.cgColor
        backgroundLayer.lineWidth = 10
        layer.addSublayer(backgroundLayer)

        shapeLayer.path = circularPath.cgPath
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.blue.cgColor
        shapeLayer.lineWidth = 10
        shapeLayer.strokeEnd = 0
        layer.addSublayer(shapeLayer)
    }

    func setProgress(to progress: CGFloat, duration: TimeInterval) {
        shapeLayer.strokeEnd = progress
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.duration = duration
        animation.fromValue = 0
        animation.toValue = progress
        shapeLayer.add(animation, forKey: "progress")
    }
}

Notes

• You can customize the colors and line width by modifying the respective properties.
• To use this view, create an instance and call setProgress(to:duration:) with your desired progress value.

Example 2: Custom Rating View

Context

In this example, we create a star rating view that can be used in applications like movie rating or product reviews.

import UIKit

class RatingView: UIView {
    private var stars = [UIImageView]()
    private let starCount: Int = 5

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupStars()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupStars()
    }

    private func setupStars() {
        for _ in 0..<starCount {
            let starImageView = UIImageView(image: UIImage(systemName: "star"))
            starImageView.contentMode = .scaleAspectFit
            stars.append(starImageView)
            addSubview(starImageView)
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        let starWidth = bounds.width / CGFloat(starCount)
        for (index, star) in stars.enumerated() {
            star.frame = CGRect(x: CGFloat(index) * starWidth, y: 0, width: starWidth, height: bounds.height)
        }
    }

    func setRating(_ rating: Int) {
        for (index, star) in stars.enumerated() {
            star.image = index < rating ? UIImage(systemName: "star.fill") : UIImage(systemName: "star")
        }
    }
}

Notes

• You can change the number of stars by modifying the starCount variable.
• Use setRating(_:) to update the displayed rating.

Example 3: Custom Shadowed Card View

Context

This example shows how to create a custom card-like view that includes a shadow effect, which is great for displaying content like profiles or product information.

import UIKit

class ShadowedCardView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }

    private func setupView() {
        backgroundColor = .white
        layer.cornerRadius = 10
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = 0.2
        layer.shadowOffset = CGSize(width: 0, height: 2)
        layer.shadowRadius = 4
    }
}

Notes

• You can customize the cornerRadius and shadowOpacity to achieve different visual effects.
• This view can be used as a container for other UI elements like labels or images.

These examples of creating a custom UIView in Swift showcase the flexibility and power of building reusable components. By following these steps, you can enhance your app’s UI and create more engaging user experiences.