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?

[phimage]

Yes I agree. Some doc and the issue could be closed.

The default way to do in storyboard is to add a view then inside a stackview

[SD10]

I think we should just remove the FillDesignable protocol from UIStackView since it has no effect.

IBAnimatable/Sources/Views/AnimatableStackView.swift

Line 10 in 390f269

open class AnimatableStackView: UIStackView, CornerDesignable, FillDesignable, BorderDesignable,

I can submit a PR if you like

[phimage]

Not only FillDesignable

[SD10]

This is true, anything that relies on drawRect() wouldn't work. So we would have to remove everything other than Animatable and RotationDesignable but I'm not sure for certain if those two work either.