类似于UILabel的自动布局中的自定义视图的故事板设置宽度/高度

Question

Labels are really convenient in iOS autolayout because they don't require a constraints to determine size, they only require an X and a Y position. For static text this is great.

I have a custom view that I would like to provide a default size to auto layout similar to UILabels . Is this possible? I am familiar with IBInspectable and IBDesignable , but I'm not sure how to implement this. I am using autolayout in storyboards , but I imagine the solution would work for storyboards + programmatic.

I know I can just set the height and width , but this is view that will be used everywhere so it would be nice to have the width / height dynamic.

Answer 1

Unfortunately, there is no smooth way to add UIView without specifying its size values, ie its width and height .

Speaking of auto-layout, there are 2 options you got, probably you are already aware of too. 1) you should either set UIView's size values, or 2. you set other UI Objects' sizes so that auto-layout can understand the size of UIView .

Speaking of programmatically, upon creating UIView object, if you do not provide frame, then it is not shown. Although this might be a solution to put at any point with any size, it might be not ideal when you are using xibs or storyboards, since there would be a gap on those interfaces which may also confuse development.

The way I am thinking of includes using both intrinsicContentSize and IBDesignable . I made a little demo for this purpose and you can find this code below. I will share 2 examples, one is inherited from UILabel and the other is inherited from UIView , so that I can show usage of intrinsicContentSize easier.

Below is the UIView one.

import UIKit

@IBDesignable class UIDemoView: UIView {

    func setup() {
        layer.cornerRadius = frame.height / 5
        clipsToBounds = true
    }    

    override func awakeFromNib() {
        super.awakeFromNib()
        self.setup()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        self.setup()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        self.setup()
    }

    override var intrinsicContentSize: CGSize {
        let newWidth = 100
        let newHeight = 100
        let newSize = CGSize(width: newWidth, height: newHeight)
        return newSize
    }
}

And below is the UILabel one.

import UIKit

@IBDesignable class UIDemoLabel: UILabel {

    func setup() {
        layer.cornerRadius = frame.height / 2
        clipsToBounds = true
        textAlignment = .center
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        self.setup()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        self.setup()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        self.setup()
    }

    override var intrinsicContentSize: CGSize {
        let superSize = super.intrinsicContentSize
        let newWidth = superSize.width + superSize.height
        let newHeight = superSize.height
        let newSize = CGSize(width: newWidth, height: newHeight)
        return newSize
    }
}

Here is the output on auto-layout

I intentionally showed the constraints on both object, so you can check if I understand you correctly. They both have only 2 constraints: top and center alignment.

UILabels have theirs own intrinsicContentSize , so when overriding them we might use their already given intrinsicContentSize as a reference, as a guidance to whatever we want to do. UIViews intrinsicContentSize is not set, therefore we must find a way to give them specific sizes. With not being sure, I am guessing for UILabel intrinsicContentSize implementation, logic is most probably related with the size of the text. You can simply pass constants like above code, or you can use any custom logic to provide CGFloats .

Just a thought of mine: Even though I came with this solution, I am not fan of IBDesignables . From my perspective, they slow down the development because of its buggy nature. Thus, to be fully honest, I'd rather 1. putting UIView objects on xibs and storyboards , 2. changing its class from UIView to custom UIView class, 3. settings its constraints, 4. setting remaining properties programmatically from its IBOutlet . This is more of a traditional way, tho :)

Hope this helps you!

Answer 2

You can override

var intrinsicContentSize: CGSize { get }

property of UIView and calculate and return the height and width of the view based on its contents.

Ref : intrinsicContentSize