Add Custom Snap-Lines to UIView for Interface Builder - xcode

I have always wondered if there is a way to add custom "snap lines" to a UIView descendant, so I have a nice mechanism to layout my views using the Interface Builder of Xcode.
Here is my very basic UIView:
This view serves as a container control for other UIViews. Is there a way to add these lines so Xcode draws the "blue snap" lines when moving a control inside this view?
I know that there are UILayoutGuides but these don't add the desired snap lines to the Interface Builder (Xcode 9.3).
Here is another screenshot:

A workaround for this would be creating a view with a height of 1 and the width of its superview. After that, views with the same superview will snap to it.
Some tips:
Set a light background color for the view, so that it won't be distracting.
Remove the view when it's no longer needed. If you want to keep it for later usage, just hide it.

Related

Aligning tableView in specific place of ViewController in Swift

I am trying to place a tableView in a specific position in ViewController (from half of the page to bottom). But anytime when I am trying to use Constrains the tableView is getting lost somewhere (even if I add Horizontal and Vertical centre in container)
here is the image of my storyboard in assistant editor and view controller scene
and here is a image after adding constrains
Actually I just fixed in the simplest way by just adding missing constrains.

Move all subviews to container view keeping positions and constraints

I'm using Xcode 5 and autolayout in my project. I have a .xib file with a lot of subviews and constraints between them. Now I need to create an intermediate fullscreen container view and put all subviews there. So now I have view->subviews, and I want view->container view->subviews. When I do this in IB by dragging subviews into container view, they all get centred and all constraints get lost. It's going to be a little hard to restore all constraints manually. Is there a smart way to do this keeping all subviews' positions and constraints?
Add your container view to the hierarchy (to get an object ID) in Interface Builder and close the view. Edit the .xib file manually, in a text editor, and move all subviews to be under the container view. Constraints are created in IB with references to IB object IDs, so you will have to replace the constraints from referencing the superview with the container; a quick replace run should be sufficient.
You can do this in Xcode 6 by using cut&paste to a separate view (which you can later drag around to wherever you actually need it).

Xcode - Visually identify custom views in interface builder / storyboard

