Learn how to simplify your iOS layouts in iOS 9 with this UIStackView tutorial.
This is a companion discussion topic for the original entry at https://www.raywenderlich.com/1580-uistackview-tutorial-introducing-stack-views
This is a companion discussion topic for the original entry at https://www.raywenderlich.com/1580-uistackview-tutorial-introducing-stack-views
Hi Jawwad, I have just discovered UIStackView. I was wondering if it could be used as a drag and drop interface, I currently have drag and drop working between views with labels in them. I can drag and drop, swap the views around etc.
This is done programatically using the frame positions to detect correct drop locations and draggable views. The problem is, it is not compatible with auto layout. Hence I has thinking of have a number stack views with space for only one uiview in each and drag and drop between the stack views. The location of the drag and drop areas is essentially positioned randomly on the screen. Any ideas?
Thanks,
Ian
Hi Ian - Sorry about the delay in replying. I’m really not sure how you would be able to implement a drag and drop interface with UIStackView. And as you mentioned you won’t be able to programmatically manipulate the frame positions when using AutoLayout. Were you able to find a solution or an alternate way to accomplish this?
Hi Jawwad. Looks like there’s a typo here.
This line “Another trick is to hold Shift and Right-click on any of the views in the stack view” should be “to hold Command and click on any…”.
I didn’t change my default keyboard commands on XCode. Please correct me if I am wrong.
If you’ve set up your Mac to allow you to right-click, it’s the same as Cmd-click.
Hi allenlinli - The original text as stated is correct. The Shift + Right-click shortcut allows you to to select a view that is under (or behind) the top view that you Shift + Right-clicked on since it will pop up a menu allowing you to select any view in the view hierarchy. If you held command and clicked on the view, it would just select the view at the very top. Following the text is a screenshot of what that popup menu should look like. Try it out on different views to get a feel for the results. Let me know if that clears things up for you. Thanks!
Thank you for the perfect tutorial.
I just wanna notify that ‘update frames’ key has been separated from AutoLayout issues buttons in XCode8.2. (I’m not sure it was 8.2, 8.1 or 8.0).
So I think that it is hard for those not familiar with XCode to find out the update frames button.
(Apologize for my poor English.)
After creating the top level stack view containing the other 5 stack views, the rating stack view no longer looks right. That is the only stack view that is horizontal, and is now forced to distribute across the whole screen, so the stars are no longer right next to the ‘RATING’ label. Any idea how to solve that?
@harrisrap You should set RATING label’s Horizontal Content Hugging Priority to Required (1000). It is in the Size inspector.
Priority Required (1000) seemed way to heavy handed for me. I found the minimum priority that would fix it in IB: 761. I realized there must be a hidden constraint/priority that the Stack View was adding, so I dug through the constraints at runtime and found:
<NSLayoutConstraint:0x61800008b180 'UISV-text-width-disambiguation' UILabel:0x7fe784b13b70'★★★★'.width == 0.5*UIStackView:0x7fe784b1a9e0.width - 4 priority:760 (active)>
So IB was adding a constraint @ priority 760 declaring that the ‘★★★★’ label’s width had to be half the width of the stack view (minus 4).
Curious if there was some rule here, such as the last element in the stack view being assigned this disambiguation constraint, I swapped the rating and the ‘★★★★’ label, changed the alignment to something else then back to fill (to see if it would reset who got the mystery constraint). Each time I inspected it, the stack view always assigned this constraint to the ★★★★ label.
tl;dr Xcode assigns a constraint of priority 760 to one of the labels disambiguate the widths. Adjusting someone’s content hugging @ 761 priority gives Xcode more information to layout the way you want.
1 Like
Didn’t work for me.
Funny (not funny) enough, the smart Auto Layout system decided to add this:
<NSLayoutConstraint:0x1d4295cc0 'UISV-text-width-disambiguation' UILabel:0x104e0aa10'My text'.width == 0.5*UIStackView:0x108f0bb40.width - 5 priority:771 (active)>
after setting the hugging priority to 761.
This tutorial is more than six months old so questions are no longer supported at the moment for it. Thank you!