Setting constraints for dynamic views in iOS

Question

I have an app which uses Stack Views to update its UI depending on the number of pigs. For example below, 1 pig and 4 pigs.

I set up Stack Views in Storyboard and set isHidden to true based on how many pigs there are. I set up my custom view with my class below and set up x and y values of labels based on the current frame.

class PiggyBankView: UIView {

let titleLbl = UILabel()
let imageView = UIImageView()
let budgetLbl = CountingLabel()
let padding : CGFloat = 10.0
var parentFrame : CGRect?
var mainVC : MainVC?

init(parent : CGRect, frame : CGRect) {
    self.parentFrame = parent
    super.init(frame : frame)
    self.addCustomView()
}

override init(frame: CGRect) {
    super.init(frame: frame)
    self.addCustomView()
}


required init(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

func addCustomView() {

    self.backgroundColor = UIColor.clear

    //Set Padding For Image View
    let pad = padding * 2
    let innerSize = CGSize(width: self.frame.size.width - pad, height: self.frame.size.height - pad)
    let innerFrame = CGRect(x: padding, y: padding, width: innerSize.width, height: innerSize.height)

    //Image View
    imageView.frame = innerFrame
    imageView.backgroundColor = UIColor.clear
    imageView.contentMode = .scaleAspectFit
    imageView.image = UIImage(named: "pig-main")
    let centerPoint = CGPoint(x: imageView.frame.size.width / 2, y: imageView.frame.size.height / 2)

    // Title Label and Budget Label Based on its frame
    let size = CGSize(width: self.frame.size.width - pad, height: self.frame.size.height / 10)

    //Test
    self.setNeedsLayout()
    self.layoutIfNeeded()
    print("HEIGHT : \(self.frame.size.height), WIDTH : \(self.frame.size.width)")


    var parentHeight : CGFloat = 0.0
    var parentWidth : CGFloat = 0.0

    if let mainFrame = parentFrame {
        print(mainFrame.size.height)
        print(mainFrame.size.width)
        parentHeight = mainFrame.size.height
        parentWidth = mainFrame.size.width
    }

    let frameWidth = floor(self.frame.size.width)
    let frameHeight = floor(self.frame.size.height)
    var titleFrame : CGRect
    var labelFrame : CGRect
    var dragFromFrame : CGRect

    print("\(parentWidth / 2)")
    //TALL HEIGHT WIDE WIDTH
    if frameHeight == parentHeight && frameWidth == parentWidth {
        print("1 TALL HEIGHT / WIDE WIDTH ")
        titleFrame = CGRect(x: padding, y: (size.height * 2) - 20, width: size.width, height: size.height)
        labelFrame = CGRect(x: padding, y: (size.height * 7) + 25, width: size.width, height: size.height)



    // TALL HEIGHT SMALL WIDTH
    }else if frameHeight == parentHeight && frameWidth == floor(parentWidth / 2) {
        print("2 TALL HEIGHT / SMALL WIDTH")
        titleFrame = CGRect(x: padding, y: size.height * 3, width: size.width, height: size.height)
        labelFrame = CGRect(x: padding, y: size.height * 6 + 15, width: size.width, height: size.height)


    // SHORT HEIGHT - WIDE WIDTH
    }else if frameHeight == floor(parentHeight / 2) && frameWidth == parentWidth {
        print("3 SHORT HEIGHT / WIDE WIDTH Pig")
        titleFrame = CGRect(x: padding, y: -10, width: size.width, height: size.height)
        labelFrame = CGRect(x: padding, y: size.height * 9 + 10, width: size.width, height: size.height)


    // SHORT HEIGHT - SMALL WIDTH
    }else {
        print("4 SHORT HEIGHT / SHORT WIDTH Pig")
        titleFrame = CGRect(x: padding, y: (size.height * 2) - 10, width: size.width, height: size.height)
        labelFrame = CGRect(x: padding, y: (size.height * 7) + 15, width: size.width, height: size.height)

    }

    // Title label
    titleLbl.frame = titleFrame
    titleLbl.textAlignment = .center
    titleLbl.backgroundColor = UIColor.clear
    titleLbl.font = UIFont(name: "CaviarDreams", size: 20.0)
    titleLbl.textColor = UIColor.black
    titleLbl.adjustsFontSizeToFitWidth = true

    //Price Label
    let budgetFrame = CGRect(x: labelFrame.origin.x, y: labelFrame.origin.y, width: labelFrame.width * 0.8, height: labelFrame.height)
    budgetLbl.frame = budgetFrame
    budgetLbl.center = CGPoint(x: self.frame.width / 2, y: budgetFrame.origin.y)
    budgetLbl.textAlignment = .center
    budgetLbl.backgroundColor = UIColor.clear
    budgetLbl.font = UIFont(name: "Roboto", size: 16.0)
    budgetLbl.textColor = UIColor.black
    budgetLbl.adjustsFontSizeToFitWidth = true

    self.addSubview(imageView)
    self.addSubview(titleLbl)
    self.addSubview(budgetLbl)
    self.addSubview(coinImageView)
    imageView.addSubview(dragFromView)
}

This gets the job done but I feel like my code is messy and unnecessary. Is there a better way to do this?

Answer 1

Welcome to Code Review, and yes! There is room for improvement here :)

First of all, I agree that this is worthy of subclassing UIView - there's enough here that I think makes sense to wrap these up into a custom component.

Property access level and names

When you're creating a custom view you want to keep all the subviews private. Otherwise some external view can grab a reference and do things like myPiggy.titleLabel.removeFromSuperview() instead, set these as private so they're only available from within the scope of your view.

I'd suggest not abbreviating the names. It's easier to read when it's a full word, and Xcode will autocomplete the properties so it's not like it's any faster to type by having shorter names.

class PiggyBankView: UIView {