If you build a custom UIView, and integrate it inside of a parent view/view controller in interface builder, the graphical element representing your custom view is invisible, if you don't specify a background color (I don't).
Is there any way, solely during development, to identify different custom views? Any hacks/tricks to distinguish them?
The closest I could come up with is setting the background color in IB, then removing the background in the implementation of the custom view.
Bounds Rectangles
You might find bounds rectangles useful. You can turn them on by going to the menu bar and choosing Editor > Canvas > Show Bounds Rectangles.
Here's an example. I have a view (a UICollectionViewCell subclass) laid out in a nib. It has a single-line label, a two-line label, and a custom subview. The custom subview itself contains a smaller custom subview. Here's the nib with bounds rectangles off:
Here's the same nib with bounds rectangles on:
Background Color Override
Here's another technique that builds on the idea of setting the background color. This technique requires your deployment target to be iOS 5.0 or later.
As you described, set the background color to make the view visible in the nib:
Then switch to the Identity Inspector and add backgroundColor in the User Defined Runtime Attributes section. Set it to the background color you want the view to have at runtime. For example, if you want it to be white at runtime:
If you want the background color to be clear, you can set backgroundColor to a color with opacity 0, or you can set it to “Nil” instead of any color:
That approach of setting the background color in Interface Builder, but resetting it in code is a simple, but effective technique. Two refinements:
If you have multiple custom views on a single storyboard scene, you can save yourself from having to programmatically clear the background color for all of them individually by using IBOutletCollection. So, in Interface Builder, give them all background colors and then add all of your custom views for a given scene to a collection. You then can set the background color for all of them in a single statement. So, for example, if you have a dozen controls on one scene all in a single IBOutletCollection is named viewsCollection:
#property (strong, nonatomic) IBOutletCollection(UIView) NSArray *viewsCollection;
you can clear the background color of all of them in a single statement:
[self.viewsCollection setValue:[UIColor clearColor] forKey:#"backgroundColor"];
You can also make the identification of your custom views in Interface Builder a little easier by setting the "Label" in the "Document" properties on the "Identity inspector":
Once you've done that, when you look at the document outline in the left side of the main panel, you'll see your labels show up:
Then, using the document outline makes it easier to identify your individual views in the scene. You can use a random label like I did here, or you could use the name of your custom view class, or whatever.

Xcode 4, How to make other buttons fall off the screen after one is pushed.

As an example, I have 5 IBActions declared. When I push one, I want the other 4 to fall down off the screen. Any idea how to do this? Would I define a translation for each other IBAction??
A UIButton is a UIView. You can animate movement of a UIView; that movement can be to a position offscreen. (See the section under "animation" in the UIView class reference: http://developer.apple.com/library/ios/#documentation/uikit/reference/uiview_class/uiview/uiview.html) You might then want to remove the now-invisible buttons from their superview (in which case you'd need to retain them somehow or they might cease to exist), but you don't have to.
You will need a way to refer to the UIButtons. You can use IBOutlets for this, or you can "tag" the buttons in Interface Builder and use -[UIView viewWithTag:] to find the buttons you want to animate.
For a whole lot more on animation, see my book: http://www.apeth.com/iOSBook/ch17.html

Can I disable autolayout for a specific subview at runtime?

I have a view that needs to have its frame manipulated programmatically - it's a kind of document view that wraps to its content which is then scrolled and zoomed around a superview by manipulating the frame origin. Autolayout fights with this at runtime.
Disabling autolayout completely seems a bit harsh because it could reasonably be used to handle layout for the other views. It seems like what I might want is some kind of "null constraint".
I had the same problem. But I have resolved it.
Yes, you can disable auto layout at runtime for a specific UIView, instead of disabling it for the whole xib or storyboard which is set by default in Xcode 4.3 and later.
Set translatesAutoresizingMaskIntoConstraints to YES, before you set the frame of your subview:
self.exampleView.translatesAutoresizingMaskIntoConstraints = YES;
self.exampleView.frame = CGRectMake(20, 20, 50, 50);
I had a similar issue where Autolayout was overriding some of my frame-setting at run time (I had a dynamic view that in some cases pushed a new view controller...pushing and then pressing Back would reset the initial view).
I got around this by putting my manipulation code in viewDidLayoutSubviews of my View Controller. This seems to get called after whatever constraint mojo gets called, but before viewDidAppear, so the user is none the wiser.
Perhaps just setting translatesAutoresizingMaskIntoConstraints to YES (and not adding additional constraints affecting that view) will let you set the frame without fighting the auto layout system.
In iOS 8 you can set an NSLayoutConstraint to be active or not. So if I'm using interface builder, I add all my constraints to an OutletCollection and then activate or deactivate using:
NSLayoutConstraint.deactivateConstraints(self.landscapeConstraintsPad)
NSLayoutConstraint.activateConstraints(self.portraitConstraintsPad)
The particular application I'm using it for here is having different constraints in portrait and landscape mode and I activate/deactivate based on the rotation of the device. It means I can create some complex layout changes all in interface builder for both orientations, and still use auto layout without the verbose auto layout code.
Or you can activate / deactivate using removeConstraints and addConstraints.
I don't know if this will help anyone else, but I wrote a category to make this convenient because I find myself doing this a lot.
UIView+DisableAutolayoutTemporarily.h
#import <UIKit/UIKit.h>
#interface UIView (DisableAutolayoutTemporarily)
// the view as a parameter is a convenience so we don't have to always
// guard against strong-reference cycles
- (void)resizeWithBlock:(void (^)(UIView *view))block;
#end
UIView+DisableAutolayoutTemporarily.m
#import "UIView+DisableAutoResizeTemporarily.h"
#implementation UIView (DisableAutoResizeTemporarily)
- (void)resizeWithBlock:(void (^)(UIView * view))block
{
UIView *superview = self.superview;
[self removeFromSuperview];
[self setTranslatesAutoresizingMaskIntoConstraints:YES];
__weak UIView *weakSelf = self;
block(weakSelf);
[superview addSubview:self];
}
#end
I use it like this:
[cell.argumentLabel resizeWithBlock:^(UIView *view) {
[view setFrame:frame];
}];
Hope it helps.
You can set the translatesAutoresizingMaskIntoConstraints type Boolean, Value Yes in the User Defined Runtime Attributes of the UIView you want in the xib/storyboard.
In my view I had a Label and a Text. The label had pan gesture. The label moves around fine during drag. But when I use the text box keyboard, the label resets its position to the original location defined in auto layout. The issue got resolved when I added the following in swift for the label. I added this in viewWillAppear but it can be added pretty much anywhere you have access to the target field.
self.captionUILabel.translatesAutoresizingMaskIntoConstraints = true
Open project in 4.5
Select storyboard
Open the file inspector
Under Interface Builder Document uncheck 'Use Autolayout'
You can split across multiple storyboards if you want to use autolayout for some views.
For me it worked to create the subview programmatically, in my case the auto layout was messing with a view that I needed to rotate around its center but once I created this view programmatically it worked.
I've encountered a similar scenario, where I joined a project that was initiated with auto-layout, but I needed to make dynamic adjustments to several views. Here is what has worked for me:
Do NOT have views or components laid out in interface builder.
Add your views purely programmatically starting with alloc/init and setting their frames appropriately.
Done.
This happened to me in a project without storyboards or xib files. All 100% code. I had an ad banner at the bottom and wanted the view bounds to stop at the ad banner. The view would resize itself automatically after loading. I tried every resolution on this page but none of them worked.
I ended up just creating a sub view with the shortened height and placed that in into the main view of the controller. Then all my content went inside the sub view. That solved the problem very easily without doing anything that felt like it was going against the grain.
I am thinking if you want a view that is not the normal size that fills the window then you should use a sub view for that.
Instead of disabling autolayout, I would just calculate the new constraint with the frame you are replacing. That appears to me to be the appropriate way. If you are adjusting components that rely on constraints, adjust them accordingly.
For example, if you have a vertical constraint of 0 between two views (myView and otherView), and you have a pan gesture or something that adjusts the height of myView then you can recalculate the constraint with the adjusted values.
self.verticalConstraint.constant = newMyViewYOriginValue - (self.otherView.frame.origin.y + self.otherView.frame.size.height);
[self.myView needsUpdateConstraints];
For those of you who are using auto layout, please check out my solution here. You should be making #IBOutlet's of the constraints you want to adjust and then change their constants.
if it's xib file:
select the .xib file
select the "File's Owner"
show the Utilities
click on: "File Inspector"
Under "Interface Builder Document" disable: "Use Autolayout"

Resources