It seems that it assumes you're using frames instead of Auto Layout, as you can only really init with a frame. Am I doing this wrong?
You can use autolayout programmatically.
You don't need to initialize the UITableView with a frame. Instead, you have to set translatesAutoresizingMaskIntoConstraints = NO, add the table view to the parent view and then define the constraints in code.
For example:
UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain];
tableView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:tableView];
NSDictionary *views =
NSDictionaryOfVariableBindings(tableView);
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:
#"H:|[tableView]|" options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:
#"V:|[tableView]|" options:0 metrics:nil views:views]];
Please refer to https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/AdoptingAutoLayout/AdoptingAutoLayout.html to know more about the visual format. You can also choose not to use the visual format and describe the constraints programmatically.
Related
I am trying to create a dynamic size NSView using visual auto layout. I am trying to achieve something like the following diagram.
I added following constraints to achieve this.
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"|-15-[_iconImageView(39)]-12-[_textView(239)]-15-|"
options:NSLayoutFormatAlignAllTop metrics:nil views:views]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-15-[_textView]-4-[_mainButton]-5-|"
options: NSLayoutFormatAlignAllLeft metrics:nil views:views]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"[_mainButton]-15-[_secondaryButton]"
options:NSLayoutFormatAlignAllTop metrics:nil views:views]];
But this creates the following layout.
As per my understanding, the following VFL will layout _textView 15px from top and then layout _mainButton after 4px from _textView bottom. But in actual _mainbottom is layout after 4px from top of _textView. Am i missing something here?
#"V:|-15-[_textView]-4-[_mainButton]-5-|"
Update
I replaced NSTextView with NSTextField. But now the problem is, NSTextField does not grow more than a single line height, but NSTextField is multi-line. Complete code for layouting and setting up views is as follow.
-(void)setupView {
_textField = [[NSTextField alloc] initWithFrame:NSZeroRect];
[[_textField cell] setWraps:YES];
[_textField setLineBreakMode:NSLineBreakByWordWrapping];
[[_textField cell] setTitle:#"This is a _textView, This will contain dynamic resizing text."];
[_textField setSelectable:NO];
[_textField setEditable:NO];
[_textField setDelegate:self];
[_textField setBordered:NO];
[_textField sizeToFit];
[_textField setTranslatesAutoresizingMaskIntoConstraints:NO];
[self addSubview:_textField];
_iconImageView = [[NSImageView alloc] initWithFrame:NSZeroRect];
[_iconImageView setImage:[NSImage imageNamed:#"notify-warning-icon"]];
[_iconImageView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self addSubview:_iconImageView];
_mainButton = [[NSButton alloc] init];
_mainButton.translatesAutoresizingMaskIntoConstraints = NO;
[_mainButton setTitle:#"_mainButton"];
[self addSubview:_mainButton];
_secondaryButton = [[NSButton alloc] init];
_secondaryButton.translatesAutoresizingMaskIntoConstraints = NO;
[_secondaryButton setTitle:#"_secondaryButton"];
[self addSubview:_secondaryButton];
NSDictionary *views = NSDictionaryOfVariableBindings(_textField,_iconImageView,_mainButton,_secondaryButton);
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"|-15-[_iconImageView(39)]-12-[_textField(239)]-15-|"
options:NSLayoutFormatAlignAllTop metrics:nil views:views]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-15-[_textField]-4-[_mainButton]-5-|"
options: NSLayoutFormatAlignAllLeft metrics:nil views:views]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"[_mainButton]-15-[_secondaryButton]"
options:NSLayoutFormatAlignAllTop metrics:nil views:views]];
[self addConstraint:[NSLayoutConstraint constraintWithItem:self attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeHeight multiplier:0.f constant:320.f]];
}
But if it changed this
#"V:|-15-[_textField]-4-[_mainButton]-5-|"
with this
#"V:|-15-[_textField(>=40)]-4-[_mainButton]-5-|"
I get the following output
But the problem is textfield content is dynamic and could change at runtime, it could be 2 lines, 3 lines etc. So how could i add some height constraint to NSTextField that will change NSTextField height depending on its content.
You can use a text field rather than a text view and set its preferredMaxLayoutWidth property.
By default, if preferredMaxLayoutWidth is 0, a text field will compute its intrinsic size as though its content were laid out in one long line (or, at least, without any maximum width). Even if you apply a constraint that limits its actual width, that doesn't change its intrinsic height and therefore it typically won't be tall enough to contain the text as wrapped.
If you set preferredMaxLayoutWidth, then the text field will compute its intrinsic size based on the text as wrapped to that width. That includes making its intrinsic height tall enough to fit.
I need a view controller without xib. There should be a webview with fully filled to the view. For that I've added the following code to loadView method.
- (void)loadView {
CGRect applicationFrame = [[UIScreen mainScreen] applicationFrame];
UIView *view = [[UIView alloc] initWithFrame:applicationFrame];
view.translatesAutoresizingMaskIntoConstraints = NO;
[view setBackgroundColor:[UIColor greenColor]];
[self setView:view];
// //create webview
self.webview = [[UIWebView alloc] initWithFrame:CGRectZero];
self.webview.translatesAutoresizingMaskIntoConstraints = NO;
[view addSubview:self.webview];
[self.webview setBackgroundColor:[UIColor orangeColor]];
[self.webview setDelegate:self];
NSDictionary *viewBindings = NSDictionaryOfVariableBindings(view,_webview);
// //add constraints
[view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|[_webview]|" options:0 metrics:nil views:viewBindings]];
[view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|[_webview]|" options:0 metrics:nil views:viewBindings]];
}
But this turns the entire view to black. If I coment [view addConstraints:... method calls its showing a green view. What's wrong with my code?
I believe that the problem is that the parent view should not set translatesAutoresizingMaskIntoConstraints to false. The only view that must set that attribute to false is the one you are applying autolayout to, in this case webView. If you set view.translatesAutoresizingMaskIntoConstraints to false then you have to add constraints to view.
You don't need to change the root view of the UIViewController manually, maybe that's why it does not work.
My suggestion would be to try this out:
- (void) viewDidLoad {
[super viewDidLoad];
self.webview = [[UIWebView alloc] init];
self.webview.translatesAutoresizingMaskIntoConstraints = NO;
[view addSubview:self.webview];
[self.webview setBackgroundColor:[UIColor orangeColor]];
[self.webview setDelegate:self];
NSDictionary *viewBindings = NSDictionaryOfVariableBindings(view,_webview);
[view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-0-[_webview]-0-|" options:0 metrics:nil views:viewBindings]];
[view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-0-[_webview]-0-|" options:0 metrics:nil views:viewBindings]];
// put a breakpoint after this line to see the frame of your UIWebView.
// It should be the same as the view
[self.view layoutIfNeeded];
}
This should work and your UIWebView should be full screen. Good luck!
I want to programmatically generate an overview (UIButton) in the lower left-hand corner.
This is currently being done using Interface Builder. However I need to repeat this for multiple host UIViews. So I decided to write a utility class method to do this.
+ (UIButton *)attachGreenPlusButtonTo:(UIView *)hostView {
NSLog(#"--- {attachGreenPlusButtonTo} ---");
// Green Button --------------------------------------------------------------------
UIImage *greenPlusImage = [UIImage imageNamed:#"btn_plus"];
UIButton *greenButton = [UIButton buttonWithType:UIButtonTypeCustom];
[greenButton setImage:greenPlusImage forState:UIControlStateNormal];
greenButton.tag = 22;
[greenButton setTranslatesAutoresizingMaskIntoConstraints:NO];
[hostView addSubview:greenButton];
// Positioning the Green '+' Button:
// Button is 4 pts from superview right edge:
NSArray *horizontalConstraints =
[NSLayoutConstraint constraintsWithVisualFormat:#"H:[greenButton(==57)]-4-[hostView]"
options:0
metrics:nil
views:NSDictionaryOfVariableBindings(hostView,greenButton)];
[hostView addConstraints:horizontalConstraints];
NSArray *verticalConstraints =
[NSLayoutConstraint constraintsWithVisualFormat: #"V:[greenButton(==57)]-34-[hostView]"
options:0
metrics:nil
views:NSDictionaryOfVariableBindings(hostView,greenButton)];
[hostView addConstraints:verticalConstraints];
[hostView layoutIfNeeded];
return greenButton;
}
I'm getting close, but now the button is being positioned at (-61, -91).
What gives?
Call this after creating the greenButton:
[greenButton setTranslatesAutoresizingMaskIntoConstraints:NO];
otherwise the system will create (unwanted) constraints for you.
Your visual layout doesn't look right either. Use vertical bar | to refer to the superview:
"H:[greenButton(==57)]-4-|"
and
"V:[greenButton]-34-|"
I thought I had a problem using '|' for superview within the method due to a bug which eventually appeared to be due do something else. So...
Upon feedback, I return to the use of '|' as the superview vs the 'hostView':
// Positioning the Green '+' Button:
// Button is 4 pts from superview right edge:
NSArray *horizontalConstraints =
[NSLayoutConstraint constraintsWithVisualFormat:#"H:[greenButton(==57)]-4-|"
options:0
metrics:nil
views:NSDictionaryOfVariableBindings(hostView,greenButton)];
[hostView addConstraints:horizontalConstraints];
NSArray *verticalConstraints =
[NSLayoutConstraint constraintsWithVisualFormat: #"V:[greenButton(==57)]-34-|"
options:0
metrics:nil
views:NSDictionaryOfVariableBindings(hostView,greenButton)];
[hostView addConstraints:verticalConstraints];
[hostView layoutIfNeeded];
This worked.
All appears to be okay now.
I have UITextView inside TableView and I am using UITableViewAutomaticDimension to calculate
Cell Height.
but the problem is once i start typing in UITextView the TableView Start Shaking Up & Down !
below my code in textViewDidChange event:
ImageDescriptionTableViewCell *cell = (ImageDescriptionTableViewCell *)textView.superview.superview ;
NSInteger index = [self.TableViewController indexPathForCell:cell].row;
[self.cellTextArray replaceObjectAtIndex:index withObject:textView.text];
[self.TableViewController beginUpdates];
[self.TableViewController endUpdates];
constraints in Table View Cell :
[self.ImageDetails addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:[flebImageDetails(300#999)]" options:0 metrics:nil views:#{#"ImageDetails":self.ImageDetails}]];
[self.ImageDetails addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:[ImageDetails(>=30)]" options:0 metrics:nil views:#{#"ImageDetails":self.ImageDetails}]];
[self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-[ImageDetails]-|" options:0 metrics:nil views:#{#"ImageDetails":self.ImageDetails}]];
[self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-5-[ImageDetails]-5-|" options:0 metrics:nil views:#{#"ImageDetails":self.ImageDetails}]];
Please help i am with issue from 1 weak ago .
I dont believe you need the beginUpdates and endUpdates in the text change event. These are only required if you are modifying (ie adding, deleting etc) multiple rows and want them animated as a single unit. Updating a text field does not require them.
As far as I know, views displayed by constraints don't got a frame, so what should I do when I want to draw some lines in these views? Methods like moveToPoint do need a CGRect.
Here's my check: NSLog(#"%f,%f,%f,%f",self.contentView.frame.origin.x,self.contentView.frame.origin.y,self.contentView.frame.size.width,self.contentView.frame.size.height);
And the result is 0.000000,0.000000,0.000000,0.000000
For more details, here's my code:
-(void)loadView
{
self.view = [[UIView alloc]init];
self.titleView = [[UIView alloc]init];
self.placesHolder = [[UIView alloc]init];
self.contentView = [[UIView alloc]init];
self.titleView.translatesAutoresizingMaskIntoConstraints = NO;
self.placesHolder.translatesAutoresizingMaskIntoConstraints = NO;
self.contentView.translatesAutoresizingMaskIntoConstraints = NO;
self.titleView.backgroundColor = [UIColor grayColor];
self.placesHolder.backgroundColor = [UIColor blueColor];
self.contentView.backgroundColor = [UIColor redColor];
[self.view addSubview:self.titleView];
[self.view addSubview:self.placesHolder];
[self.view addSubview:self.contentView];
NSDictionary *timeLineViewMap = #{#"titleView":self.titleView,
#"placesHolder":self.placesHolder,
#"contentView":self.contentView
};
NSArray *titleHorizon = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|[titleView]|" options:0 metrics:nil views:timeLineViewMap];
NSArray *placesHolderHorizon = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|[placesHolder(==58)]-0-[contentView]|" options:0 metrics:nil views:timeLineViewMap];
NSArray *titleVertical = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[titleView(==58)]-0-[placesHolder]|" options:0 metrics:nil views:timeLineViewMap];
NSArray *contentViewConstrain = [NSLayoutConstraint constraintsWithVisualFormat:#"V:[titleView]-0-[contentView]|" options:0 metrics:nil views:timeLineViewMap];
[self.view addConstraints:titleHorizon];
[self.view addConstraints:placesHolderHorizon];
[self.view addConstraints:titleVertical];
[self.view addConstraints:contentViewConstrain];
}
Of course UIView does have a frame even with AutoLayout. You just don't set the values manually, AutoLayout is doing that for you. Methods like setFrame: are still called. Simply implement drawRect: like you always did.
Well, problem kind of solved, it seems that a frame of a view don't get a size until it's on the viewDidAppear move. Then I checked some other questions like iOS AutoLayout - get frame size width, which indicate that addConstraints should be put in the viewDidLayoutSubviews method, which is not in the viewController life cycle.