美文网首页
视图UIView的frame、bounds与center属性

视图UIView的frame、bounds与center属性

作者: ai___believe | 来源:发表于2017-11-29 14:57 被阅读34次

http://blog.csdn.net/pucker/article/details/7634479

UIView类中定义了三个属性,分别是frame、bounds与center属性:

[objc]

view plain

copy

<embed id="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="17" height="16" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=17&height=16" wmode="transparent" style="box-sizing: border-box;">

  1. @property

    (

    nonatomic

    ) CGRect frame;

  2. @property

    (

    nonatomic

    ) CGRect bounds;

  3. @property

    (

    nonatomic

    ) CGPoint center;

在详细介绍这三个属性之前,我们应该知道UIKit中的坐标系X轴正方向为水平向右,Y轴正方向为竖直向下。

frame属性指的是视图在其父视图坐标系中的位置与尺寸。在创建视图时,我们就需要在初始化方法中指定视图的frame:

[objc]

view plain

copy

<embed id="ZeroClipboardMovie_2" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="17" height="16" name="ZeroClipboardMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&width=17&height=16" wmode="transparent" style="box-sizing: border-box;">

    • (

    id

    )initWithFrame:(CGRect)frame;

这样创建了视图之后,通过addSubview:方法就可以将创建的子视图放置在父视图的指定位置,并以指定的尺寸显示出来。

center属性理解起来也很简单,它就是视图的中心点在其父视图坐标系中的位置坐标。简单讲,center属性就定义了当前视图在父视图中的位置。

那么bounds属性呢?它指的是视图在其自己的坐标系中的位置与尺寸。

[objc]

view plain

copy

<embed id="ZeroClipboardMovie_3" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="17" height="16" name="ZeroClipboardMovie_3" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=3&width=17&height=16" wmode="transparent" style="box-sizing: border-box;">

    • (

    BOOL

    )application:(

    UIApplication

    *)application

    didFinishLaunchingWithOptions

    :(

    NSDictionary

    *)launchOptions

  1. {

  2. self

    .window

    = [[UIWindow

    alloc

    ]

    initWithFrame

    :[[UIScreen

    mainScreen

    ]

    bounds

    ]];

  3. // Override point for customization after application launch.

  4. self

    .window

    .backgroundColor

    = [UIColor

    whiteColor

    ];

  5. UIView* testView = [[UIView

    alloc

    ]

    initWithFrame

    :CGRectMake(

    5

    0

    ,

    5

    0

    ,

    1

    0

    0

    ,

    1

    0

    0

    )];

  6. testView

    .backgroundColor

    = [UIColor

    redColor

    ];

  7. [

    self

    .window

    addSubview

    :testView];

  8. NSLog(

@"Frame: (%.2f, %.2f, %.2f, %.2f)"

, testView

.frame

.origin

.x

, testView

.frame

.origin

.y

, testView

.frame

.size

.width

, testView

.frame

.size

.height

);
  1. NSLog(
@"Bounds: (%.2f, %.2f, %.2f, %.2f)"

, testView

.bounds

.origin

.x

, testView

.bounds

.origin

.y

, testView

.bounds

.size

.width

, testView

.bounds

.size

.height

);
  1. NSLog(
@"Center: (%.2f, %.2f)"

, testView

.center

.x

, testView

.center

.y

);
  1. [
self

.window

 makeKeyAndVisible

];
  1. return
YES

;
  1. }

输出:

[objc]

view plain

copy

<embed id="ZeroClipboardMovie_4" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="17" height="16" name="ZeroClipboardMovie_4" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=4&width=17&height=16" wmode="transparent" style="box-sizing: border-box;">

  1. Frame: (

    5

    0

    .00

    ,

    5

    0

    .00

    ,

    1

    0

    0

    .00

    ,

    1

    0

    0

    .00

    )

  2. Bounds: (

    0

    .00

    ,

    0

    .00

    ,

    1

    0

    0

    .00

    ,

    1

    0

    0

    .00

    )

  3. Center: (

    1

    0

    0

    .00

    ,

    1

    0

    0

    .00

    )

