将以编程方式创建的视图垂直添加到滚动视图中（iOS 中的线性布局）

Question

我想将以编程方式创建的 UIView 添加到具有自动布局约束的 scrollView 中。就像 Android 中的垂直线性布局。（在 objective c 而不是 swift）

我在故事板的视图控制器中有滚动视图。所以基本上我想在垂直布局中创建和添加几个视图，该滚动视图中没有空格。我想根据视图高度动态设置滚动视图的容器大小。

每个视图内部都有标签，每个视图需要根据文本大小动态设置高度。但可能我需要稍后再谈。

for (int i=0; i<10; i++)
{
    UIView *viewOne = UIView.new;
    [viewOne setTranslatesAutoresizingMaskIntoConstraints:NO];
    viewOne.backgroundColor = [UIColor redColor];
    NSDictionary *viewsDictionary = @{@"viewOne" : viewOne};
    NSDictionary *metricsDictionary = @{@"horizontalSpacing" : @10};

    [self.scrollview addSubview:viewOne];

    NSArray *horizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-horizontalSpacing-[viewOne]-horizontalSpacing-|"
                                                                             options:NSLayoutFormatDirectionLeadingToTrailing
                                                                             metrics:metricsDictionary
                                                                               views:viewsDictionary];

    NSArray *const_Height = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[viewOne(50)]"
                                                                    options:0
                                                                    metrics:nil
                                                                      views:viewsDictionary];

    [viewOne addConstraints:const_Height];
    [self.scrollview addConstraints:horizontalConstraints];
}

使用该代码我可以添加视图，但我需要在另一个视图下添加一个视图。

Answer 1

如果在 UIScrollView 的上下文中使用 AutoLayout，我建议在 UIScrollView 中使用 ContentView。只需将它们添加到 viewDidLoad 函数中的 ViewControllers View。

@interface YourViewController ()
@property (nonatomic, strong) UIScrollView *dataScrollView;
@property (nonatomic, strong) UIView* contentView;
@end

@implementation YourViewController
@synthesize dataScrollView, contentView;

- (void) viewDidLoad {
    [super viewDidLoad];

    dataScrollView  = [[UIScrollView alloc] init];
    contentView = [[UIView alloc] init];

    // adding the Views programmatically to the hierarchy
    [self.view addSubview:dataScrollView];
    [dataScrollView addSubview:contentView];

    // don't translate the AutoresizingMask into constraints
    dataScrollView.translatesAutoresizingMaskIntoConstraints  = NO;
    contentView.translatesAutoresizingMaskIntoConstraints = NO;

    // backgroundColor as you wish?
    dataScrollView.backgroundColor = [UIColor clearColor];
    contentView.backgroundColor = [UIColor clearColor];

    [dataScrollView setScrollEnabled:YES];
    [dataScrollView setAlwaysBounceVertical:YES];

    NSDictionary* viewsDictionary = NSDictionaryOfVariableBindings(dataScrollView, contentView);
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[dataScrollView]|" options:0 metrics: 0 views:viewsDictionary]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[dataScrollView]|" options:0 metrics: 0 views:viewsDictionary]];
    [dataScrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[contentView(==dataScrollView)]|" options:0 metrics: 0 views:viewsDictionary]];
    [dataScrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[contentView]|" options:0 metrics: 0 views:viewsDictionary]];

    // see below
    // [self setUpViews];
}

此代码将完成单个视图的技巧。将所需的视图作为子视图添加到 contentView 并设置约束。

- (void) setUpViews {
    UILabel* testLabel = [[UILabel alloc] init];
    [testLabel setText:@"Lorem Ipsum"];
    testLabel.translatesAutoresizingMaskIntoConstraints = NO;
    [contentView addSubview: testLabel];

    // clean up your code with this metrics Dictionary
    NSDictionary *metrics = @{@"margintop": @40,
                          @"marginleft": @10,
                          @"marginright": @10,
                          @"marginbottom": @20}

    // the Views we want to layout with Constraints
    NSDictionary *viewsDictionary = @{
                                  @"contentView":contentView,
                                  @"dataScrollView":dataScrollView,
                                  @"testLabel": testLabel}

    // Horizontal (testlabel)
    [contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-marginleft-[testLabel]-marginright-|" options:0 metrics: metrics views:viewsDictionary]];
    // Vertical
    [contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-margintop-[testLabel]-marginbottom-|" options:0 metrics: metrics views:viewsDictionary]];
}

关于你在for循环中添加多个视图的问题，有很多可能的方法。这可能是最简单的解决方案 constraintsWithVisualFormat。

- (void) setUpViews {
    NSDictionary *metrics = @{@"margintop": @40,
                          @"marginleft": @10,
                          @"marginright": @10,
                          @"marginbottom": @20,
                          };
    // Alsways like to have contentView and DataScrollView here
    NSMutableDictionary* dictViews = [[NSMutableDictionary alloc] initWithDictionary:@{@"contentView":contentView,
                                                                                   @"dataScrollView":dataScrollView}];

    // Basic Leading-String for Vertical Constraints
    NSString* verticalConstraintsString = @"V:|-margintop-";
    for (NSUInteger index = 0; index < 10; index++) {
        // Do your Magic here & add your View
        UILabel* testLabel = [[UILabel alloc] init];
        [testLabel setText:@"Lorem Ipsum"];
        testLabel.translatesAutoresizingMaskIntoConstraints = NO;
        [contentView addSubview: testLabel];

        // Add to global Mutable Views-Dictionary dictViews
        [dictViews setObject:testLabel forKey:[NSString stringWithFormat:@"testLabel%lu", (unsigned long)index]];
        // add "[testlabel1]" to the vertical Constraints
        verticalConstraintsString = [NSString stringWithFormat:@"%@[testLabel%lu]-", verticalConstraintsString, (unsigned long)index];
        // Add Horizontal Constraints
        [contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"H:|-marginleft-[testLabel%lu]-marginright-|", (unsigned long)index] options:0 metrics: metrics views:@{@"testLabel-%lu":testLabel}]];
    }

    // Trailing-String
    verticalConstraintsString = [NSString stringWithFormat:@"%@marginbottom-|", verticalConstraintsString];
    NSDictionary *viewsDictionary = [[NSDictionary alloc] initWithDictionary:dictViews];

    // finally adding the vertical Constraints
    [contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:verticalConstraintsString options:0 metrics: metrics views:viewsDictionary]];
}

我希望这会帮助您获得正确的观点。

将以编程方式创建的视图垂直添加到滚动视图中（iOS 中的线性布局）

Adding programatically created views into scrollview vertically (Linear layout in iOS)

constraints

objective-c

ios

autolayout