首页 > 代码库 > iOS: 学习笔记, 用代码驱动自动布局实例

iOS: 学习笔记, 用代码驱动自动布局实例

iOS自动布局是设置iOS界面的利器.

本实例展示了如何使用自动布局语言设置水平布局, 垂直布局

1. 创建空白iOS项目

2. 添加一个控制器类, 修改YYAppDelegate.m文件

#import "YYAppDelegate.h"
#import "YYViewController.h"

@implementation YYAppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
    
    self.window.rootViewController = [[YYViewController alloc] initWithNibName:nil bundle:nil];
    
    [self.window makeKeyAndVisible];
    return YES;
}

3. 修改控制器类

  1 //
  2 //  YYViewController.m
  3 //  UIBasic060701_Button
  4 //
  5 //  Created by yao_yu on 14-6-7.
  6 //  Copyright (c) 2014年 yao_yu. All rights reserved.
  7 //
  8 
  9 #import "YYViewController.h"
 10 
 11 @interface YYViewController ()
 12 
 13 @property(nonatomic, strong) UIView *viewMoveBlock;
 14 
 15 @end
 16 
 17 @implementation YYViewController
 18 
 19 - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
 20 {
 21     self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
 22     if (self) {
 23         // Custom initialization
 24     }
 25     return self;
 26 }
 27 
 28 - (void)viewDidLoad
 29 {
 30     [super viewDidLoad];
 31     
 32     self.viewMoveBlock = [[UIView alloc] init];
 33     [self.viewMoveBlock setBackgroundColor:[UIColor blueColor]];
 34     self.viewMoveBlock.frame = CGRectMake(100, 100, 20, 20);
 35     [self.view addSubview: self.viewMoveBlock];
 36     
 37     UIView *commandPane = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 160, 40)];
 38     [self.view addSubview:commandPane];
 39 
 40     const CGFloat BUTTONSIZE = 40;
 41     UIButton *buttonLeft = [UIButton buttonWithType:UIButtonTypeRoundedRect];
 42     [buttonLeft setTitle:@"左移" forState:UIControlStateNormal];
 43     buttonLeft.frame = CGRectMake(0, 0, BUTTONSIZE, BUTTONSIZE);
 44     [commandPane addSubview: buttonLeft];
 45     [buttonLeft addTarget:self action:@selector(moveLeft) forControlEvents:UIControlEventTouchUpInside];
 46     
 47     UIButton *buttonRight = [UIButton buttonWithType:UIButtonTypeRoundedRect];
 48     [buttonRight setTitle:@"右移" forState:UIControlStateNormal];
 49     buttonRight.frame = CGRectMake(BUTTONSIZE, 0, BUTTONSIZE, BUTTONSIZE);
 50     [commandPane addSubview: buttonRight];
 51     [buttonRight addTarget:self action:@selector(moveRight) forControlEvents:UIControlEventTouchUpInside];
 52     
 53     UIButton *buttonUp = [UIButton buttonWithType:UIButtonTypeRoundedRect];
 54     [buttonUp setTitle:@"上移" forState:UIControlStateNormal];
 55     buttonUp.frame = CGRectMake(BUTTONSIZE*2, 0, BUTTONSIZE, BUTTONSIZE);
 56     [commandPane addSubview: buttonUp];
 57     [buttonUp addTarget:self action:@selector(moveUp) forControlEvents:UIControlEventTouchUpInside];
 58     
 59     UIButton *buttonDown = [UIButton buttonWithType:UIButtonTypeRoundedRect];
 60     [buttonDown setTitle:@"下移" forState:UIControlStateNormal];
 61     buttonDown.frame = CGRectMake(BUTTONSIZE*3, 0, BUTTONSIZE, BUTTONSIZE);
 62     [commandPane addSubview: buttonDown];
 63     [buttonDown addTarget:self action:@selector(moveDown) forControlEvents:UIControlEventTouchUpInside];
 64     
 65     UIButton *buttonZoomOut = [UIButton buttonWithType:UIButtonTypeRoundedRect];
 66     [buttonZoomOut setTitle:@"放大" forState:UIControlStateNormal];
 67     buttonZoomOut.frame = CGRectMake(BUTTONSIZE*4, 0, BUTTONSIZE, BUTTONSIZE);
 68     [commandPane addSubview: buttonZoomOut];
 69     [buttonZoomOut addTarget:self action:@selector(zoomOut) forControlEvents:UIControlEventTouchUpInside];
 70     
 71     UIButton *buttonZoomIn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
 72     [buttonZoomIn setTitle:@"缩小" forState:UIControlStateNormal];
 73     buttonZoomIn.frame = CGRectMake(BUTTONSIZE*5, 0, BUTTONSIZE, BUTTONSIZE);
 74     [commandPane addSubview: buttonZoomIn];
 75     [buttonZoomIn addTarget:self action:@selector(zoomIn) forControlEvents:UIControlEventTouchUpInside];
 76     
 77     [commandPane setTranslatesAutoresizingMaskIntoConstraints:NO];
 78     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"[commandPane(260)]" options:0 metrics:0 views:NSDictionaryOfVariableBindings(commandPane)]];
 79     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[commandPane(50)]" options:0 metrics:0 views:NSDictionaryOfVariableBindings(commandPane)]];
 80     [self.view addConstraint:[NSLayoutConstraint constraintWithItem:commandPane attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:0.0f]];
 81     
 82     NSDictionary *metrics = [NSDictionary dictionaryWithObjectsAndKeys:@40, @"SIZE", nil];
 83     NSDictionary *contraitsView = NSDictionaryOfVariableBindings(buttonLeft, buttonRight, buttonUp, buttonDown, buttonZoomOut, buttonZoomIn);
 84     for (NSString *buttonKey in contraitsView ) {
 85         [contraitsView[buttonKey] setTranslatesAutoresizingMaskIntoConstraints:NO];
 86         [commandPane addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"V:|[%@(SIZE)]", buttonKey] options:0 metrics:metrics views:contraitsView]];
 87     }
 88     [commandPane addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[buttonLeft(SIZE)][buttonRight(SIZE)][buttonUp(SIZE)][buttonDown(SIZE)]-(>=0)-[buttonZoomOut(SIZE)][buttonZoomIn(SIZE)]|" options:0 metrics:metrics views: contraitsView]];
 89 }
 90 
 91 -(void)moveLeft
 92 {
 93     [self moveX: -20 Y:0];
 94 }
 95 
 96 -(void)moveRight
 97 {
 98     [self moveX: 20 Y:0];
 99 }
