课程表

iOS课程

工具箱
速查手册

自动布局

当前位置:免费教程 » 移动开发 » iOS

简介

自动布局在iOS 6.0中引入,仅可以支持IOS6.0 及 更高版本。它可以帮助我们创建用于多个种设备的界面。

实例步骤

1.创建一个简单的 View based application

2.修改 ViewController.m 的文件内容,如下所示

  1. #import "ViewController.h"
  2. @interface ViewController ()
  3. @property (nonatomic, strong) UIButton *leftButton;
  4. @property (nonatomic, strong) UIButton *rightButton;
  5. @property (nonatomic, strong) UITextField *textfield;
  6.  
  7. @end
  8. @implementation ViewController
  9.  
  10. - (void)viewDidLoad{
  11. [super viewDidLoad];
  12. UIView *superview = self.view;
  13. /*1. Create leftButton and add to our view*/
  14. self.leftButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
  15. self.leftButton.translatesAutoresizingMaskIntoConstraints = NO;
  16. [self.leftButton setTitle:@"LeftButton" forState:UIControlStateNormal];
  17. [self.view addSubview:self.leftButton];
  18. /* 2. Constraint to position LeftButton's X*/
  19. NSLayoutConstraint *leftButtonXConstraint = [NSLayoutConstraint
  20. constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterX
  21. relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
  22. NSLayoutAttributeCenterX multiplier:1.0 constant:-60.0f];
  23. /* 3. Constraint to position LeftButton's Y*/
  24. NSLayoutConstraint *leftButtonYConstraint = [NSLayoutConstraint
  25. constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterY
  26. relatedBy:NSLayoutRelationEqual toItem:superview attribute:
  27. NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f];
  28. /* 4. Add the constraints to button's superview*/
  29. [superview addConstraints:@[ leftButtonXConstraint,
  30. leftButtonYConstraint]];
  31. /*5. Create rightButton and add to our view*/
  32. self.rightButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
  33. self.rightButton.translatesAutoresizingMaskIntoConstraints = NO;
  34. [self.rightButton setTitle:@"RightButton" forState:UIControlStateNormal];
  35. [self.view addSubview:self.rightButton];
  36. /*6. Constraint to position RightButton's X*/
  37. NSLayoutConstraint *rightButtonXConstraint = [NSLayoutConstraint
  38. constraintWithItem:self.rightButton attribute:NSLayoutAttributeCenterX
  39. relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
  40. NSLayoutAttributeCenterX multiplier:1.0 constant:60.0f];
  41. /*7. Constraint to position RightButton's Y*/
  42. rightButtonXConstraint.priority = UILayoutPriorityDefaultHigh;
  43. NSLayoutConstraint *centerYMyConstraint = [NSLayoutConstraint
  44. constraintWithItem:self.rightButton attribute:NSLayoutAttributeCenterY
  45. relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
  46. NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f];
  47. [superview addConstraints:@[centerYMyConstraint,
  48. rightButtonXConstraint]];
  49. //8. Add Text field
  50. self.textfield = [[UITextField alloc]initWithFrame:
  51. CGRectMake(0, 100, 100, 30)];
  52. self.textfield.borderStyle = UITextBorderStyleRoundedRect;
  53. self.textfield.translatesAutoresizingMaskIntoConstraints = NO;
  54. [self.view addSubview:self.textfield];
  55. //9. Text field Constraints
  56. NSLayoutConstraint *textFieldTopConstraint = [NSLayoutConstraint
  57. constraintWithItem:self.textfield attribute:NSLayoutAttributeTop
  58. relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview
  59. attribute:NSLayoutAttributeTop multiplier:1.0 constant:60.0f];
  60. NSLayoutConstraint *textFieldBottomConstraint = [NSLayoutConstraint
  61. constraintWithItem:self.textfield attribute:NSLayoutAttributeTop
  62. relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:self.rightButton
  63. attribute:NSLayoutAttributeTop multiplier:0.8 constant:-60.0f];
  64. NSLayoutConstraint *textFieldLeftConstraint = [NSLayoutConstraint
  65. constraintWithItem:self.textfield attribute:NSLayoutAttributeLeft
  66. relatedBy:NSLayoutRelationEqual toItem:superview attribute:
  67. NSLayoutAttributeLeft multiplier:1.0 constant:30.0f];
  68. NSLayoutConstraint *textFieldRightConstraint = [NSLayoutConstraint
  69. constraintWithItem:self.textfield attribute:NSLayoutAttributeRight
  70. relatedBy:NSLayoutRelationEqual toItem:superview attribute:
  71. NSLayoutAttributeRight multiplier:1.0 constant:-30.0f];
  72. [superview addConstraints:@[textFieldBottomConstraint ,
  73. textFieldLeftConstraint, textFieldRightConstraint,
  74. textFieldTopConstraint]];
  75. }
  76. - (void)didReceiveMemoryWarning
  77. {
  78. [super didReceiveMemoryWarning];
  79. // Dispose of any resources that can be recreated.
  80. }
  81. @end

输出

运行应用程序,在 iPhone 模拟器上会有下面的输出结果

autolayoutOutputiPhonePortrait

当我们更改模拟器为横向的方向时,输出结果如下

autolayoutOutputiPhoneLandscape

我们在 iPhone 5 模拟器上运行同一应用程序时,输出结果如下

autolayoutOutputiPhone5Portrait

当我们更改模拟器为横向的方向时,输出结果如下:

autolayoutOutputiPhone5Landscape

转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号