CODEWITHSUNDEEP
iosswift
Kelvin Lau
Kelvin Lau

Reputation: 6781

Achieving padding from SwiftUI to UIViews

In SwiftUI, you could easily achieving padding via the following code:

Text("Hello World!")
  .padding(20)

enter image description here

What options do I have to achieve the same in UIKit?

Upvotes: 0

Views: 576

Answers (3)

Asperi
Asperi

Reputation: 257719

Ok, most simple is of corse Storyboard-based approach (as shown by @Sagar_Chauhan)...

Below is provided line-by-line Playground variant (as to compare with SwiftUI Preview by lines of code, for instance).

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {
    override func loadView() {
        let view = UIView(frame: CGRect(x: 0, y: 0, width: 375, height: 677))
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .white

        self.view = view
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        let label = UILabel(frame: .zero)
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "Hello World!"
        label.textColor = .black
        label.backgroundColor = .yellow
        label.textAlignment = .center

        self.view.addSubview(label)

        let fitSize = label.sizeThatFits(view.bounds.size)
        label.widthAnchor.constraint(equalToConstant: fitSize.width + 12.0).isActive = true
        label.heightAnchor.constraint(equalToConstant: fitSize.height + 12.0).isActive = true


        label.topAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
        label.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
    }
}

PlaygroundPage.current.liveView = MyViewController()

Upvotes: 1

Mojtaba Hosseini
Mojtaba Hosseini

Reputation: 119310

Using a UIStackView, something like this:

class PaddingableView: UIView {

    var padding = UIEdgeInsets.zero { didSet { contentStackView.layoutMargins = padding } }

    // MARK: Subviews

    private lazy var contentStackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.alignment = .fill
        stackView.distribution = .fill

        stackView.isLayoutMarginsRelativeArrangement = true
        stackView.layoutMargins = padding
        return stackView
    }()

    // MARK: Functions

    private func addContentStackView() {
        super.addSubview(contentStackView)
        NSLayoutConstraint.activate([
            contentStackView.topAnchor.constraint(equalTo: topAnchor),
            contentStackView.bottomAnchor.constraint(equalTo: bottomAnchor),
            contentStackView.leadingAnchor.constraint(equalTo: leadingAnchor),
            contentStackView.trailingAnchor.constraint(equalTo: trailingAnchor)
        ])
    }

    override func addSubview(_ view: UIView) {
        contentStackView.addArrangedSubview(view)
    }

    override func layoutSubviews() {
        if contentStackView.superview == nil { addContentStackView() }
        super.layoutSubviews()
    }
}

Note that using too many nested stackviews can hit the performance

Upvotes: 1

Sagar Chauhan
Sagar Chauhan

Reputation: 5823

You can use storyboard for same and easily make this layout by combining UIView and Label.

Just add once view in view controller and centre align vertically and horizontally. Then add label inside that view and set top, bottom, leading, trailing to 20 respective to that view.

Just check following image.

Centre align view and label.

This will make exactly same output as you want.

Upvotes: 1

Related Questions