By Tattat


2011-01-08 01:46:56 8 Comments

I want to move one view on top of another, how can I know the z index of the view, and how to move on to top?

9 comments

@declan 2019-10-13 08:02:10

Or use this

- (void)insertSubview:(UIView *)view belowSubview:(UIView*)siblingSubview;

as per here

@abhijith k 2019-03-22 07:44:48

We can use zPosition in ios

if we have a view named salonDetailView eg : @IBOutlet weak var salonDetailView: UIView!

In my case see the image

and have UIView for GMSMapView eg : @IBOutlet weak var mapViewUI: GMSMapView!

To show the View salonDetailView upper of the mapViewUI

use zPosition as below

salonDetailView.layer.zPosition = 1

@skratchi.at 2019-03-22 08:03:36

please post photos and code directly here in your answer, to make it easier for OP to get it.

@abhijith k 2019-03-22 12:05:22

as a beginner, StackOverflow will not allow me to do that sorry. you can check the problem image i.stack.imgur.com/d9Cx3.png

@Suragch 2016-01-12 06:03:56

IB and Swift

Given the flowing layout where yellow is the superview and red, green, and blue are sibling subviews of yellow,

views - red view on top

the goal is to move a subview (let's say green) to the top.

views - green view on top

In Interface Builder

In the Interface Builder all you need to do is drag the view you want showing on the top to the bottom of the list in the Documents Outline.

order of views in Interface Builder

Alternatively, you can select the view and then in the menu go to Editor > Arrange > Send to Front.

In Swift

There are a couple of different ways to do this programmatically.

Method 1

yellowView.bringSubviewToFront(greenView)
  • This method is the programmatic equivalent of the IB answer above.
  • It only works if the subviews are siblings of each other.
  • An array of the subviews is contained in yellowView.subviews. Here, bringSubviewToFront moves the greenView from index 0 to 2. This can be observed with

    print(yellowView.subviews.indexOf(greenView))
    

Method 2

greenView.layer.zPosition = 1
  • This method just moves the 3D position of the layer higher (closer to the user) on the z-axis. Since the default is 0 for all the other views, the result is that the greenView looks like it is on top. However, it still remains at index 0 of the yellowView.subviews array. This can cause some unexpected results, though, because things like tap events will still go first to the view with the highest index number. For that reason, it might be better to go with Method 1 above.
  • The zPosition could be set to CGFloat.greatestFiniteMagnitude (CGFloat(FLT_MAX) in older versions of Swift) to ensure that it is on top.

@MizAkita 2016-03-03 21:45:18

thanks for this... i spent 8 hours trying to figure this out. yellowView.bringSubviewToFront(greenView) worked perfectly.

@Fattie 2016-06-08 17:26:31

Interestingly, container views do not respect this! You have to manually move them in code, it seems.

@Carter Medlin 2016-07-15 16:31:00

Within the view you want to bring to the top... (in swift)

superview?.bringSubviewToFront(self)

@Criss 2018-12-01 16:10:57

btnDOWN.superview?.bringSubview(toFront: btnDOWN)

@Kolin Krewinkel 2011-01-08 01:54:43

[parentView bringSubviewToFront:view] ;

@Madhav Sbss 2013-12-18 08:59:58

If you are using cocos2d, you may see an issue with [parentView bringSubviewToFront:view], at least it was not working for me. Instead of bringing the view I wanted to the front, I send the other views back and that did the trick.

[[[CCDirector sharedDirector] view] sendSubviewToBack:((UIButton *) button)]; 

@danpen 2011-01-08 01:49:55

You can use the zPosition property of the view's layer (it's a CALayer object) to change the z-index of the view.

theView.layer.zPosition = 1;

As Viktor Nordling added, "big values are on top. You can use any values you want, including negative values." The default value is 0.

You need to import the QuartzCore framework to access the layer. Just add this line of code at the top of your implementation file.

#import "QuartzCore/QuartzCore.h"

@Viktor Nordling 2012-06-09 13:08:43

Just as a helper, big values are "on top". You can use any values you want, including negative values.

@Muhammad Hassan Nasr 2012-11-22 17:42:10

This solution is better in case you want your view to be always on top. Just set zPosition to MAXFLOAT

@Stephen J 2012-12-11 22:07:58

I've just learned that the zPosition of the layer, and the UIView's input handler, are on two different Z-orders. It's really odd when your clicks "pass through"

@Hlung 2013-09-15 17:15:43

does the views' superview have to be the same in order to make zPosition works?

@MANIAK_dobrii 2015-02-03 14:05:45

Just got weird behaviour with transparency and rendering, my on-top view was blinking with some chunks of UILabel at the bottom, the thing was that I used CGFLOAT_MAX for zPosition. MAXFLOAT fixed this for me.

@Bruce Patin 2015-08-12 15:02:29

I noticed that, even though the view is on top, clicks go through it to objects underneath. This ought to be considered a bug. I am trying to find a general way to avoid that problem, without having to explicitly disable user interactions of any views that happen to be underneath.

@Ixx 2016-06-15 21:33:43

@BrucePatin yes it seems the responder chain is not affected by this, did you find a solution? I need the view on top to be interactive :/

@Joseph 2018-02-28 23:13:39

Using _view.Layer.ZPosition = float.MinValue; did not put the view behind items on my storyboard. I had to use View.SendSubviewToBack(_view); for that.

@larspars 2012-02-16 12:48:47

If you want to do this through XCode's Interface Builder, you can use the menu options under Editor->Arrangement. There you'll find "Send to Front", "Send to Back", etc.

@Nathan Eror 2011-01-11 22:42:10

UIView siblings are stacked in the order in which they are added to their superview. The UIView hierarchy methods and properties are there to manage view order. In UIView.h:

@property(nonatomic,readonly) UIView *superview;
@property(nonatomic,readonly,copy) NSArray *subviews;

- (void)removeFromSuperview;
- (void)insertSubview:(UIView *)view atIndex:(NSInteger)index;
- (void)exchangeSubviewAtIndex:(NSInteger)index1 withSubviewAtIndex:(NSInteger)index2;

- (void)addSubview:(UIView *)view;
- (void)insertSubview:(UIView *)view belowSubview:(UIView *)siblingSubview;
- (void)insertSubview:(UIView *)view aboveSubview:(UIView *)siblingSubview;

- (void)bringSubviewToFront:(UIView *)view;
- (void)sendSubviewToBack:(UIView *)view;

The sibling views are ordered back to front in the subviews array. So the topmost view will be:

[parentView.subviews lastObject];

and bottom view will be:

[parentView.subviews objectAtIndex:0];

Like Kolin Krewinkel said, [parentView bringSubviewToFront:view] will bring the view to the top, but this is only the case if the views are all siblings in the hierarchy.

Related Questions

Sponsored Content

93 Answered Questions

43 Answered Questions

[SOLVED] Passing Data between View Controllers

23 Answered Questions

[SOLVED] How do I check if a string contains another string in Objective-C?

40 Answered Questions

[SOLVED] How can I develop for iPhone using a Windows development machine?

  • 2008-08-22 13:35:01
  • ryan
  • 1102105 View
  • 1163 Score
  • 40 Answer
  • Tags:   ios iphone windows

23 Answered Questions

8 Answered Questions

[SOLVED] How to overlay one div over another div

49 Answered Questions

[SOLVED] Vertically align text to top within a UILabel

27 Answered Questions

21 Answered Questions

[SOLVED] Giving UIView rounded corners

26 Answered Questions

[SOLVED] Retrieve the position (X,Y) of an HTML element

Sponsored Content