    private let titleLabel = UILabel()
    private let imageView = UIImageView()
    private let budgetLabel = CountingLabel()

    //...
}

I'm assuming that somewhere in you're view controller you're setting the label text, and possibly pig color through these properties.

Instead, I'd pass this information in through the an initializer :

init(title: String, budget: String, pigImage: UIImage) {
        self.title = title
        // etc
}

Views should only be concerned about their subviews

You're keeping reference to the parent frame and the containing view controller:

//var parentFrame : CGRect?
//var mainVC : MainVC? // (I don't see this actually being used anywhere anyway)

And later in addCustomView() you're using the size of the parent frame to drive the layout logic.

if let mainFrame = parentFrame {
    parentHeight = mainFrame.size.height
    parentWidth = mainFrame.size.width
}

Views should never have to worry about that, and instead the containing view should have the responsibility for setting the size, position etc...

Make use of constraints and/or the view lifecycle

Without seeing how these views are using within the containing view controller I don't actually understand how these views are successfully resizing by toggling their isHidden property in a stack view (unless perhaps you're manually calling addCustomView() from the view controller but even then I'm not sure..)

Instead, I'd suggest either:

1. Defining constraints that allow the view to be adaptive (e.g. pin the pigImage to the left, right anchors of the view).
2. overriding layoutSubviews() to manually calculate and update the frames of your subviews as the frame of this view changes.

Personally I prefer constraints approach, but some find it off-putting because you can end up with a lot of verbose code.

I'm pretty sure that you will be able to set some relatively simple constraints that will greatly simplify your list of if/else statements that are checking for different combinations of wide/narrow/tall/short.

With the constraints set up, you'll also get the option of being able to set up a nice animation (if you want) of this view resizing in the stack view as different piggybank views are hidden/displayed.

If these PiggyBankViews are being managed by a UIStackView you'll also probably want to override intrinsicContentSize. I tend to end up using stack views with a UIStackViewDistribution.fillProportionally in which case the intrinsic content size is really used as a reference for the aspect ratio of the view, in your case the PiggyBankView is taller than wide because of the labels above and below the image so I'd return something like this:

override var intrinsicContentSize: CGSize {
        return CGSize(width: 100, height: 130)
}   

which is a pointer for the stack view to set the height of the view to be 130% of the width that it's allocated.

Formatting

This may seem insignificant now, and you're mostly consistent, but in a few places you're adding a space before the colon that separates the property name and type:

// instead of this 
var titleFrame : CGRect

//do this
var titleFrame: CGRect

This is all pretty general feedback, but I hope it inspires you to go out and learn some more about views either for this or a future project!