如何使用自動布局以編程方式在UIscrollview上添加字段

Question

嗨，我是ios的初學者，在我的項目中，我在UIScrollview上添加了一些字段，但此處字段不適合我在創建scrollview，我想在scrollview上添加的字段都使用自動布局以編程方式創建，但是scrollview不會滾動和字段添加不正確，請幫我一些

根據我的代碼，我正在獲得第二個屏幕的結果，但我想獲得類似於第一個屏幕的結果，請幫助我一些

這是我的代碼

- (void)viewDidLoad {
    [super viewDidLoad];


    scrollview = [[UIScrollView alloc]init];
    [self.view setBackgroundColor:[UIColor darkGrayColor]];
    scrollview.translatesAutoresizingMaskIntoConstraints = NO;
    [scrollview setBackgroundColor:[UIColor colorWithRed:74.0/255.0 green:166.0/255.0 blue:224.0/255.0 alpha:1]];
    [self.view addSubview:scrollview];

    textFiedl1 = [[UITextField alloc]init];
    textFiedl1.backgroundColor = [UIColor blueColor];
    textFiedl1.translatesAutoresizingMaskIntoConstraints = NO;
    [scrollview addSubview:textFiedl1];

    textField2 = [[UITextField alloc]init];
    textField2.backgroundColor = [UIColor blueColor];
    textField2.translatesAutoresizingMaskIntoConstraints = NO;
    [scrollview addSubview:textField2];


    NSDictionary * views = NSDictionaryOfVariableBindings(scrollview,textFiedl1,textField2);


    NSArray *horizontalConstraints =[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[scrollview]-10-|"
                                                                            options:0
                                                                            metrics:nil
                                                                              views:views];

    NSArray *verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[scrollview(280)]-|"
                                                                           options:0
                                                                           metrics:nil
                                                                             views:views];



    NSArray * textFieldConstraint1H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[textFiedl1]-10-|"
                                                                              options:0
                                                                              metrics:nil
                                                                                views:views];

    NSArray * textFieldConstraint2H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[textField2]-10-|"
                                                                              options:0
                                                                              metrics:nil
                                                                                views:views];


    NSArray * textFieldConstraintV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[textFiedl1(30)]-30-[textField2(30)]"
                                                                             options:0
                                                                             metrics:nil
                                                                               views:views];

    [self.view addConstraints:horizontalConstraints];
    [self.view addConstraints:verticalConstraints];
    [scrollview addConstraints:textFieldConstraint1H];
    [scrollview addConstraints:textFieldConstraint2H];
    [scrollview addConstraints:textFieldConstraintV];

    //set content size
    [scrollview setContentSize:CGSizeMake(100, 700)];
}

但是我想得到像第一個屏幕截圖一樣的結果（還有另外一件事，即使我設置了contentoffset（100X700），scrollview也不會滾動

Answer 1

您可以將容器視圖添加到滾動視圖中以激活滾動視圖。 另外，控制器約束滾動視圖的子視圖會更容易

UIView *containerView = [[UIView alloc] init];
containerView.backgroundColor = [UIColor yellowColor]; // just so I can see it
containerView.translatesAutoresizingMaskIntoConstraints = NO;
[scrollview addSubview:containerView];
NSDictionary * views = NSDictionaryOfVariableBindings(scrollview,textFiedl1,textField2,view,containerView);


NSArray *horizontalConstraints =[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[scrollview]-10-|"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:views];

NSArray *verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[scrollview(280)]-|"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:views];

// set the container to the size of the main view, and simultaneously
// set the scrollview's contentSize to match the size of the container

[view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[containerView(==scrollview)]|"
                                                             options:0
                                                             metrics:nil
                                                               views:views]];

[view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[containerView(==view)]|"
                                                             options:0
                                                             metrics:nil
                                                               views:views]];



NSArray * textFieldConstraint1H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[textFiedl1]-10-|"
                                                                          options:0
                                                                          metrics:nil
                                                                            views:views];

NSArray * textFieldConstraint2H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[textField2]-10-|"
                                                                          options:0
                                                                          metrics:nil
                                                                            views:views];


NSArray * textFieldConstraintV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[textFiedl1(30)]-30-[textField2(30)]"
                                                                         options:0
                                                                         metrics:nil
                                                                           views:views];

[view addConstraints:horizontalConstraints];
[view addConstraints:verticalConstraints];
[containerView addConstraints:textFieldConstraint1H];
[containerView addConstraints:textFieldConstraint2H];
[containerView addConstraints:textFieldConstraintV];

//setting content size now no longer needed in autolayout.
//[scrollview setContentSize:CGSizeMake(100, 700)];

Answer 2

您的約束存在一些問題。 修改如下，scrollview將滾動，並且文本字段將具有固定寬度（請檢查代碼中的注釋）：

UIScrollView *scrollview = [[UIScrollView alloc]init];
[self.view setBackgroundColor:[UIColor darkGrayColor]];
scrollview.translatesAutoresizingMaskIntoConstraints = NO;
[scrollview setBackgroundColor:[UIColor colorWithRed:74.0/255.0 green:166.0/255.0 blue:224.0/255.0 alpha:1]];
[self.view addSubview:scrollview];

UITextField *textFiedl1 = [[UITextField alloc]init];
textFiedl1.backgroundColor = [UIColor blueColor];
textFiedl1.translatesAutoresizingMaskIntoConstraints = NO;
[scrollview addSubview:textFiedl1];

UITextField *textField2 = [[UITextField alloc]init];
textField2.backgroundColor = [UIColor blueColor];
textField2.translatesAutoresizingMaskIntoConstraints = NO;
[scrollview addSubview:textField2];


NSDictionary * views = NSDictionaryOfVariableBindings(scrollview,textFiedl1,textField2);


NSArray *horizontalConstraints =[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[scrollview]-10-|"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:views];

NSArray *verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[scrollview(280)]"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:views];



// you must provide the autolayout system some hint about the width
// of the content of the scrollView.
// Here we set a fixed width to textField.
NSArray * textFieldConstraint1H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[textFiedl1(100)]-10-|"
                                                                          options:0
                                                                          metrics:nil
                                                                            views:views];

NSArray * textFieldConstraint2H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[textField2]-10-|"
                                                                          options:0
                                                                          metrics:nil
                                                                            views:views];


// In order for the scrollView to scroll, you must setup
// vertical constraints such that the height of scrollView's content height can be determined
// Here we add a constraints to set textField2 bottom to scrollView bottom(200).
NSArray * textFieldConstraintV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[textFiedl1(30)]-30-[textField2(30)]-200-|"
                                                                         options:0
                                                                         metrics:nil
                                                                           views:views];

[self.view addConstraints:horizontalConstraints];
[self.view addConstraints:verticalConstraints];
[scrollview addConstraints:textFieldConstraint1H];
[scrollview addConstraints:textFieldConstraint2H];
[scrollview addConstraints:textFieldConstraintV];

//set content size
[scrollview setContentSize:CGSizeMake(100, 700)];

但是，如果要在文本字段和滾動視圖之間添加一些填充，如圖像中所述，我認為您不能在視覺格式約束下做到這一點。 您可以使用此處描述的簡單約束。

另外，您可以使用Masonry庫，該庫提供了更簡單的語法來以編程方式設置約束。