Code Example

This documentation assumes that you are already familiar with Swift programing language, and basic iOS development.

Home Screen

This documentation assumes that you are already familiar with Swift programing language, and basic iOS development.

All you need to build this screen is: only 150 lines of code

import DSKit
import DSKit_Fakery

open class HomeViewController: DSViewController {
    
    open override func viewDidLoad() {
        super.viewDidLoad()
        update()
    }
    
    func update() {
        show(content: profileSection(), gallerySection(), categoriesSection(), discountsSection())
    }
}

// MARK: - Profile
extension HomeViewController {
    
    /// Profile section
    /// - Returns: DSSection
    func profileSection() -> DSSection {
        
        // Text
        let composer = DSTextComposer()
        composer.add(type: .headlineWithSize(29), text: "Jane Doe")
        composer.add(type: .subheadline, text: "4 Items in cart")
        
        // Action
        var action = composer.actionViewModel()
        action.rightRoundImage(url: URL.profileOnRedBg, size: CGSize(width: 60, height: 60))
        action.displayStyle = .default
        action.height = .absolute(60)
        
        // List section
        return action.list()
    }
}

// MARK: - Gallery
extension HomeViewController {
    
    /// Gallery section
    /// - Returns: DSSection
    func gallerySection() -> DSSection {
        
        let img1 = DSImageVM(imageUrl: URL.personOnYellowBg, height: .absolute(200))
        let img2 = DSImageVM(imageUrl: URL.sneakersBlackOnBlueBg, height: .absolute(200))
        let img3 = DSImageVM(imageUrl: URL.sneakersThreePairs, height: .absolute(200))
        let pageControl = DSPageControlVM(type: .viewModels([img1, img2, img3]))
        
        return pageControl.list().zeroLeftRightInset()
    }
}

// MARK: - Categories
extension HomeViewController {
    
    /// Category section
    /// - Returns: DSSection
    func categoriesSection() -> DSSection {
        
        let shoes = category(title: "Shoes")
        let shirts = category(title: "Shirts")
        let jeans = category(title: "Jeans")
        let watches = category(title: "Watches")
        let section = [shoes, shirts, jeans, watches].gallery(type: .default)
        
        return section
    }
    
    /// Category view model
    /// - Parameter title: String
    /// - Returns: DSViewModel
    func category(title: String) -> DSViewModel {
        
        var category = DSLabelVM(.headlineWithSize(14), text: title, alignment: .center)
        category.width = .fractional(0.28)
        category.height = .absolute(40)
        category.displayStyle = .grouped(inSection: false)
        
        return category
    }
}

// MARK: - Discounts
extension HomeViewController {
    
    /// Discount section
    /// - Returns: DSSection
    func discountsSection() -> DSSection {
        
        // Discounts
        let newTrent = discount(title: "New trend", description: "Colourful life", imageURL: URL.personOnPurpleBg2)
        let shirts = discount(title: "Shirts", description: "Fresh prints of Bel-Air", imageURL: URL.personOnPurpleBg)
        let shoes = discount(title: "Shoes", description: "Bring power to your life", imageURL: URL.sneakersOnBlackBg)
        let watches = discount(title: "Watches", description: "Time is what you make", imageURL: URL.watchesOnYellowBg)
        let jeans = discount(title: "Jeans", description: "Quality newer goes down", imageURL: URL.personOnBlueBg)
        
        // Grid section
        let section = [newTrent, shirts, shoes, watches, jeans].grid()
        section.header = header(title: "Discounts")
        
        return section
    }
    
    /// Discount view model
    /// - Parameters:
    ///   - title: String
    ///   - description: String
    ///   - imageURL: URL?
    /// - Returns: DSViewModel
    func discount(title: String, description: String, imageURL: URL?) -> DSViewModel {
        
        // Text
        let composer = DSTextComposer()
        composer.add(type: .headlineWithSize(15), text: title)
        composer.add(type: .subheadlineWithSize(13), text: description)
        composer.add(price: DSPrice.random())
        
        // Action
        var action = composer.actionViewModel()
        action.topImage(url: imageURL, height: .unknown, contentMode: .scaleAspectFill)
        action.height = .absolute(190)
        
        return action
    }
}

// MARK: - Header
extension HomeViewController {
    
    /// Header
    /// - Parameter title: String
    /// - Returns: DSViewModel
    func header(title: String) -> DSViewModel {

        // Text
        let composer = DSTextComposer()
        composer.add(type: .headline, text: title)
        
        // Action
        var header = composer.actionViewModel()
        header.displayStyle = .default
        header.rightButton(title: "View all", sfSymbolName: "chevron.right", style: .medium) {
            print("Did tap on button")
        }
        
        return header
    }
}