VFL-滚动视图自动布局

 1 #import "ViewController.h"
 2 
 3 @interface ViewController ()
 4 {
 5     //控件scrollView
 6     UIScrollView *_scrollView;
 7     //scr 中的内容 view
 8     UIView *_scrContentView;
 9     //内容辅助 view 的作用
10     //1:用来存储显示 view
11     //2.为了更好的计算scrollView的contenSize
12     
13 }
14 @end
15 
16 @implementation ViewController
17 
18 - (void)viewDidLoad {
19     [super viewDidLoad];
20     //1.创建scrollView
21     _scrollView = [[UIScrollView alloc] init];
22     _scrollView.backgroundColor = [UIColor orangeColor];
23     [self.view addSubview:_scrollView];
24     //2.设置 属性
25     _scrollView.translatesAutoresizingMaskIntoConstraints = NO;
26     /*
27     步骤3和4,确定scrollView的frame
28     */
29     //3.创建水平约束数组
30     NSArray *conScrHor = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[_scrollView]-0-|" options:NSLayoutFormatAlignmentMask metrics:nil views:NSDictionaryOfVariableBindings(_scrollView)];
31     [self.view addConstraints:conScrHor];
32     //4.创建垂直方向约束数组
33     NSArray *conScrVor = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[_scrollView]-0-|" options:NSLayoutFormatAlignmentMask metrics:nil views:NSDictionaryOfVariableBindings(_scrollView)];
34     [self.view addConstraints:conScrVor];
35     
36     //5.创建scr内容辅助 view
37     _scrContentView = [[UIView alloc] init];
38     _scrContentView.backgroundColor = [UIColor yellowColor];
39     [_scrollView addSubview:_scrContentView];
40     _scrContentView.translatesAutoresizingMaskIntoConstraints = NO;
41     
42     //6.获取屏幕宽度
43     //CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
44     
45     //7.创建内容辅助 view 的水平方向约束 不设置宽度
46     NSArray *consContentHor = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[_scrContentView]-0-|" options:NSLayoutFormatAlignmentMask metrics:nil views:NSDictionaryOfVariableBindings(_scrContentView)];
47     [_scrollView addConstraints:consContentHor];
48     
49     //7.1 创建宽度约束
50     NSLayoutConstraint *conScrContentWidth = [NSLayoutConstraint constraintWithItem:_scrContentView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:_scrollView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0];
51     [_scrollView addConstraint:conScrContentWidth];
52     
53     //8.创建内容辅助 view 的垂直方向约束
54     NSArray *consScrContentVor = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[_scrContentView]-0-|" options:NSLayoutFormatAlignmentMask metrics:nil views:NSDictionaryOfVariableBindings(_scrContentView)];
55     [_scrollView addConstraints:consScrContentVor];
56     
57     //9.创建真正用来显示的view 红色的
58     UIView *redView = [[UIView alloc] init];
59     redView.backgroundColor = [UIColor redColor];
60     [_scrContentView addSubview:redView];
61     redView.translatesAutoresizingMaskIntoConstraints = NO;
62     
63     //10.红色的 view 水平方向约束
64     NSArray *consRedHor = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView]-20-|" options:NSLayoutFormatAlignmentMask metrics:nil views:NSDictionaryOfVariableBindings(redView)];
65     [_scrContentView addConstraints:consRedHor];
66     
67     //11.红色的view垂直方向约束
68     NSArray *consRedVor = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[redView(40)]-800-|" options:NSLayoutFormatAlignmentMask metrics:nil views:NSDictionaryOfVariableBindings(redView)];
69     [_scrContentView addConstraints:consRedVor];
70     
71     /*
72     7和11 确定scrollView 的 contentSize
73     */
74     UIBarButtonItem *barBtn = [[UIBarButtonItem alloc] initWithTitle:@"ScrContentSize" style:UIBarButtonItemStyleDone target:self action:@selector(barBtnClicked)];
75     self.navigationItem.rightBarButtonItem = barBtn;
76     
77     
78     NSLog(@"scrContent:%@",NSStringFromCGRect(_scrContentView.frame));
79     
80 }
81 
82 -(void)barBtnClicked
83 {
84     NSLog(@"scr contentSize:%@",NSStringFromCGSize(_scrollView.contentSize));
85 }
86 
87 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
88 {
89     NSLog(@"scr contentSize:%@",NSStringFromCGSize(_scrollView.contentSize));
90 }
91 
92 - (void)didReceiveMemoryWarning {
93     [super didReceiveMemoryWarning];
94     // Dispose of any resources that can be recreated.
95 }
96 
97 @end