I'm trying to add visual contraints to my view. In iOS 7 everything works fine but with 8.0 no.
My code
NSDictionary *views = NSDictionaryOfVariableBindings(_view1, _view2);
[self.view removeConstraints:self.view.constraints];
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|-10-[_view1]-10-|" options:0 metrics:nil views:views];
constraints = [constraints arrayByAddingObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-10-[_view2(200.0)]" options:0 metrics:nil views:views]];
constraints = [constraints arrayByAddingObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-50-[_view1(200.0)]-10-[_view2(200)]" options:0 metrics:nil views:views]];
[self.view addConstraints:constraints];
The view1 after apply contraints has 0 width.
I've searched for apple docs but nothing referes that this method is deprecated.
Any ideas?
Related
Hope the title is clear. Trying to have something below
--------------------
| [titleTextView] |
| | |
| [detailsTextView]|
--------------------
With the code that I tried, the container resized, but both titletextView and detailsTextView are placed together (overlapping each others). I know I init both at (16,0) but shouldn't the constrain place them correctly?
I also get the following error: Unable to simultaneously satisfy constraints:
("<NSLayoutConstraint:0x60000008fcd0 NSTextView:0x600000134be0.bottom == NSView:0x600000134c80.bottom + 20>",
"<NSAutoresizingMaskLayoutConstraint:0x608000093ce0 h=--& v=--& V:[NSTextView:0x600000134be0]-(0)-| (Names: '|':NSView:0x600000134c80 )>")
Code:
//title textView
self.titleTextView = [[NSTextView alloc] initWithFrame:NSMakeRect(16, 0, [self.view frame].size.width - 30, 0)];
[self.titleTextView setEditable:NO];
[self.titleTextView setBackgroundColor:[NSColor clearColor]];
[self.titleTextView setString:#"potentially long text."];
[self.titleTextView setHorizontallyResizable:NO];
[self.titleTextView sizeToFit];
//detail textView
self.detailsTextView = [[NSTextView alloc] initWithFrame:NSMakeRect(16, 0, [self.view frame].size.width - 30, 0)];
[self.detailsTextView setEditable:NO];
[self.detailsTextView setBackgroundColor:[NSColor clearColor]];
[self.detailsTextView setString:#"Very long text."];
[self.detailsTextView setHorizontallyResizable:NO];
[self.detailsTextView sizeToFit];
//Adding to self.view
[self.view addSubview: self.titleTextView];
[self.view addSubview: self.detailsTextView];
[self.view addConstraint:
[NSLayoutConstraint constraintWithItem:self.titleTextView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.detailsTextView
attribute:NSLayoutAttributeTop
multiplier:1
constant:20]];
[self.view addConstraint:
[NSLayoutConstraint constraintWithItem:self.titleTextView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1
constant:20]];
[self.view addConstraint:
[NSLayoutConstraint constraintWithItem:self.detailsTextView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1
constant:20]];
When working with autolayout, you don't want to think about the layout in terms of frames at all. The constraints will determine the frame of your views.
Also, if you're creating the layout in code, you have to call setTranslatesAutoresizingMaskIntoConstraints:NO for the views which you want the autolayout engine to apply to.
So, you'd want to do something like:
UIView* titleTextView = [[UIView alloc] init];
[titleTextView setTranslatesAutoresizingMaskIntoConstraints:NO];
UIView* detailsTextView = [[UIView alloc] init];
[detailsTextView setTranslatesAutoresizingMaskIntoConstraints:NO];
...additional setup stuff...
[view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"|-[titleTextView]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(titleTextView)]];
[view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"|-[detailsTextView]-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(detailsTextView)]];
[view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-[titleTextView][detailsTextView]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(titleTextView, detailsTextView)]];
If working in code, I'd strongly recommend checking out the visual format language which will make setting up constraints much more efficient in code, but you can also do the same thing as above using individual constraints.
Forget all you've done earlier with rects and start thinking in relative positions.
Using my favorite category for autolayout:
https://github.com/jrturton/UIView-Autolayout
you can achieve what you want with these simple constraints (which I find MUCH more readable and intuitive than any of the official API solutions):
[self.titleTextView pinToSuperviewEdges:JRTViewPinLeftEdge|JRTViewPinTopEdge inset:20.0];
[self.detailsTextView pinToSuperviewEdges:JRTViewPinLeftEdge inset:20.0];
[self.detailsTextView pinEdge:NSLayoutAttributeTop toEdge:NSLayoutAttributeBottom ofView:self.titleTextView inset:20];
This will pin both textviews 20 pixels from the left, titleTextView 20 pixels from the top and detailsTextView 20 pixels below titleTextView. Also, the category will add the constraints to the correct view in each case.
I have an NSTableView (view-based) that creates a row;
- (NSView *)tableView:(NSTableView *)tableView viewForTableColumn:(NSTableColumn *)tableColumn row:(NSInteger)row {
TaskTableCellView *tableCellView = [[TaskTableCellView alloc] init];
return tableCellView;
}
-(void) tableView:(NSTableView *)tableView didAddRowView:(NSTableRowView *)rowView forRow:(NSInteger)row {
NSView *view = [rowView viewAtColumn:0];
[view setTranslatesAutoresizingMaskIntoConstraints:NO];
NSDictionary *views = NSDictionaryOfVariableBindings(view);
[tableView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[view]|" options:0 metrics:nil views:views]];
[tableView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[view]|" options:0 metrics:nil views:views]];
}
- (CGFloat)tableView:(NSTableView *)tableView heightOfRow:(NSInteger)row {
return 20;
}
This row creates some subviews and assigns some constraints;
- (void)layout {
[super layout];
ViewWithBackground *viewWithBackground = [[ViewWithBackground alloc] init];
viewWithBackground.backgroundColor = [NSColor greenColor];
[self addSubview:viewWithBackground];
[viewWithBackground setTranslatesAutoresizingMaskIntoConstraints:NO];
NSDictionary *views = NSDictionaryOfVariableBindings(viewWithBackground);
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[viewWithBackground]|"
options:0
metrics:nil
views:views]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[viewWithBackground]|"
options:0
metrics:nil
views:views]];
[viewWithBackground setContentHuggingPriority:200 forOrientation:NSLayoutConstraintOrientationVertical];
[viewWithBackground setContentHuggingPriority:200 forOrientation:NSLayoutConstraintOrientationHorizontal];
}
- (void)drawRect:(NSRect)dirtyRect {
[[NSColor redColor] set];
NSRectFill(dirtyRect);
[super drawRect:dirtyRect];
}
The fun starts when I actually try to edit the constraints.. viewWithBackground is just an empty NSView that sets it's background. When the constraint is |[viewWithBackground]| for both horizontal and vertical, I get the expected result -- green rows. When I change it to the most basic |-[viewWithBackground]-|, I get a decidedly unexpected result -- red rows, and no sign of my green view!
Is there some additional step I'm supposed to take here? My goal is to have my viewWithBackground actually be a slightly smaller view, to fake the 'gaps' between rows and the spacing from the edges of the table view..
In case anyone ever stumbles on this.. it turns out that NSTableCellView is a bit wonky without a min size -- adding (>=10) on the Vertical constraint took care of the issue..
I'm wondering how to crop image inside UIscrollView with autolayout
I'm trying to make UIscrollView scroll only horizontally. if image is higher than view height it should be cropped. I've tried a lot properties but can't make all images inside uiscrollview same height as view to avoid scrolling vertically.
Do i miss something?
#import "WelcomeController.h"
#interface WelcomeController ()
#property (strong, nonatomic) UIScrollView *scrollView;
#property (nonatomic,strong) NSArray *contentList;
#end
#implementation WelcomeController
#synthesize contentList =_contentList;
- (void)updateUI
{
UIScrollView* sv = self.scrollView;
id previousLab = nil;
for (UIView *lab in _contentList) {
lab.translatesAutoresizingMaskIntoConstraints = NO;
lab.backgroundColor = [UIColor blackColor];
lab.contentMode = UIViewContentModeScaleAspectFit;
[sv addSubview:lab];
[sv addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[lab]|"
options:0 metrics:nil
views:#{#"lab":lab}]];
if (!previousLab) { // first one, pin to top
[sv addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[lab]"
options:0 metrics:nil
views:#{#"lab":lab}]];
} else { // all others, pin to previous
[sv addConstraints:
[NSLayoutConstraint
constraintsWithVisualFormat:#"H:[prev][lab]"
options:0 metrics:nil
views:#{#"lab":lab, #"prev":previousLab}]];
}
previousLab = lab;
}
// last one, pin to bottom and right, this dictates content size height
[sv addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[lab]|"
options:0 metrics:nil
views:#{#"lab":previousLab}]];
[sv addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"H:[lab]|"
options:0 metrics:nil
views:#{#"lab":previousLab}]];
}
-(void)setContentList:(NSArray *)contentList
{
_contentList = contentList;
[self updateUI];
}
- (void)setupScrollView
{
UIScrollView* sv = [UIScrollView new];
sv.backgroundColor = [UIColor redColor];
sv.translatesAutoresizingMaskIntoConstraints = NO;
sv.pagingEnabled = YES;
sv.showsHorizontalScrollIndicator =NO;
sv.showsVerticalScrollIndicator = NO;
sv.bounces =NO;
[self.view addSubview:sv];
[self.view addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[sv]|"
options:0 metrics:nil
views:#{#"sv":sv}]];
[self.view addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[sv]|"
options:0 metrics:nil
views:#{#"sv":sv}]];
self.scrollView = sv;
}
- (void)viewDidLoad
{
[super viewDidLoad];
[self setupScrollView];
//for testing
UIImageView *image1=[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"welcome1.jpg"]];
UIImageView *image2=[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"welcome2.jpg"]];
UIImageView *image3=[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"welcome3.jpg"]];
self.contentList = [NSArray arrayWithObjects:image1,image2,image3,nil];
}
#end
Have you tried setting the height of the scroll view explicitly?
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:[_sv(123)]" options:0 metrics:nil views:views]];
You would need to replace the height above (123) with the height you need, obviously, as well as views.
Autolayout automatically manages the UIScrollView's contentSize (the scrollable area). So if you stick a subview in there with an intrinsic size that is larger than the height, it will increase the contentSize. I can think of two things:
Stick images in a plain UIView with the same height as the scrollview.
Subclass the UIImageView and override the intrinsicContentSize method to return a fixed height for all images. This seems like a poor solution, though.
I think you should be able to set the image view's frames to a fixed height (via constraints). Then add constraints to have the image views top and bottom fixed with x constant from the scrollview.
This will let the scrollview know its exact content size to use. As long as its frame, then, (determined by whatever constraints you give it in relation to its superview) is >= the image view's fixed heights, it won't scroll vertically.
- (void)applicationDidFinishLaunching:(NSNotification *)aNotification
{
self.rootVC = [[VZMConversationViewController alloc] initWithNibName:#"VZMConversationViewController" bundle:[NSBundle mainBundle]];
[self.window.contentView addSubview:self.rootVC.view];
self.rootVC.view.frame = ((NSView*)self.window.contentView).bounds;
/*
[NSLayoutConstraint constraintWithItem:self.rootVC.view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.window.contentView attribute:NSLayoutAttributeWidth multiplier:1 constant:0];
[NSLayoutConstraint constraintWithItem:self.rootVC.view attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.window.contentView attribute:NSLayoutAttributeHeight multiplier:1 constant:0];
//above 2 lines are not working
*/
}
Hey i am an iPhone developer trying to understand mac development, i have the above code and how to add constraints to first view controllers view so that controllers view resizes with the window. Can this be done in XIB?
- (void)applicationDidFinishLaunching:(NSNotification *)aNotification
{
self.rootVC = [[VZMConversationViewController alloc] initWithNibName:#"VZMConversationViewController" bundle:[NSBundle mainBundle]];
NSView *rootView=self.rootVC.view;
[rootView setTranslatesAutoresizingMaskIntoConstraints:NO];
[[[self window] contentView] addSubview:rootView];
[[[self window] contentView] addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[rootView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(rootView)]];
[[[self window] contentView] addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[rootView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(rootView)]];
}
This fixed the problem
I'm trying to use the new auto layout capability of iOS 6 on a custom UITableViewCell which has been implemented programmatically. I added the addConstraint calls, and it works properly at first-- until I scroll. When I come back to the cell after scrolling the layout is trashed. By trashed I mean the margins between fields are all wrong (too large, well beyond the size of the cell). I'm speculating this has something to do with the dequeueReusableCellWithIdentifier method leaving me with a "dirty" cell, the same way you find yourself needing to reinitialize fields within cells, but I can't seem to do anything to coax it to render properly again. I've tried calling [self.contentView updateConstraints] before returning the cell. I've tried destroying the constraints and recreating them. Not only does it not work, but if it's attempted in layoutSubviews it freezes in an endless loop of some kind. Any ideas?
Here's the code to establish the constraints. It's located in initWithStyle:reuseIdentifier:
[self.completedLabel setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.nextSetHeaderLabel setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.nextSetDetailLabel setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.youWillLearnHeaderLabel setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.youWillLearnDetailLabel setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.contentView removeConstraints:[self.contentView constraints]];
NSDictionary *views = NSDictionaryOfVariableBindings(_completedLabel, _nextSetHeaderLabel, _nextSetDetailLabel, _youWillLearnHeaderLabel, _youWillLearnDetailLabel);
[self.contentView addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-5-[_completedLabel]-5-|"
options:0
metrics:nil
views:views]];
[self.contentView addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-5-[_nextSetHeaderLabel]-5-|"
options:0
metrics:nil
views:views]];
[self.contentView addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-5-[_nextSetDetailLabel]-5-|"
options:0
metrics:nil
views:views]];
[self.contentView addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-5-[_youWillLearnHeaderLabel]-5-|"
options:0
metrics:nil
views:views]];
[self.contentView addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-5-[_youWillLearnDetailLabel]-4-|"
options:0
metrics:nil
views:views]];
[self.contentView addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-5-[_completedLabel]-12-[_nextSetHeaderLabel]-0-[_nextSetDetailLabel]-12-[_youWillLearnHeaderLabel]-0-[_youWillLearnDetailLabel(>=20)]-1-|"
options:0
metrics:nil
views:views]];
I ran into this issue as well. If I wasn't dequeuing cells, everything seemed to work - scrolling, rotation etc. However, if I dequeued cells, then the layout started getting messed up. The only way I could get it to work was by overriding the cell's prepareForReuse method. In this method,
1. remove all the custom subviews
2. remove all constraints associated with those subviews from contentView
3. add subviews and constraints again
-(void) prepareForReuse
{
[self removeCustomSubviewsFromContentView];
[self.contentView removeConstraints:self.constraints] //self.constraits holds all the added constraints
[self setupSubviewsInContentView];
[self addConstraintsToContentView];
}
If there is a better way to do this, I would love to learn as well :) I believe the advantage of dequeing is that the tableView does not have to hold a large number of cells in memory - but, with this method, one has to go through the cost of essentially setting up the cell everytime you dequeue.
I had a similar problem, in case anyone is interested I've found a solution, see this question
What I've done:
- (void)awakeFromNib
{
[super awakeFromNib];
for (NSLayoutConstraint *cellConstraint in self.constraints)
{
[self removeConstraint:cellConstraint];
id firstItem = cellConstraint.firstItem == self ? self.contentView : cellConstraint.firstItem;
id seccondItem = cellConstraint.secondItem == self ? self.contentView : cellConstraint.secondItem;
NSLayoutConstraint* contentViewConstraint = [NSLayoutConstraint constraintWithItem:firstItem
attribute:cellConstraint.firstAttribute
relatedBy:cellConstraint.relation
toItem:seccondItem
attribute:cellConstraint.secondAttribute
multiplier:cellConstraint.multiplier
constant:cellConstraint.constant];
[self.contentView addConstraint:contentViewConstraint];
}
}