LayoutItKit

LayoutItKit is a set of UIKit extensions to facilitate layout creation using ViewCode and UIKit in a simple, fun and easy to understand way. 🎉

Features

• Easy to create layouts using UIStackView.
• Shortcuts for dealing with UIKit constraints.
• Custom initializers for the most common UIView, UILabel, and UIStackView.
• Possibilite to create simple scrollable layout using only UIStackView without UITableView.

Example App

The example application is the best way to see LayoutItKit in action. Simply open the LayoutItKit.xcodeproj and run the Example scheme.

Installation

CocoaPods

LayoutItKit is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'LayoutItKit'

Carthage

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks.

To integrate LayoutItKit into your Xcode project using Carthage, specify it in your Cartfile:

github "abraaolevi/LayoutItKit"

Run carthage update to build the framework and drag the built LayoutItKit.framework into your Xcode project.

On your application targets’ “Build Phases” settings tab, click the “+” icon and choose “New Run Script Phase” and add the Framework path as mentioned in Carthage Getting started Step 4, 5 and 6

Swift Package Manager

To integrate using Apple's Swift Package Manager, add the following as a dependency to your Package.swift:

dependencies: [
    .package(url: "https://github.com/abraaolevi/LayoutItKit.git", from: "0.1.0")
]

Alternatively navigate to your Xcode project, select Swift Packages and click the + icon to search for LayoutItKit.

Manually

If you prefer not to use any of the aforementioned dependency managers, you can integrate LayoutItKit into your project manually. Simply drag the Sources Folder into your Xcode project.

How to use

It's easy to use, the following code demonstrates how to create an element listing very quickly and without much effort:

import LayoutItKit
import UIKit

class InlineViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Fluent code interface
        let label = UILabel()
            .withText("🚀\nInline UILabel\nLayoutItKit\nExample")
            .withFont(.systemFont(ofSize: 25, weight: .semibold))
            .withTextColor(.black)
            .withTextAlignment(.center)
            .withNumberOfLines(0)

        // Simple scrollableView using UIStackView without UITableView
        view.scrollableStack(views: [
            label,
            UIView(backgroundColor: .blue).withSize(height: 100),
            UIView(backgroundColor: .green).withSize(height: 100),
            UIView(backgroundColor: .black).withSize(height: 100),
            UIView(backgroundColor: .brown).withSize(height: 100),
            UIView(backgroundColor: .purple).withSize(height: 100),
            UIView(backgroundColor: .red).withSize(height: 100),
            UIView()
        ], spacing: 24)
    }
}

See the result of the code above:

Also, you can create your own component pieces:

import LayoutItKit
import UIKit

struct CreditCard {
    let number: String
    let holder: String
    let expiration: String
}

// You can create custom UIViews
class CreditCardView: UIView {

    // Custom initializers for the most common `UIView`, `UILabel`, and `UIStackView`.
    let titleLabel = UILabel(
        text: "Credit Card", 
        font: .boldSystemFont(ofSize: 32), 
        textColor: .white)

    let monthYearTitleLabel = UILabel(
        text: "Month / Year", 
        font: .systemFont(ofSize: 8), 
        textColor: .white)

    let validThruTitleLabel = UILabel(
        text: "Valid Thru", 
        font: .systemFont(ofSize: 10), 
        textColor: .white, 
        numberOfLines: 2)

    let cardNumberLabel = UILabel(
        font: .systemFont(ofSize: 24, weight: .semibold), 
        textColor: .white)

    let expirationLabel = UILabel(
        font: .systemFont(ofSize: 18), 
        textColor: .white)

    let holderLabel = UILabel(
        font: .systemFont(ofSize: 18), 
        textColor: .white)

    // UIView initializers
    convenience init(card: CreditCard) {
        self.init(frame: .zero)

        cardNumberLabel.text = card.number
        expirationLabel.text = card.expiration
        holderLabel.text = card.holder
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)

        // Creates layout with LayoutItKit 🚀

        vstack(
            titleLabel,
            spacer(),
            
            cardNumberLabel,
            vspacer(8),
            
            hstack(
                hspacer(30),
                monthYearTitleLabel,
                spacer()
            ),
            hstack(
                validThruTitleLabel.withSize(width: 30),
                expirationLabel,
                spacer()
            ),
            vspacer(8),

            holderLabel
        )
        .withPadding()
        
        // Set some color for the current UIView
        
        backgroundColor = .blue
        layer.cornerRadius = 12
        layer.masksToBounds = true
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

// On the UIViewController

class CreditCardViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        // Uses the CreditCardView component created
        let creditCard = CreditCardView(
            card: CreditCard(
                number: "4412 9873 1234 9876",
                holder: "Jonh Doe",
                expiration: "10 / 29"
            )
        )

        view.addSubviewAndCenterToSuperview(creditCard)

        // Credit Card Size
        let width = UIScreen.main.bounds.width - 64
        let height = (width / 3) * 2
        creditCard.withSize(width: width, height: height)
    }
}

Contributing

Contributions are very welcome 🙌

License

LayoutItKit
Copyright (c) 2020 LayoutItKit abr4ao.levi@gmail.com

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.