运行界面:

image

图1

由于视图的定位一定需要针对父视图,而不是针对自己,所以bounds属性并不能够决定当前视图的位置(因为它与父视图根本无关,就谈不上定位),所以bounds属性与center属性是完全独立的,前者规定尺寸,后者定义位置。换句话说,修改bounds不影响center;修改center不影响bounds。(《iOS应用程序开发方法与实践》中讲到当修改bounds时center会更改,这是一个错误。特附此文。)

默认情况下,当视图创建后,其自己的坐标系原点(0, 0)位于其左上角位置。不过,本地原点位置是会随时发生变化的。例如将bounds由最初的(0, 0, 100, 100)修改为(50, 50, 100, 100),则意味着本地原点向左向上移动了50。由于位置和尺寸都未发生变化,所以frame属性与center属性不变。在[self.window makeKeyAndVisible];语句之前加入下面的代码:

[objc]

view plain

copy

<embed id="ZeroClipboardMovie_5" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="17" height="16" name="ZeroClipboardMovie_5" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=5&width=17&height=16" wmode="transparent" style="box-sizing: border-box;">

  1. NSLog(

    @"Modify Bounds to (50, 50, 100, 100)"

    );

  2. testView

    .bounds

    = CGRectMake(

    5

    0

    ,

    5

    0

    ,

    1

    0

    0

    ,

    1

    0

    0

    );

  3. NSLog(

    @"Frame: (%.2f, %.2f, %.2f, %.2f)"

    , testView

    .frame

    .origin

    .x

    , testView

    .frame

    .origin

    .y

    , testView

    .frame

    .size

    .width

    , testView

    .frame

    .size

    .height

    );

  4. NSLog(

    @"Bounds: (%.2f, %.2f, %.2f, %.2f)"

    , testView

    .bounds

    .origin

    .x

    , testView

    .bounds

    .origin

    .y

    , testView

    .bounds

    .size

    .width

    , testView

    .bounds

    .size

    .height

    );

  5. NSLog(

    @"Center: (%.2f, %.2f)"

    , testView

    .center

    .x

    , testView

    .center

    .y

    );

输出:

[objc]

view plain

copy

<embed id="ZeroClipboardMovie_6" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="17" height="16" name="ZeroClipboardMovie_6" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=6&width=17&height=16" wmode="transparent" style="box-sizing: border-box;">

  1. Modify Bounds to (

    5

    0

    ,

    5

    0

    ,

    1

    0

    0

    ,

    1

    0

    0

    )

  2. Frame: (

    5

    0

    .00

    ,

    5

    0

    .00

    ,

    1

    0

    0

    .00

    ,

    1

    0

    0

    .00

    )

  3. Bounds: (

    5

    0

    .00

    ,

    5

    0

    .00

    ,

    1

    0

    0

    .00

    ,

    1

    0

    0

    .00

    )

  4. Center: (

    1

    0

    0

    .00

    ,

    1

    0

    0

    .00

    )

运行界面依然是图1。

再例如将bounds由最初的(0, 0, 100, 100)修改为(0, 0, 140, 140),则本地原点向左向上移动20。frame属性变为(30, 30, 140, 140),center属性不变,仍然是(100, 100)。

[objc]

view plain

copy

<embed id="ZeroClipboardMovie_7" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="17" height="16" name="ZeroClipboardMovie_7" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=7&width=17&height=16" wmode="transparent" style="box-sizing: border-box;">

  1. NSLog(

    @"Modify Bounds to (0, 0, 140, 140)"

    );

  2. testView

    .bounds

    = CGRectMake(

    0

    ,

    0

    ,

    1

    4

    0

    ,

    1

    4

    0

    );

  3. NSLog(

    @"Frame: (%.2f, %.2f, %.2f, %.2f)"

    , testView

    .frame

    .origin

    .x

    , testView

    .frame

    .origin

    .y

    , testView

    .frame

    .size

    .width

    , testView

    .frame

    .size

    .height

    );

  4. NSLog(

    @"Bounds: (%.2f, %.2f, %.2f, %.2f)"

    , testView

    .bounds

    .origin

    .x

    , testView

    .bounds

    .origin

    .y

    , testView

    .bounds

    .size

    .width

    , testView

    .bounds

    .size

    .height

    );

  5. NSLog(

    @"Center: (%.2f, %.2f)"

    , testView

    .center

    .x

    , testView

    .center

    .y

    );

