Nslayoutconstraint basics of automatic layout of iOS pages

Last Update:2015-07-02 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

You need to know the following two points before using autolayout:1. Translatesautoresizingmaskintoconstraints must be set to No.2. If the Viewcontrol is autolayout, it is written in [-updateviewconstraints];If it is a view then the AutoLayout Fit is written in [-updateconstraints].first, to explain the method:<pre>1 /*Create Constraints Explicitly. Constraints is of the form "VIEW1.ATTR1 = view2.attr2 * multiplier + constant"2 If your equation does not has a second view and attribute, use nil and Nslayoutattributenotanattribute.3 */4+ (instancetype) Constraintwithitem: (ID) View15 attribute: (nslayoutattribute) attr16 relatedby: (nslayoutrelation) Relation7Toitem: (ID) View28 attribute: (nslayoutattribute) attr29 multiplier: (cgfloat) MultiplierTenConstant: (cgfloat) c;</pre>Parameter description:First parameter view1: the view to be set;The second parameter attr1:view1 the property to be set, which is explained later;The third parameter relation: the relationship between the specified properties of the view View1 and view2, as explained later;The fourth parameter view2: the referenced view;The fifth parameter attr2: refer to the properties of the view view2, explained later;The sixth parameter multiplier: the specified property of the view View1 is the number of times the property is view2 by the reference view;The seventh parameter C: The specified property of the view View1 the floating-point number to add.According to the explanation of the parameters, the calculation formula is as Follows:VIEW1.ATTR1 [=, >=, <=] view2.attr2 * multiplier + c;Detailed Parameters:1, Nslayoutattribute<pre>1 typedef ns_enum (nsinteger, Nslayoutattribute) {2Nslayoutattributeleft =1, 3 nslayoutattributeright,4 nslayoutattributetop,5 nslayoutattributebottom,6 nslayoutattributeleading,7 nslayoutattributetrailing,8 nslayoutattributewidth,9 nslayoutattributeheight,Ten nslayoutattributecenterx, one nslayoutattributecentery, a nslayoutattributebaseline, -Nslayoutattributelastbaseline =nslayoutattributebaseline, - nslayoutattributefirstbaseline Ns_enum_available_ios (8_0), the - - nslayoutattributeleftmargin Ns_enum_available_ios (8_0), - nslayoutattributerightmargin Ns_enum_available_ios (8_0), + nslayoutattributetopmargin Ns_enum_available_ios (8_0), - nslayoutattributebottommargin Ns_enum_available_ios (8_0), + nslayoutattributeleadingmargin Ns_enum_available_ios (8_0), a nslayoutattributetrailingmargin Ns_enum_available_ios (8_0), at nslayoutattributecenterxwithinmargins Ns_enum_available_ios (8_0), - nslayoutattributecenterywithinmargins Ns_enum_available_ios (8_0), - -Nslayoutattributenotanattribute =0 -};</pre>Explain Nslayoutattribute in three parts The first part: commonnslayoutattributeleft: Cgrectgetminx (view.frame) ;Nslayoutattributeright: Cgrectgetmaxx (view.frame);Nslayoutattributetop: cgrectgetminy (view.frame);nslayoutattributebottom: cgrectgetminy (view.frame);Nslayoutattributewidth: cgrectgetwidth (view.frame) ;Nslayoutattributeheight:cgrectgetheight (view.frame);Nslayoutattribute CenterX : view.center.x; Nslayoutattributecentery: view.center.y ; nslayoutattributebaseline: text Bottom line, which is equivalent to Nslayoutattributebottom in most views; in a few views, such as uilabel, refers to the position at the bottom of the letter ;Nslayoutattributelastbaseline: equivalent to Nslayoutattributebaseline;Nslayoutattributefirstbaseline: text on the marking ;Nslayoutattributenotanattribute:none; Part two: different meanings according to the National usage habitsNslayoutattributeleading: in the customary left-to-right area, the equivalent of nslayoutattributeleft, in the habit from right to left to see the area, equivalent to Nslayoutattributeright;NslayoutattributeTrailing: in the customary left-to-right area, the equivalent of nslayoutattributeright, in the habit from right to left to see the area, equivalent to Nslayoutattributeleft; Part Iii: iOS8 new properties, various spacing, specific usage the following section describesnslayoutattributeleftmargin, nslayoutattributerightmargin, nslayoutattributetopmargin, nslayoutattributebottommargin, nslayoutattributeleadingmargin, nslayoutattributetrailingmargin, nslayoutattributecenterxwithinmargins, nslayoutattributecenterywithinmargins, From the Internet to find a picture, mark the above attributes2,nslayoutrelation<pre><pre>1 typedef ns_enum (nsinteger, Nslayoutrelation) {2 Nslayoutrelationlessthanorequal =-1,3 0,4 1 , 5 };</pre></pre>nslayoutrelationlessthanorequal: <=;Nslayoutrelationequal: =;Nslayoutrelationgreaterthanorequal: >=;second, the method to be explained1. Get all of the current view Nslayoutconstraint<pre><pre>1 -(nsarray *) constraints Ns_available_ios (6_0);</pre></pre>2, the old method, add the specified nslayoutconstraint to the page or remove from the page<pre>1 1- (void) addconstraint: (nslayoutconstraint *) constraint Ns_available_ios (6_0);//this method is deprecated in a future release and should is Avoided. Instead, set Nslayoutconstraint ' s active property to YES.2 2- (void) addconstraints: (nsarray *) constraints Ns_available_ios (6_0);//this method is deprecated in a future release and should is Avoided. Instead Use +[nslayoutconstraint activateconstraints:].3 3- (void) removeconstraint: (nslayoutconstraint *) constraint Ns_available_ios (6_0);//this method is deprecated in a future release and should is Avoided. Instead set Nslayoutconstraint ' s active property to NO.4 4- (void) removeconstraints: (nsarray *) constraints Ns_available_ios (6_0);//this method is deprecated in a future release and should is Avoided. Instead Use +[nslayoutconstraint deactivateconstraints:].</pre>3, iOS8 new Add method, Activate or deactivate the specified constraint<pre>1 /*the receiver is activated or deactivated by manipulating. Only active constraints affect the calculated Layout. Attempting to activate a constraint whose items has no common ancestor would cause an exception to be thrown. Defaults to NO for newly created Constraints. */2@property (getter=IsActive) BOOL Active ns_available (10_10, 8_0);3 4 /*convenience method that activates each constraint in the contained array, in the same manner as setting Active=yes. T His was often more efficient than activating constraint individually. */5+ (void) Activateconstraints: (nsarray *) Constraints ns_available (10_10, 8_0);6 7 /*convenience method that deactivates each constraint in the contained array, in the same manner as setting active=no. This is often more efficient than deactivating each constraint individually. */8+ (void) deactivateconstraints: (nsarray *) constraints ns_available (10_10, 8_0);</pre>three, Coding TimeA> Setting the view View1 a square with a width of =20Two ways of writing, the first width = 20, height =20<pre><pre>1 [self addconstraint:[nslayoutconstraint constraintwithitem:view1 attribute:nslayoutattributewidth relatedBy: Nslayoutrelationequal toitem:nil attribute:nslayoutattributenotanattribute multiplier:1.0 constant:20 ]]; 2 [self addconstraint:[nslayoutconstraint constraintwithitem:view1 attribute:nslayoutattributeheight relatedBy: Nslayoutrelationequal toitem:nil attribute:nslayoutattributenotanattribute multiplier:1.0 constant:20 ]];</pre></pre>Second width = 20, height = width<pre><pre>1 [self addconstraint:[nslayoutconstraint constraintwithitem:view1 attribute:nslayoutattributewidth relatedBy: Nslayoutrelationequal toitem:nil attribute:nslayoutattributenotanattribute multiplier:1.0 constant:20 ]]; 2 [self addconstraint:[nslayoutconstraint constraintwithitem:view1 attribute:nslayoutattributeheight relatedBy: Nslayoutrelationequal toitem:view1 attribute:nslayoutattributewidth multiplier:1.0 constant:0];</pre></pre>The advantage of the second approach is that if you want to modify the size of the view1, you only need to modify one place.b> Set the view View1.frame. origin.x = view view2.frame.origin.x<pre><pre>Nslayoutconstraint *leftconstraint = [nslayoutconstraint constraintwithitem:view1 attribute:NSLayoutAttributeLeft Relatedby:nslayoutrelationequal toitem:view2 attribute:nslayoutattributeleft multiplier:1.0 constant: 0];// Legacy method //[self addconstraint:leftconstraint]; // New Method 1 // New Method 2leftconstraint.active = YES;</pre></pre>Nslayoutconstraint basics of automatic layout of iOS pages

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Nslayoutconstraint basics of automatic layout of iOS pages

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support