Let's say that I have a xib with a stack of UIViews on top of each other:
The bottom UIView(A) with a UIButton on it and when the button is pressed,
this layer is hidden and the next one is shown and put on top.
The next UIView(B) contains a clock counting down from 5 to 0
and when 0 is reached this UIView is hidden and the one described above is
moved to front and shown instead.
So just to make it more clear:
the composition of the xib:
A B
--Z direction-->
update: screenshot attached at the bottom of page.
So to my problem:
When (re)positioning the button or the clock using mouse in Xcode they tend to stick to the wrong
UIView. The more the Objects and "stacked" UIViews the greater the problem.
The Question:
Is there any way to, as with the layer "eye" in photoshop, isolate the UIViews and work on them one by one?
Observe!
I am aware that there are o there ways of achieving this swapping between view BUT this is not the issue. The real problem here is to actually position the button and the clock in the Xcode wysiwyg editor with the least hassle.
Observe!
-------- Added for clarification --------
Screenshot
I would like to isolate the views visually so when working on one of them, all the others are hidden and not open for interaction.
You can drag the second view (B) out of the main view hierarchy and place it below it (on the same level of the main view). That way you'll be able to edit each view separately.
Then you connect that view (B) to an outlet in your viewcontoller inorder to be able to add it to your main view during runtime...just set the frame and add it as a sub view.
Related
I'm working on a screen that has a UITableView below the screen(thus invisible) initially, but will pop up when user click on a button. I know it's not supposed to be seen on the screen, but just for the sake of design, is there a way to make it visible when I'm working on main.storyboard?
Please see the picture attached below. It's really hard to work on the UITableView when it's beneath the toolbar. How can I force xcode to display them so it's much easier to work on?
You can't, but you have 3 workarounds:
Move it into view (Xcode will complain that it's not in the right position, but it doesn't matter)
On the bottom left on your storyboard, you can open up the view hierarchy, you can find your element there for creating constraints, linking it with your code and everything else you'd want to do.
Increase the visible size of the viewcontroller on your storyboard, trough selecting your viewcontroller on the storyboard, changing Simulated Size to freeform and increasing the values (will not affect size when running).
The easiest way to deal with this is to:
open storyboard
select the viewcontroller you want to edit
open the Size Inspector
Switch from Fixed to Freeform
Type in a larger height (like 1000)
Simplest thing is to manually do what your button does in the app.
In the view hierarchy on the left, select your table view and move it down to the bottom. This will bring it to the front in interface builder.
When you are done, move it back.
I do this all the time and you get used to doing it. Just watch out for accidentally moving it inside another view when you drag it down or up.
What is the effect of having a UIView act as a child of another UIView in the scoreboard?
Using AVCam as an example, in the storyboard of the project, the components are layered out as following:
Observe that the 3 Button components act as children of “Cam Preview View”.
I’ve made an experiment and managed to get them to be children of “View”. This does not break any UIButton outlet functionality that I’ve managed to notice.
This is a design time choice by the developer. This changes how the controls can be moved by the constraints or other layout controls like springs and strut). Moving them around will not break any wired outlets however can introduce logical errors.
That said it's possible that there is no significant effect for this demo code.
In the first image you posted, those buttons are added as subviews of the Cam Preview View. It is the same as saying
[camPreviewView addSubview:button];
In the second image instead of the buttons subviews of the Cam Preview View, they are subviews of the View at the top of the hierarchy.
This is a design choice made by the developer. Clearly s/he wanted a view with three buttons contained inside as subviews. That way, you can move the Camera Preview View around and the buttons stay in their relative locations within the view.
I have a UICollectionViewController setup. It shows something kind of like a gantt chart, with selectable bars, scrolling, etc. I want to have a "trash/delete" button that always floats in the bottom right of the screen, regardless of scroll. It will delete the current selection (if there's one) in the UICollectionView.
I see two basic approaches:
Use the Supplementary Views facility of my UICollectionView. What I dread about this, is that I'll have to muck with its layout in my layout (I'm using my own subclass of UICollectionViewLayout) to keep it positioned in the bottom right corner, regardless of scroll.
Just add a UIButton to the canvas and set it up there. Maybe this isn't even a real approach, because this is what I wanted to do. While my button may manipulate items found in the UICollectionView, it's not really a real member of the collection view. But I found when I tried to drag a UIButton onto my Controller in the storyboard, it wouldn't stick. It doesn't seem to want to add it. Do I have to change to use a UISingleViewController, and then have a top level view that I can add both my button and collection view into? And then repeat all of the handy delegate/property setup that I get for free from UICollectionViewController?
You:
drag a button on to the view
in storyboard/xib.
Then, in the hierarchy column on the left, ensure it is at the bottom. That means it will be in front of everything else.
So, if necessary move it so it is in front of (ie, below in hierarchy) the collection view.
Note that there is absolutely no problem, at all, with putting one control "in front of" the other (i.e., so that it "blocks" you from seeing all or part of the other one).
If you had a problem doing this, you've made a trivial mistake. For example you may have dragged the new button "into" the collection view, rather than as a "sibling of" the collection view. Hope it helps.
How can I place UIViews on top of each other in the storyboard without nesting the UIView within each other? I want them to be subviews of the parent UIView, not subviews of each other. The default functionality always forces UIViews to go within each other, not on top of one another.
I am doing this because there will be background methods that control the visibility of such UIViews, which are connected via IBOutlet.
The easiest way (the only way I know) is to drag the views from the Objects panel (the panel where all the vies and hierarchy is listed, marked with red) and create your desired hierarchy. But the annoying part of this process is, if you want to re position the views, you can't drag them because they will be nested again so you will have to move them using x, y, width, height values.
What I'd like to do is drag a component/view from one superview to another in Xcode's interface-builder without having its frame/position be reset.
Xcode's default behavior when doing this appears to be to center the view being moved vertically and horizontally in its new superview, while preserving its dimensions. This is extremely frustrating, as it means that the view needs to be manually repositioned in its new superview. But I had it positioned correctly before I moved it, so I'd like Xcode to just remember all attributes of its frame instead of just its width/height. Is this possible?
Another solution:
Select the items you want in your subview, then
(in the tool bar) Editor > Embed In > view type to embed in.
I found something that might help you guys!
The task is to regroup "child views" into "parent view" so they become children of parent view hierarchically and retain physical positions on display as before action.
First, adjust the parent view to physically covers area of child views. Second, make sure that all children are bellow it in the view list.
Now select all children with the mouse and move them e.g. one pixel up and one pixel down (just to say IB there is some change). After that release children and they will magically become children of the parent and keep their positions on display.
It works for me on OSX 10.8.2 and Xcode 4.6.
Good luck!
I managed to save a lot of time spent repositioning stuff and did this:
Add the parent view in Interface Builder on the same level as the would-be subviews.
Open the storyboard in a text editor and copy the would-be subviews inside the subviews tags of the parent view. XCode is going to update once you save it.
Not very elegant though, can't see why XCode doesn't support it with Shift or something.
Select all controls you want to move from one UIView to another UiView(nay be child) or ScrollView
Cut/Copy
Now after dragging new UIView/ScrollView to your existing UIView, Don't click once to select it, instead DOUBLE click on the new UIView/ScrollView and paste all controls.
Distance difference will remain same among all controls, but you may have to reposition controls again. So don't click anywhere until you have repositioned those, just reposition all controls by navigation arrows as those are all selected already, or you may ve to select those again.
NOTE: I m on XCode 4.2
I have done something similar to Stepan's solution, without using a storyboard. In the IB while the ViewController's view is open:
Create another view in addition to VC's main view
Move all subviews to the second view by dragging them from one view to another (dragging from the list on the left side resets their position) If you cannot select them from the IB using your mouse then select all from the list on the left side then select one final subview from the IB panel using "cmd" button.
Take them back to the final view on the initial main view.
Remove the added view, all set.
This is the best solution to copy subviews to another view and retaining the positions :
Select the items you want in your subview, then
Editor -> Embed In -> View
Copy this View (Cmd+C)
Undo (Cmd+Z) (Since you just wanted the subviews)
Go to the view you want the subviews in and paste it(Cmd+V)
Select the Embedding View that you copy-pasted and Editor -> Unembed
Step 6 would remove the embedding view and you'll have copied just the subviews.
Xcode Interface Builder messes when a Parent View is dragged and dropped into another View (UIView, ScrollView, StackView)
Q:
Embedding a View (which contains many other subviews within it) into a ScrollView or in another top level view is not straight forward with what I have seen so far. What happens soon after is all the subviews might seems to be misplaced due to it couldn’t find their original frame.
A:
Follow following steps and you will be able to resolve it easier as possible:
Select the items you want in your subview, then
Go to menubar, Editor -> Embed In -> View
Copy this new View (Cmd+C) with the subviews (for me currently all the constraints were preserved so far at this point)
Go to the view (be it a ScrollView or may be StackView) you want the subviews to be in and paste (Cmd+V) the copied view
Select the pasted Embedding View (which you newly created previously) and Go to menubar of Xcode, Editor -> Unembed
No, not finished yet! Sometimes, you may experience that there are few more UI Constraint related issues, you will have to resolve them accordingly.
I detected another approach. It is basically: Move = Cut + Paste
This way you do:
get all your subviews to be children of the new parent view (P')
keep (almost) all of your constraints in Auto-Layout based Storyboard
keep your subview's relative positions (frames) one to another
This way you do not:
edit Storyboard file in a text editor
Base the thing is that each view except one (root) in Storyboard has its parent view. Next, when you copy/move multiple subviews, you lose frames and constraints.
The answer is pretty simple. You make a copy of your subviews (SVs) by copying their parent view (P) into new parent view (P'). This way you may need to recreate only constraints from that parent new view (P') to its new parent view but not for every subview you wanted to move.
After you did make copy of parent view (P) into new one (P'), from that new view (P') you:
remove all the children except ones that you wanted to move
recreate new parent (P') constraints
recreate possible Interface Builder outlets to (SVs')
And from original parent view (P) you:
remove all the children that you wanted to move
Before:
View1
View2
P
SVs-you-want-to-move
SVs-you-do-not-want-to-move
View3
After:
View1
View2
P
SVs-you-do-not-want-to-move
View3
P'
SVs'-you-want-to-move
I should stress that this does not generalise well if you have e.g. UIScrollView as a parent view. Then a copy of it would be again a UIScrollView what may not be desirable.
Another thing is when you do remove some of the subviews (SVs) in original parent view (P), you may need to recreate some constraints if other (non-moveable subviews) reference them. But you should do that anyway.
What helped me to solve this issue was-
Create the desired parent view (scroll view or uiview) in the xib at the root level and resize it accordingly
Copy all the views that you want to be subviews of this parent view and paste them onto the new view you created in step 1
At this point you will have duplicated these views. The newly added views would be a misaligned but still in the same order and at the same distance with respect to each other, align them in the xib to match their bounds with the old copies of the same view (This assumes that the new parent view has same bounds as the old one)
The newly added views will lose some of the constraints, refer to the old views to fix those
Delete the old views from the xib