backgroundColor for AnimatableStackView not set by FillDesignable

[SD10]

Issue

backgroundColor for AnimatableStackView not set by FillDesignable protocol and remains nil

Apparently UIStackView is a non-drawing view so drawRect() is never called and the backgroundColor is not applied.

EDIT: This obviously affects setting the opacity as well

Possible Solutions

We can possibly solve this by:

1. Adding a backing CAShapeLayer with the background color in layoutSubviews()
2. Adding a backing UIView with the background color in layoutSubviews()

This is not my domain of expertise so I thought I would bounce some ideas off the rest of you.

[lastMove]

I think that we shouldn't fix this issue.
the current behavior is very similar to UIKit's one.

UIStackView has a backgroundColor property but setting it has no effect. (This is the kind of problem which OO code). UIStackView is non-drawable but Apple (for some good reasons) makes it inherit from UIView Even if there some of UIView property non-compatible with UIstackView purpose.
So if we make AnimatableStackView drawable it can be confusing for new users and less compliant with UIKit.

[SD10]

@lastMove I think that's a valid point. There is obviously a reason why Apple decided to give UIStackView this functionality. @JakeLin @tbaranes your opinions?

UIStackView is not fully tested yet, but it's possible that other drawing code is not working on it as well. Maybe we should re-evaluate this class?

[tbaranes]

I agree with @lastMove, I would follow apple opinons on this. Since FillDesignable does the same thing as the backgroundColor property, we shouldn't make special case and keep copying the behavior.

In a long term process, I would be in favor to remove that designable protocol since it doesn't add features but that's another discussion 😬

[SD10]

Prematurely closed. This bug (which is becoming a feature) is still under review.

[JakeLin]

I agree with @lastMove too. UIStackView is like viewgroup in Android. It is a view container.

[phimage]

One way to resolve this issue is to pin an other view and copy the attributes

For instance for FillDesignable and CornerDesigable

class AnimatableStackView ...
... 

  // MARK: - Fix background
  func configureCornerRadius() {
    configureBackgroundView()
  }

  func configureFillColor() {
    configureBackgroundView()
  }

  func configureBackgroundView() {
    backgroundView.translatesAutoresizingMaskIntoConstraints = false
    backgroundView.predefinedColor = predefinedColor
    backgroundView.fillColor = fillColor
    backgroundView.cornerRadius = cornerRadius
    backgroundView.cornerSides = cornerSides

    if fillColor ?? predefinedColor?.color != nil {
      insertSubview(backgroundView, at: 0)
      backgroundView.pin(to: self)
    } else {
      backgroundView.removeFromSuperview()
    }
  }

  private var backgroundView = AnimatableView()
}

private extension UIView {
  func pin(to view: UIView) {
    NSLayoutConstraint.activate([
      leadingAnchor.constraint(equalTo: view.leadingAnchor),
      trailingAnchor.constraint(equalTo: view.trailingAnchor),
      topAnchor.constraint(equalTo: view.topAnchor),
      bottomAnchor.constraint(equalTo: view.bottomAnchor)
      ])
  }
}

[SD10]

@phimage I’m pretty sure I read in the Apple docs that UIStackView is not meant to be styled, which is why it has this behavior. I also think adding another view could surprise some users 🤔

_{Sent with GitHawk}

[JakeLin]

@phimage thanks for investigating that. I agree with @SD10 we probably keep the default behavior. We may add a comment to AnimatableStackView to let the user know we keep the default behavior then there is a way to support background color with a custom sub-class as you provide above. How do you think?