输出:

[plain]

view plain

copy

<embed id="ZeroClipboardMovie_8" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="17" height="16" name="ZeroClipboardMovie_8" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=8&width=17&height=16" wmode="transparent" style="box-sizing: border-box;">

  1. Modify Bounds to (0, 0, 140, 140)

  2. Frame: (30.00, 30.00, 140.00, 140.00)

  3. Bounds: (0.00, 0.00, 140.00, 140.00)

  4. Center: (100.00, 100.00)

运行界面:

image

图2

现在我们把testView改回为最初的状态,并在其中添加一个子视图greenView。

[objc]

view plain

copy

<embed id="ZeroClipboardMovie_9" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="17" height="16" name="ZeroClipboardMovie_9" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=9&width=17&height=16" wmode="transparent" style="box-sizing: border-box;">

    • (

    BOOL

    )application:(

    UIApplication

    *)application

    didFinishLaunchingWithOptions

    :(

    NSDictionary

    *)launchOptions

  1. {

  2. self

    .window

    = [[UIWindow

    alloc

    ]

    initWithFrame

    :[[UIScreen

    mainScreen

    ]

    bounds

    ]];

  3. // Override point for customization after application launch.

  4. self

    .window

    .backgroundColor

    = [UIColor

    whiteColor

    ];

  5. UIView* testView = [[UIView

    alloc

    ]

    initWithFrame

    :CGRectMake(

    5

    0

    ,

    5

    0

    ,

    1

    0

    0

    ,

    1

    0

    0

    )];

  6. testView

    .backgroundColor

    = [UIColor

    redColor

    ];

  7. [

    self

    .window

    addSubview

    :testView];

  8. UIView* greenView = [[UIView

    alloc

]

 initWithFrame

:CGRectMake(

3

0

, 

3

0

, 

8

0

, 

8

0

)];
  1. greenView
.backgroundColor

 = [UIColor

 greenColor

];
  1. [testView

    addSubview

:greenView];
  1. NSLog(
@"testView Frame: (%.2f, %.2f, %.2f, %.2f)"

, testView

.frame

.origin

.x

, testView

.frame

.origin

.y

, testView

.frame

.size

.width

, testView

.frame

.size

.height

);
  1. NSLog(
@"testView Bounds: (%.2f, %.2f, %.2f, %.2f)"

, testView

.bounds

.origin

.x

, testView

.bounds

.origin

.y

, testView

.bounds

.size

.width

, testView

.bounds

.size

.height

);
  1. NSLog(
@"testView Center: (%.2f, %.2f)"

, testView

.center

.x

, testView

.center

.y

);
  1. NSLog(
@"greenView Frame: (%.2f, %.2f, %.2f, %.2f)"

, greenView

.frame

.origin

.x

, greenView

.frame

.origin

.y

, greenView

.frame

.size

.width

, greenView

.frame

.size

.height

);
  1. NSLog(
@"greenView Bounds: (%.2f, %.2f, %.2f, %.2f)"

, greenView

.bounds

.origin

.x

, greenView

.bounds

.origin

.y

, greenView

.bounds

.size

.width

, greenView

.bounds

.size

.height

);
  1. NSLog(
@"greenView Center: (%.2f, %.2f)"

, greenView

.center

.x

, greenView

.center

.y

);
  1. [
self

.window

 makeKeyAndVisible

];
  1. return
YES

;
  1. }

输出:

[plain]

view plain

copy

