StackViews Views and Shadows - ios

I am currently working to build my UI with the use of xcode/storyboard. I have a situation where my shadows are under my next stack view row. I tried to bring the UIView1 to front without any luck. There is no gap between the "rows". I see the shadows when I changed the height of UIView1 so I know I have a shadow.
StackView
---- Row with UIView1 + Shadow
---- Row with UIView2
---- Row etc..
I'm missing something but can't get it to work yet.

No need for a separate root view. Just take the shadow out of the stack view, put it above, then use Autolayout constraints to put it right below your UIView1 where it should be (shadow.top = view1.bottom or so to say).
Autolayout is not reserved to constraints between siblings or children, you can add rules between any view in your view hierarchy.

Stack view are only abstract container for views, Stack view does not get rendered on view, So If you are trying to add shadow on stack view then i suppose -
You have to place a view before stack view For this follow following steps
embed a root view to the stack view on which you are willing to add shadow.
Add shadow on that root view.

Related

Swift: Bring View from Stack View to front

I got a Stack View with view: 1,2,3,4 and 5
Looking for a method to bring the Image View4 from view4 in the Stack view, above all the other views. The reason I need this is because I am moving the Image View4 over the Image View3 in view3.
I have tried to move view3 over view4 in the view hierarchy, but that just swaps their places in the Stack View.
From the UIStackView documentation:
The order of [the views in] the subviews array defines the Z-order of the subviews. If the views overlap, subviews with a lower index appear behind subviews with a higher index.
So since all views in the stack view's arrangedSubviews array are also in the stack view's subviews array, you should be able to use the standard UIView APIs to rearrange the views z-order:
bringSubview(toFront:)
sendSubview(toBack:)
exchangeSubview(at:withSubviewAt:)
I don't know whether this is possible to do in Interface Builder or not.
Remove the image from the stack view and add it to the same view that contains the stack view as a subview, using addSubview(_:). That will put it on top of all other views. You could also use insertSubview(_:aboveSubview:) to insert it directly above the stack view.
You'll need to add constraints to the new view so that it is positioned where you want it.
You can have IBOutlet property in UIViewController but in view hierarchy it is placed in UIStackView.
So you should use
stackView.bringSubviewToFront(myView)
rather then
self.view.bringSubviewToFront(myView)

bringSubview(toFront:) seems not working

I have the following layout.
What I am trying to achieve is make the yellow subview as circle and bring it to front. I tried self.view.bringSubview(toFront:yellowView) but seems not working as I expected. How can I fix this?
-- edit
Sorry for the lack of details.
So on the root view, I have two subviews, top section and bottom section.
The bottom section is empty for now but the top section contains an imageview with same size as the top section and an circle UIView.
So what I want is to bring the bottom part os the circle UIView to front.
Your problem is that the circle UIView is not a child of the root view, but a child of the top view. In order for the circle to appear in front of the bottom view, reorder your view hierarchy.
Make the circle UIView a child of the root view. Then you will be able to bring it to the front of the other views with the code you have shown. In fact, if you make the circle UIView the last child of the root view, it will appear in front of all of the subviews of the root view.
Desired View Hierarchy:
Root View
- Top View
- UIImageView
- Bottom View
- Circle View
In the Document Outline, drag the Circle View and drop it onto the Root View.
If Your circleView and imageView is subview of containerView
then try this code.
self.containerView.bringSubview(toFront:yellowView)
Set clipBounds property to false for UIImageView:
self.imageView.clipsToBounds = false
You must call bringSubview from its superview.
try this;
self.yellowView.superview?.bringSubview(toFront: self.yellowView)
you can add outlet for yellowView.superview if you want.

UIStackView inside a subview programmatically

I've got a ViewController that has a lot of labels that must be displayed horizontally, so I've decided to use UIStackView for this.
These labels belong to different "sections", so I'm using nested stack views to achieve this. The problem is that one of these "sections" should be displayed with a different background color than the others.
I've read in another thread that UIStackView does not have a background color, and I should add the stack view inside a UIView and set a proper background color to it.
What I've made so far:
Create a UIView and set its color
Create a sub stack view and add some labels to it.
Add the sub stack view to the colored UIView
add the colored UIView to the main stack view.
The result: I'm not seeing any of those views inside my view controller.
Note: I need to do this programmatically.
Thanks in advance!!

UICollectionView Bug When Top Subview in "Structure" Pane

After banging my head against all the walls of the building, I have noticed that whenever I have a UICollectionView as a subview of my view controller's main view, the following holds:
If the collection view is the first subview in the "Structure" pane in Interface builder, the cells are pushed down by about 128 points (see images below:)
(red background is collection view)
However, if I add another view above the collection view, the item cells line up at the top (as expected), no extraneous margin:
...but it has to be placed above the collection view: If I re-arrange the views and place the dummy below the collection view, the bug resurfaces.
This collection view is horizontal scroll, one line (section). Ideally, the collection view height is the same as the cell height (no margin), so the bug caused the cells to not show at all. I had to try and enlarge the the collection view's canvas vertically to finally realize what was going on.
Is this a documented feature I am somehow missing, or is it a bug?
I fell like naming my dummy view "spacer.gif" and enjoying some late-nineties nostalgia.
ADDENDUM: I have further investigated and discovered that, the dummy view placed above the collection view is a necessary condition for it to work, but not sufficient. Moving it around (mostly to hide it) or adding/changing constraints on it makes the bug resurface in some cases. Very annoying, can't quite figure out the exact conditions...

UICollectionVIew inside UIView adds a huge amount of padding to the top of the collectionView

I am trying to add collection view to UIView and there is a problem that doesn't make any sense. Screenshot. I made the background color of the collection view, to make show the view area more clearly.
If I add the collection view straight to the controller (just like in UICollectionViewController), the top padding doesn't exist.
In this example, I have autolayouted the collection view to resize to the whole view but the problem existed the moment I added collection view to the UIView.
Also, if I add another collection view right after this view, there items start from the top, without any margins.
If there is anything else you need me to provide, I will do it. I think this is a storyboard bug or something because there are no insets, in the view's attributes.

Resources