title: UIViewRepresentable hidden behind SwiftUI View
body: <p>I recently asked (and got a valid answer) to a question related to this issue. </p>
  
  <p><a href="https://stackoverflow.com/questions/61254931/how-do-i-get-my-uiviewrepresentable-to-correctly-size-for-its-content">How do I get my UIViewRepresentable to correctly size for its content?</a></p>
  
  <p>As I mentioned in the previous post, 
  I want to use the awesome MultiSegmentPicker written by Yonat Sharon in my SwiftUI View.</p>
  
  <p><a href="https://github.com/yonat/MultiSelectSegmentedControl" rel="nofollow noreferrer">https://github.com/yonat/MultiSelectSegmentedControl</a></p>
  
  <p>Implementing the answer showed that I'm not out of the woods, yet.</p>
  
  <p><a href="https://i.stack.imgur.com/5Gg61.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Gg61.png" alt="screenshot"></a></p>
  
  <p><strong>Notice that the bar is behind the "bottom" text view</strong>  </p>
  
  <p>In my non-demo view it is completely hidden behind other views - so it's not visible at all.</p>
  
  <p>I understand this is a constraints issue, and Xcode view debugging helpfully confirms: </p>
  
  <blockquote>
    <p>runtime: Layout Issues: Position is ambiguous for
    MultiSelectSegmentedControl.</p>
  </blockquote>
  
  <p>Where do I address this problem?  Is it in the UIViewRepresentable which is not behaving as I would expect?  Since the package has been around for years, and pure UIKit code does not encounter this issue, I'm pretty sure that the issue is in the UIViewRepresentable code.</p>
  
  <p>In the init for MultiSelectSegmentedControl is the following setup code:</p>
  
  <pre><code>   private func setup() {
          addConstrainedSubview(borderView, constrain: .top, .bottom, .left, .right)
          addConstrainedSubview(stackView, constrain: .top, .bottom)
          constrain(stackView, at: .left, to: borderView, diff: 1)
          constrain(stackView, at: .right, to: borderView, diff: -1)
          clipsToBounds = true
          stackView.distribution = .fillEqually
          borderWidth = { borderWidth }()
          borderRadius = { borderRadius }()
          tintColorDidChange()
          borderView.isUserInteractionEnabled = false
          addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(didTap)))
          accessibilityIdentifier = "MultiSelectSegmentedControl"
      }
  </code></pre>
  
  <p>In the <strong><em>MultiSegmentPicker: UIViewRepresentable</em></strong>'s init I find the following code related to constraints:</p>
  
  <pre><code>   public init(
          selectedSegmentIndexes: Binding&lt;IndexSet&gt;,
          items: [Any],
          allowsMultipleSelection: Bool? = nil,
          borderWidth: CGFloat? = nil,
          borderRadius: CGFloat? = nil,
          isVertical: Bool? = nil,
          isVerticalSegmentContents: Bool? = nil,
          selectedBackgroundColor: UIColor? = nil
      ) {
         _selectedSegmentIndexes = selectedSegmentIndexes
          uiView = MultiSelectSegmentedControl(items: items)
          uiView.translatesAutoresizingMaskIntoConstraints = false
  
          uiView.allowsMultipleSelection =? allowsMultipleSelection
          uiView.borderWidth =? borderWidth
          uiView.borderRadius =? borderRadius
          uiView.isVertical =? isVertical
          uiView.isVerticalSegmentContents =? isVerticalSegmentContents
          uiView.selectedBackgroundColor =? selectedBackgroundColor
         }
  </code></pre>
  
  <p>Also, the segment views <strong><em>MultiSelectSegment: UIView</em></strong>  use this code:</p>
  
  <pre><code>    private func setup() {
      addConstrainedSubview(stackView, constrain: .topMargin, .bottomMargin, .leftMargin, .rightMargin)
      layoutMargins = UIEdgeInsets(top: 7, left: 7, bottom: 7, right: 7)
      stackView.spacing = layoutMargins.left
      stackView.isUserInteractionEnabled = false
      stackView.alignment = .center
      isAccessibilityElement = true
      accessibilityTraits = [.button]
      accessibilityIdentifier = "MultiSelectSegment"
  }
  </code></pre>
  
  <p>Here is the code that demonstrates the problem shown above:</p>
  
  <pre><code>   var body: some View {
          VStack(alignment: .center) {
              Text("top")
              Spacer()
              MultiSegmentPicker(
                  selectedSegmentIndexes: $selectedSegmentIndexes,
                  items: ["First", "Second", "Third", "Done"]
              ).fixedSize()
              Text("bottom")
          }
      }
  }
  </code></pre>
  
  <p>What I expected from this code is that the bar with "First", "Second", etc. would be centered on the bottom, not pushed to the trailing edge, and that it would be <strong>above</strong> not <strong>behind</strong> the Text View displaying "bottom"</p>
  
  <p>=== EDIT ===
  Here's the view with the spacer removed and the .center alignment removed as well.  </p>
  
  <p>It might be helpful to see the difference...</p>
  
  <p><a href="https://i.stack.imgur.com/5ov4n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5ov4n.png" alt="enter image description here"></a></p>
  
  <p>=== EDIT 2 ==</p>
  
  <p>I want to show a little more "unexpected" behavior. Once you think about it, it isn't unexpected at all.  The Multiselector was positioned correctly, but hidden by the bigger view. When I added a regular Picker() object after the Multiselector, the multiselector peeks through...
  But these two pictures explain a lot:</p>
  
  <p><a href="https://i.stack.imgur.com/dHZUS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dHZUS.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/3xhZE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3xhZE.png" alt="enter image description here"></a></p>
  
  <p>== Edit 3 ==</p>
  
  <p>Yonat has fixed this bug, it works as expected now! (thanks!)</p>
  
  <p><a href="https://i.stack.imgur.com/KJCp7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KJCp7.png" alt="enter image description here"></a></p>