How to set UIfields using masonry in ios - ios

Question

Hi i am beginner for Auto-Layouts and i am inserting some fields on my UIScrollView they are UILabels and UIButtons and UITextfields using Masonry but i am very ignore about Masonry concept please help me.
I want screen exactly like below image using Masonry concept and i have started some code for doing this requirement but middle of moments i was strucked to do this requirement please help me how to full fill my requirement
my code:-
#import "ViewController.h"
#import "Masonry.h"
#interface ViewController ()
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIScrollView *scrollView = [[UIScrollView alloc] init];
scrollView.translatesAutoresizingMaskIntoConstraints = NO;
scrollView.backgroundColor = [UIColor greenColor];
[self.view addSubview:scrollView];
UITextField * textfield1 = [[UITextField alloc]init];
textfield1.translatesAutoresizingMaskIntoConstraints = NO;
textfield1.backgroundColor = [UIColor blackColor];
[scrollView addSubview:textfield1];
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.view.mas_top).with.offset(padding.top);
make.left.equalTo(self.view.mas_left).with.offset(padding.left);
make.bottom.equalTo(self.view.mas_bottom).with.offset(-padding.bottom);
make.right.equalTo(self.view.mas_right).with.offset(-padding.right);
}];
UIEdgeInsets padding1 = UIEdgeInsetsMake(10, 100, 10, 0);
[textfield1 mas_makeConstraints:^(MASConstraintMaker *make1){
make1.top.equalTo(scrollView.mas_top).width.offset(padding1.top);
make1.left.equalTo(scrollView.mas_left).with.offset(padding1.left);
make1.height.equalTo(scrollView.mas_height).with.offset(30);
make1.right.equalTo(scrollView.mas_right).with.offset(-padding1.right);
}];
}
#end

Answer 1

Here is an example on how to make it work. I did not do all labels but enough to give you an idea how this should be implemented:
#interface ViewController ()
#property (nonatomic) UIScrollView *scrollView;
#property (nonatomic) UILabel *label1;
#property (nonatomic) UITextField *textField1;
#property (nonatomic) UITextField *textField2;
#property (nonatomic) UITextField *textField3;
#property (nonatomic) UIButton *leftButton;
#property (nonatomic) UIButton *rightButton;
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.view.backgroundColor = [UIColor colorWithWhite:0.95 alpha:1];
self.scrollView = [[UIScrollView alloc] init];
self.label1 = [[UILabel alloc] init];
self.textField1 = [[UITextField alloc] init];
self.textField2 = [[UITextField alloc] init];
self.textField3 = [[UITextField alloc] init];
self.leftButton = [UIButton buttonWithType:UIButtonTypeCustom];
self.rightButton = [UIButton buttonWithType:UIButtonTypeCustom];
self.label1.text = #"Label 1";
self.leftButton.backgroundColor = [UIColor greenColor];
[self.leftButton setTitle:#"Left Button" forState:UIControlStateNormal];
self.rightButton.backgroundColor = [UIColor greenColor];
[self.rightButton setTitle:#"Right Button" forState:UIControlStateNormal];
self.textField1.placeholder = #"TextField 1";
self.textField2.placeholder = #"TextField 2";
self.textField3.placeholder = #"TextField 3";
self.textField1.backgroundColor = [UIColor colorWithWhite:0 alpha:0.1];
self.textField2.backgroundColor = [UIColor colorWithWhite:0 alpha:0.1];
self.textField3.backgroundColor = [UIColor colorWithWhite:0 alpha:0.1];
[self.view addSubview:self.scrollView];
[self.scrollView addSubview:self.label1];
[self.scrollView addSubview:self.textField1];
[self.scrollView addSubview:self.textField2];
[self.scrollView addSubview:self.textField3];
[self.scrollView addSubview:self.leftButton];
[self.scrollView addSubview:self.rightButton];
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(30, 10, 10, 10));
}];
[self.label1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.right.equalTo(#0);
make.width.equalTo(self.scrollView);
}];
[self.textField1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.label1.mas_bottom);
make.left.right.equalTo(#0);
make.height.equalTo(#30);
}];
[self.textField2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.textField1.mas_bottom).offset(20);
make.left.equalTo(#0);
make.height.equalTo(self.textField1);
}];
[self.textField3 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.textField2);
make.left.equalTo(self.textField2.mas_right).offset(20);
make.right.equalTo(#0);
make.width.equalTo(self.textField2).multipliedBy(0.7);
make.height.equalTo(self.textField1);
}];
[self.leftButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.textField2.mas_bottom).offset(40);
make.left.equalTo(#0);
make.bottom.equalTo(#0);
}];
[self.rightButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.leftButton);
make.right.equalTo(#0);
make.bottom.equalTo(#0);
make.width.equalTo(self.leftButton);
}];
}
This is what it looks like:
If you want to know a bit more about UIScrollViews and AutoLayout, here is a short blog post I wrote about this topic: UIScrollView and Auto Layout