100 
101 -(void)moveUp
102 {
103     [self moveX: 0 Y:-20];
104 }
105 
106 -(void)moveDown
107 {
108     [self moveX: 0 Y:20];
109 }
110 
111 -(void)zoomOut
112 {
113     CGRect rect = self.viewMoveBlock.frame;
114     
115     rect.origin.x -= 20;
116     rect.origin.y -= 20;
117     rect.size.width += 40;
118     rect.size.height += 40;
119     
120     
121     [UIView beginAnimations:nil context:nil];
122     [UIView setAnimationDuration:1.0];
123     
124     self.viewMoveBlock.frame = rect;
125     
126     [UIView commitAnimations];
127 }
128 
129 -(void)zoomIn
130 {
131     CGRect rect = self.viewMoveBlock.frame;
132     
133     rect.origin.x += 20;
134     rect.origin.y += 20;
135     rect.size.width -= 40;
136     rect.size.height -= 40;
137     
138     
139     [UIView beginAnimations:nil context:nil];
140     [UIView setAnimationDuration:1.0];
141     
142     self.viewMoveBlock.frame = rect;
143     
144     [UIView commitAnimations];
145 }
146 
147 -(void)moveX: (int)x Y:(int)y
148 {
149     CGPoint p = self.viewMoveBlock.center;
150     
151     p.x += x;
152     p.y += y;
153     
154     [UIView beginAnimations:nil context:nil];
155     [UIView setAnimationDuration:1.0];
156     
157     self.viewMoveBlock.center = p;
158     
159     [UIView commitAnimations];
160 }
161 
162 - (void)didReceiveMemoryWarning
163 {
164     [super didReceiveMemoryWarning];
165     // Dispose of any resources that can be recreated.
166 }
167 
168 /*
169 #pragma mark - Navigation
170 
171 // In a storyboard-based application, you will often want to do a little preparation before navigation
172 - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
173 {
174     // Get the new view controller using [segue destinationViewController].
175     // Pass the selected object to the new view controller.
176 }
177 */
178 
179 @end

4. 运行