Is it possible to use a custom UIView constructed using autolayout to be used inside flex layout?

[rakeshashastri]

I have a complicated UIView with a lot of children laid out using autolayout. Can this be used inside flex layout with minimum effort? Right now constraints break and the view is not laid out properly.

Simplified POC - rakeshashastri/flexLayoutPOC@3ed6f2f

[mihaicris-adoreme]

I have the same question. I cant reuse some components made with autolayout inside flex layout, and the library lacks some documentation for this case. Some small examples would be really appreciated.

[heoblitz]

Hello! Although there’s no official support, it is possible to use Auto Layout views within a FlexLayout by writing some custom code.

1. Inside your custom view, create a containerView and define Auto Layout constraints within it.

2. Override sizeThatFits to calculate the size using systemLayoutSizeFitting.

• Depending on your view hierarchy, you may need to pass additional options or use UIView.layoutFittingCompressedSize or UIView.layoutFittingExpandedSize as the fitting size.

Please refer to the code below for more details.

AutoLayoutView code

class AutoLayoutView: UIView {
  private let containerView = UIView()
  private let stackView = UIStackView()
  private let autoLayoutLabel = UILabel()
  private let redView = UIView()
  private let greenView = UIView()
  private let blueView = UIView()
  
  override init(frame: CGRect) {
    super.init(frame: frame)
    setupView()
  }
  
  required init?(coder: NSCoder) {
    super.init(coder: coder)
    setupView()
  }
    
  override func sizeThatFits(_ size: CGSize) -> CGSize {
    return super.systemLayoutSizeFitting(size)
  }
  
  private func setupView() {
    setupContainerView()
    setupStackView()
    setupLabel()
    setupColorViews()
    setupConstraints()
  }
  
  private func setupContainerView() {
    //  When accessing flex from an internal view, Yoga is activated. In this case, you need to uncomment the code below.
    //  containerView.flex.isIncludedInLayout = false
    containerView.backgroundColor = UIColor.systemGray6
    containerView.layer.cornerRadius = 8
    containerView.translatesAutoresizingMaskIntoConstraints = false
    addSubview(containerView)
  }
  
  private func setupStackView() {
    stackView.axis = .vertical
    stackView.distribution = .fillProportionally
    stackView.alignment = .fill
    stackView.spacing = 10
    stackView.translatesAutoresizingMaskIntoConstraints = false
    containerView.addSubview(stackView)
  }
  
  private func setupLabel() {
    autoLayoutLabel.text = "This is an Auto Layout View\n☺️👋"
    autoLayoutLabel.numberOfLines = 0
    autoLayoutLabel.textAlignment = .left
    autoLayoutLabel.font = UIFont.systemFont(ofSize: 16, weight: .medium)
    autoLayoutLabel.textColor = UIColor.label
    autoLayoutLabel.clipsToBounds = true
    stackView.addArrangedSubview(autoLayoutLabel)
  }
  
  private func setupColorViews() {
    redView.backgroundColor = UIColor.systemRed
    redView.layer.cornerRadius = 4
    stackView.addArrangedSubview(redView)
    
    greenView.backgroundColor = UIColor.systemGreen
    greenView.layer.cornerRadius = 4
    stackView.addArrangedSubview(greenView)
    
    blueView.backgroundColor = UIColor.systemBlue
    blueView.layer.cornerRadius = 4
    stackView.addArrangedSubview(blueView)
  }
  
  private func setupConstraints() {
    let containerBottomAnchor = containerView.bottomAnchor.constraint(equalTo: bottomAnchor)
    containerBottomAnchor.priority = .defaultHigh
    
    NSLayoutConstraint.activate([
      containerView.topAnchor.constraint(equalTo: topAnchor),
      containerView.leadingAnchor.constraint(equalTo: leadingAnchor),
      containerView.trailingAnchor.constraint(equalTo: trailingAnchor),
      containerBottomAnchor,
      
      stackView.topAnchor.constraint(equalTo: containerView.topAnchor),
      stackView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
      stackView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
      stackView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),
      
      redView.heightAnchor.constraint(equalToConstant: 22),
      greenView.heightAnchor.constraint(equalToConstant: 24),
      blueView.heightAnchor.constraint(equalToConstant: 26)
    ])
  }
}

// FlexLayout Example IntroView
// ...
rootFlexContainer.flex.direction(.column).padding(12).define { (flex) in
    flex.addItem().direction(.row).define { (flex) in
        flex.addItem(imageView).width(100).aspectRatio(of: imageView)
        
        flex.addItem().direction(.column).paddingLeft(12).grow(1).shrink(1).define { (flex) in
            flex.addItem(segmentedControl).marginBottom(12).grow(1)
            flex.addItem(AutoLayoutView()) // AutoLayout
            flex.addItem(label)
        }
    }
    
    flex.addItem().height(1).marginTop(12).backgroundColor(.lightGray)
    flex.addItem(bottomLabel).marginTop(12)
}

[heoblitz]

Since this is an old issue, I will close it. If you have any additional comments, please let us know! Thank you.