layout of ios for beginner

introduce of Masonry and some points need to aware when using

Transcript

1. layout of iOS for beginner…
2. storyboard autolayout
3. NSLayoutConstraint
6. 2014-08-10 23:48:07.293 autolayoutTest[952:60b] Cannot find executable for CFBundle 0x8e4f910 </Applications/Xcode.app/Contents/Developer/ Platforms/iPhoneSimulator.platform/Developer/SDKs/ iPhoneSimulator7.1.sdk/System/Library/AccessibilityBundles/ CertUIFramework.axbundle> (not loaded) 2014-08-10 23:48:07.341 autolayoutTest[952:60b] ( "<NSIBPrototypingLayoutConstraint:0x8d63ed0 'IB auto generated at build time for view with fixed frame' H:|-(139)-[UILabel:0x8d68d00] (LTR) (Names: '|':UIView:0x8d47260 )>", "<NSIBPrototypingLayoutConstraint:0x8d69250 'IB auto generated at build time for view with fixed frame' V:|-(255)-[UILabel:0x8d68d00] (Names: '|':UIView:0x8d47260 )>", "<NSIBPrototypingLayoutConstraint:0x8d69300 'IB auto generated at build time for view with fixed frame' H:[UILabel:0x8d68d00(42)]>", "<NSIBPrototypingLayoutConstraint:0x8d69330 'IB auto generated at build time for view with fixed frame' V:[UILabel:0x8d68d00(21)]>", "<_UILayoutSupportConstraint:0x8d684c0 V:[_UILayoutGuide: 0x8d49d60(0)]>", "<_UILayoutSupportConstraint:0x8d65880 V:|-(0)-[_UILayoutGuide: 0x8d49d60] (Names: '|':UIView:0x8d47260 )>", "<_UILayoutSupportConstraint:0x8d68120 V:[_UILayoutGuide: 0x8d4b5d0(0)]>", "<_UILayoutSupportConstraint:0x8d639f0 _UILayoutGuide: 0x8d4b5d0.bottom == UIView:0x8d47260.bottom>" )
7. UIView *superview = self; ! UIView *view1 = [[UIView alloc] init]; view1.translatesAutoresizingMaskIntoConstraints = NO; view1.backgroundColor = [UIColor greenColor]; [superview addSubview:view1]; ! UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10); ! [superview addConstraints:@[ ! //view1 constraints [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeTop multiplier:1.0 constant:padding.top], ! [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeLeft multiplier:1.0 constant:padding.left], ! [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-padding.bottom], ! [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:superview attribute:NSLayoutAttributeRight multiplier:1 constant:-padding.right], ! ]];
8. Visual Format rview Constraint constraintsWithVisualFormat:@"|[headerView]|" options:0 metrics:metrics views:views]]; f the superview Constraint constraintsWithVisualFormat:@"V:|[headerView]" options:0 metrics:metrics views:views]]; out outConstraint constraintsWithVisualFormat:@"|-padding-[headline]-padding-[imageView(imageEdge)]- ews:views]]; - spacing at least zero between the two outConstraint constraintsWithVisualFormat:@"V:|-padding-[headline]->=0-[byline]-padding-|" etrics:metrics views:views]]; spacing at least 15 between the two outConstraint constraintsWithVisualFormat:@"V:|-padding-[imageView(imageEdge)]->=padding-[button]- gnAllLeft | NSLayoutFormatAlignAllRight metrics:metrics views:views]];
9. asos
10. https://github.com/Masonry/Masonry
11. UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10); ! [view1 mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler make.left.equalTo(superview.mas_left).with.offset(padding.left); make.bottom.equalTo(superview.mas_bottom).with.offset(- padding.bottom); make.right.equalTo(superview.mas_right).with.offset(-padding.right); }];
13. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) ( "<NSIBPrototypingLayoutConstraint:0x8c76860 UILabel: 0x8ca5c70.top == UIView:0x8c51d50.top + 255>", "<NSIBPrototypingLayoutConstraint:0x8c56ed0 UILabel: 0x8ca5c70.height == 21>", "<MASLayoutConstraint:0x8d841a0 UILabel: 0x8ca5c70.centerY == UIView:0x8c51d50.centerY>", "<NSAutoresizingMaskLayoutConstraint:0x8d84ad0 UIView: 0x8c51d50.height == 480>" )
15. use code to generate the view
16. [self.slider makeConstraints:^(MASConstraintMaker *make) { make.centerX.equalTo(self.centerX); make.bottom.equalTo(self.bottom).multipliedBy(110.0 / 120); make.width.equalTo(self.width).multipliedBy(150.0 / 300); make.height.equalTo(self.height).multipliedBy(25.0 / 120); }];
17. translatesAutoresizingMaskIntoConstraints = NO too many subviews Possible error
18. viewDidAppear
20. Font size adjustsfontsizetofitwidth [label.text sizeWithFont:label.font minFontSize:label.minimumFontSize actualFontSize:&actualFontSize forWidth:label.bounds.size.width lineBreakMode:label.lineBreakMode]; if don’t want the font size always change due to length of char sizeToFit
21. Thanks Edwin