The difference between the frame, bounds, and center attributes of iOS development UIView (drawings)

Last Update:2015-10-28 Source: Internet

Author: User

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

Blog temporarily think of what to write, not logical, not shun chapter into the Article.First look at a few conceptsCoordinate point poit: the right side is the x-axis positive direction of the value x, the lower side of the origin is the y-axis positive direction of the value ySize: composed of width and height heights, representing a rectangleRegion Rect: It has coordinate points poit and size sizes, representing an area, both position and sizeRelative: there is a reference, because the size of the reference position change and changeAbsolute: no reference, fixed size positionThen look at the code composition:Points are created by this, x-axis size and y size cgpoint point = Cgpointmake (80,40)sizes size is created by this cgsize size = Cgsizemake (144,72) means creating a rectangular view with a width of 144 and a height of 72the Zone rect is created like This: cgrect rect=cgrectmake (10, 10, 120, 100); It represents a view of position at point (10,10) width 120 height 100And then look at the definition description of frame, bounds and Center.Frame: describes the position and size of the current view in its parent viewBounds: describes the position and size of the current view in its own coordinate system.Center: describes the position of the center point of the current view in its parent view.as we can see from the description, the frame and bounds properties both describe the size of the view (cgsize) and the position (cgpoint), both of which are represented by Cgrect. The difference is that the frame describes the CGRect in its parent view, and bounds describes the CGRect in its own view, that is, the coordinates of the two are Different. the center represents the position of the Rectangle's Central Point in its parent view. frame is typically used to set the size and position of the view, and center to change the position of the VIEW. Both frame and center can change position, and if the view is rotated, zooming is also done relative to the Center. Most intuitive we use a graph and code value to describe the three representations:first, Create an empty view, drag and drop three wiew to go in, give different colors, and name them respectively. The code and diagram are as follows<pre>////ViewController.h//nspredicatetest////Created by Xuhongjiang on 15/10/27.//Copyright (c) 2015 xuhongjiang. All Rights Reserved.//#import<UIKit/UIKit.h>@interfaceviewcontroller:uiviewcontroller@property (retain, nonatomic) iboutlet UIView*orangeview, @property (retain, nonatomic) iboutlet UIView*greenview, @property (retain, nonatomic) iboutlet UIView*grayview;@end</pre>Three view, orange view max, with gray view and green view are defined Respectively. Let's take green view to illustrate the Problem.1.framein fact, the size of the gray view is the green view frame size, green views Frame the origin point (the width of the gray view, the height of the gray View) is also the point of the gray view in relation to the lower-right corner of the Orange view, as well as the upper-left corner of the green view relative to the orange VIEW. Frame but size is the width and height of the green view2.boundsThe bounds point of the green view is relative to itself, is (0,0), size is the width and height of the green view, this is easy to understand.3.centerThe horizontal axis of the center of the green view = (green View width width/2) + (green view's. frame.origin.x); ordinate = (green View height height/2) + (green view. frame.origin.y);The following code is after debugging the specific value, careful observation, it is not difficult to find the frame, bounds, Center of the difference between the three or very obvious.<pre>1 //2 //VIEWCONTROLLER.M3 //nspredicatetest4 //5 //Created by Xuhongjiang on 15/10/27.6 //Copyright (c) 2015 xuhongjiang. All Rights Reserved.7 //8 9 #import "ViewController.h"Ten #import "Products.h" one a @interfaceViewcontroller () - - @end the - @implementationViewcontroller - -- (void) Viewdidload { + [super viewdidload]; - [self laytest]; + } a at- (void) didreceivememorywarning { - [super didreceivememorywarning]; - } - --(void) Laytest - { in //The frame of the Orange View Returns a range of CGRect relative to the parent container, consisting of a dot point and size -CGRect orangeframerect=_orangeview.frame;//(cgrect) orangerect = (origin = (x = +, y = 98), size = (width = 289,height = 443)) toCgpoint orangeframepoit=_orangeview.frame.origin;//(cgpoint) orangepoit = (x = +, y = 98) +Cgsize orangeframesize=_orangeview.frame.size;//(cgsize) orangesize = (width = 289, height = 443) - //the Orange View's Bounds returns the position and size in its own coordinates, as well as an area cgrect, which is also made up of point points and size sizes theCGRect orangeboundsrect= _orangeview.bounds;//(cgrect) orangeboundsrect = (origin = (x = 0, y = 0), size = (width = 289, height = 443)) *Cgpoint orangeboudspoit=_orangeview.bounds.origin;//(cgpoint) orangeboudspoit = (x = 0, y = 0) $Cgsize orangeboundssize=_orangeview.bounds.size;//(cgsize) orangeboundssize = (width = 289, height = 443)Panax Notoginseng //center of Orange view it represents the self-centered point relative to the parent container -Cgpoint oranagecenterpoit= _orangeview.center;//(cgpoint) oranagecenterpoit = (x = 187.5, y = 319.5) the + a the //The green view frame is equivalent to the gray view area, which returns an area CGRect relative to the parent container (orange view), consisting of a dot point and size +CGRect greenframerect=_greenview.frame;//(cgrect) greenframerect = (origin = (x = all, y = +), size = (width = 209, height = max)) -Cgpoint greenframepoit=_greenview.frame.origin;//(cgpoint) greenframepoit = (x = +, y = +) $Cgsize greenframesize=_greenview.frame.size;//(cgsize) greenframesize = (width = 209, height = +) $ - //The bounds of the green view returns the position and size in its own coordinates, and is also an area cgrect, which is also made up of points point and size -CGRect greenboundsrect= _greenview.bounds;//(cgrect) greenboundsrect = (origin = (x = 0, y = 0), size = (width = 209, height = +)) theCgpoint greenboudspoit=_greenview.bounds.origin;//(cgpoint) greenboudspoit = (x = 0, y = 0) -Cgsize greenboundssize=_greenview.bounds.size;//(cgsize) greenboundssize = (width = 209, height = +)Wuyi the //center of Green view it represents the self-centered point relative to the parent container (orange view) -Cgpoint greencenterpoit= _greenview.center;//(cgpoint) greencenterpoit = (x = 144.5, y = 192) wu - //The gray view area is equivalent to the green view frame x=width=40 y=height=64 aboutCgsize grayframepoit=_grayview.frame.size;//(cgsize) grayframepoit = (width = max, height = max) $ //Why is it only 20 and 32 points because it is relative to the Green Container's own center point -Cgpoint graycenterpoit= _grayview.center;//(cgpoint) graycenterpoit = (x =, y = +) -}</pre>This article is a personal original, welcome criticism, such as reproduced please indicate the SOURCE.The difference between the frame, bounds, and center attributes of iOS development UIView (drawings)

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

The difference between the frame, bounds, and center attributes of iOS development UIView (drawings)

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support