How can I bring a view in front of another view, in Swift?

35
votes

Below are how my views are organized in IB, top->bottom when the app is started.

The user can do something to make "Category Table View Header" temporarily expand over "Name View" - however once doing so, the .TouchDown action assigned to "Category Table View Header" no longer works wherever it overlaps with "Name View" (i.e., the user can tap the header anywhere it doesn't overlap with name view and it still works).

enter image description here

I know that may be confusing, so I drew out some boxes. On the left is the original, right is after user action - problem is on the right the action on the red box only works if the user taps the bottom half, not the top half.

enter image description here

My guess is its because the header is lower in the view hierarchy than the name view, but it would be hard for me to change that without messing around with a bunch of constraints.

I also tried setting nameView.hidden = true, but that doesn't work.

6
iosswiftinterface-builder
it shouldnt mess with your constraints moving it around in the view hierarchy, so long as it stays at the same level, put your Name View below your Choose Quote View (not in it) and it should work – Fonix
Hey Fonix - thanks for the suggestion, but that seems to only make the view "appear" in front of the one below it in the view hierarchy. The actions associated with that view do not. In other words, I still run into the problem faced by the boxes I drew in my original question - the action doesn't work in the "overlap area". – vk2015
I think I figured it out - you can't move a view's child in front of that same view's sibling. I fixed it by "upgrading" the view's child to be its sibling, then moving it to the front. – vk2015

6 Answers

61
votes

If you want to bring a subview to the front, you can use:

SWIFT 4 + UPDATE

self.view.bringSubviewToFront(yourView)

SWIFT 3 UPDATE

self.view.bringSubview(toFront: yourView)

Send view to back:-

SWIFT 4+ UPDATE

self.view.sendSubviewToBack(yourView)

SWIFT 3 UPDATE

self.view.sendSubview(toBack: yourView)

SWIFT 4+ UPDATE - INSERT VIEW ON SPECIFIC LOCATION IN THE STACK

 parentView.insertSubview(yourView, belowSubview: requiredViewOnStack)
 parentView.insertSubview(yourView, aboveSubview: requiredViewOnStack)
12
votes

Swift 5.1+

UIKit draws views back to front, which means that views higher up the stack are drawn on top of those lower down. If you want to bring a subview to the front, there's a method just for you: bringSubviewToFront(). Here's an example:

parentView.bringSubviewToFront(childView)

This method can also be used to bring any subview to the front, even if you're not sure where it is:

childView.superview?.bringSubviewToFront(childView)
10
votes

In Swift 5

To bring a subview to front

self.view.bringSubviewToFront(yourView)

To send a subview to back

self.view.sendSubviewToBack(yourView)
4
votes

You can take a control over the order of subviews using methods: bringSubviewToFront and sendSubviewToBack from the superview.

You can access all the subviews contained by superview using self.view.subview array.

1
votes

The method has been updated since swift 3

What has worked for me and hopefully for you is using :

YourView.bringSubview(toFront: yourelementA)
YourView.bringSubview(toFront: yourelementB)

Alternatively you could use the following to send the object that is in the front:

YourView.sendSubview(toBack: yourelementC)

I hope this helps

0
votes

Swift 5.4

views in UIKit are drawn from the back towards the front (like adding icing onto a cake). This means that the new views will be placed on top/over the previously placed views. (e.g. Icing is the new view and the base of the cake being the old view.

You can use the following to manipulate the views Z-position using,

  1. Forward
parent.bringSubviewToFront(child)
  1. Backward
parent.sendSubviewToBack(child)