<embed id="ZeroClipboardMovie_10" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="17" height="16" name="ZeroClipboardMovie_10" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=10&width=17&height=16" wmode="transparent" style="box-sizing: border-box;">

  1. testView Frame: (50.00, 50.00, 100.00, 100.00)

  2. testView Bounds: (0.00, 0.00, 100.00, 100.00)

  3. testView Center: (100.00, 100.00)

  4. greenView Frame: (30.00, 30.00, 80.00, 80.00)

  5. greenView Bounds: (0.00, 0.00, 80.00, 80.00)

  6. greenView Center: (70.00, 70.00)

界面:

image

图3

然后在[self.window makeKeyAndVisible];语句之前加入下面的代码,将testView的bounds改为(50, 50, 100, 100):

[objc]

view plain

copy

<embed id="ZeroClipboardMovie_11" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="17" height="16" name="ZeroClipboardMovie_11" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=11&width=17&height=16" wmode="transparent" style="box-sizing: border-box;">

  1. NSLog(

    @"Modify testView Bounds to (50, 50, 100, 100)"

    );

  2. testView

    .bounds

    = CGRectMake(

    5

    0

    ,

    5

    0

    ,

    1

    0

    0

    ,

    1

    0

    0

    );

  3. NSLog(

    @"testView Frame: (%.2f, %.2f, %.2f, %.2f)"

    , testView

    .frame

    .origin

    .x

    , testView

    .frame

    .origin

    .y

    , testView

    .frame

    .size

    .width

    , testView

    .frame

    .size

    .height

    );

  4. NSLog(

    @"testView Bounds: (%.2f, %.2f, %.2f, %.2f)"

    , testView

    .bounds

    .origin

    .x

    , testView

    .bounds

    .origin

    .y

    , testView

    .bounds

    .size

    .width

    , testView

    .bounds

    .size

    .height

    );

  5. NSLog(

    @"testView Center: (%.2f, %.2f)"

    , testView

    .center

    .x

    , testView

    .center

    .y

    );

  6. NSLog(

    @"greenView Frame: (%.2f, %.2f, %.2f, %.2f)"

    , greenView

    .frame

    .origin

    .x

    , greenView

    .frame

    .origin

    .y

    , greenView

    .frame

    .size

    .width

    , greenView

    .frame

    .size

    .height

    );

  7. NSLog(

    @"greenView Bounds: (%.2f, %.2f, %.2f, %.2f)"

    , greenView

    .bounds

    .origin

    .x

    , greenView

    .bounds

    .origin

    .y

    , greenView

    .bounds

    .size

    .width

    , greenView

    .bounds

    .size

    .height

    );

  8. NSLog(

    @"greenView Center: (%.2f, %.2f)"

    , greenView

    .center

    .x

    , greenView

    .center

    .y

    );

输出:

[plain]

view plain

copy

<embed id="ZeroClipboardMovie_12" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="17" height="16" name="ZeroClipboardMovie_12" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=12&width=17&height=16" wmode="transparent" style="box-sizing: border-box;">

  1. testView Frame: (50.00, 50.00, 100.00, 100.00)

  2. testView Bounds: (0.00, 0.00, 100.00, 100.00)

  3. testView Center: (100.00, 100.00)

  4. greenView Frame: (30.00, 30.00, 80.00, 80.00)

  5. greenView Bounds: (0.00, 0.00, 80.00, 80.00)

  6. greenView Center: (70.00, 70.00)

  7. Modify testView Bounds to (50, 50, 100, 100)

  8. testView Frame: (50.00, 50.00, 100.00, 100.00)

  9. testView Bounds: (50.00, 50.00, 100.00, 100.00)

  10. testView Center: (100.00, 100.00)

  11. greenView Frame: (30.00, 30.00, 80.00, 80.00)

  12. greenView Bounds: (0.00, 0.00, 80.00, 80.00)

  13. greenView Center: (70.00, 70.00)

界面:

image

图4

由于testView自己坐标的原点被移动到了屏幕的左上角位置,所以greenView在界面上的位置也相应发生了变化。所以,当修改了视图自身的原点位置时,不会影响其自身的位置,而会影响到其子视图的位置。

相关文章

网友评论

      本文标题:视图UIView的frame、bounds与center属性

      本文链接:https://www.haomeiwen.com/subject/xynubxtx.html