ios - 用于视图数组的自动布局可视化编程语言

Question

假设我有一个视图数组，我想将这些视图堆叠在一个列表中。现在，如果我提前知道有多少视图，我可以编写如下约束：

"V:|-[view0]-[view1]-[view2]-[view_n]"

但是，如何在数组中使用可变数量的视图来完成这样的事情？

Answer 1

看看这个很棒的类别：

https://github.com/jrturton/UIView-Autolayout

它有一个 spaceViews 方法，您可以在容器视图上调用该方法，并将沿指定轴均匀排列一组视图。

演示项目中有一些示例代码应该涵盖所有内容。

以下是如何在垂直轴上均匀地放置一些视图：
此中心 4 个视图在 x 轴上并将宽度限制为 150 点。然后根据高度计算高度self.view

#import "UIView+AutoLayout.h"

...

- (void)spaceViews
{
    NSArray *views = @[ [self spacedView], [self spacedView], [self spacedView], [self spacedView] ];

    [self.view spaceViews:views onAxis:UILayoutConstraintAxisVertical withSpacing:10 alignmentOptions:0];
}

- (UIView *)spacedView
{
    //Create an autolayout view
    UIView *view = [UIView autoLayoutView];

    //Set the backgroundColor
    [view setBackgroundColor:[UIColor redColor]];

    //Add the view to the superview
    [self.view addSubview:view];

    //Constrain the width and center on the x axis
    [view constrainToSize:CGSizeMake(150, 0)];
    [view centerInContainerOnAxis:NSLayoutAttributeCenterX];

    //Return the view
    return view;
}

Answer 2

您可以遍历数组并构建字符串（使用NSMutableString）。您需要使用与您在格式字符串中使用的名称匹配的键将视图添加到字典中。

Answer 3

我需要将数组中的视图添加到我的教程页面的滚动视图中，在这种情况下，我通过遍历视图来构建 VFL 字符串，下面是一个快照，此代码是为了使子视图完全适合滚动视图的页面。通过一些调整，可以添加填充等。无论如何，将其发布在这里，以便对某人有所帮助。

完整代码arrayAutolayout

/*!
 Create an array of views that we need to load
 @param nil
 @result creates array of views and adds it to scrollview
 */
-(void)setUpViews
{
    [viewsDict setObject:contentScrollView forKey:@"parent"];
    int count = 20;//Lets layout 20 views
    for (int i=0; i<=count; i++) {
        // I am loading the view from xib.
        ContentView *contenView = [[NSBundle mainBundle] loadNibNamed:@"ContentView" owner:self options:nil][0];
        contenView.translatesAutoresizingMaskIntoConstraints = NO;
        // Layout the text and color
        [contenView layoutTheLabel];
        [contentScrollView addSubview:contenView];
        [viewsArray addObject:contenView];
    }
}
/*!
 Method to layout the childviews in the scrollview.
 @param nil
 @result layout the child views
 */
-(void)layoutViews
{
    NSMutableString *horizontalString = [NSMutableString string];
    // Keep the start of the horizontal constraint
    [horizontalString appendString:@"H:|"];
    for (int i=0; i<viewsArray.count; i++) {
        // Here I am providing the index of the array as the view name key in the dictionary
        [viewsDict setObject:viewsArray[i] forKey:[NSString stringWithFormat:@"v%d",i]];
        // Since we are having only one view vertically, then we need to add the constraint now itself. Since we need to have fullscreen, we are giving height equal to the superview.
        NSString *verticalString = [NSString stringWithFormat:@"V:|[%@(==parent)]|", [NSString stringWithFormat:@"v%d",i]];
        // add the constraint
        [contentScrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:verticalString options:0 metrics:nil views:viewsDict]];
        // Since we need to horizontally arrange, we construct a string, with all the views in array looped and here also we have fullwidth of superview.
        [horizontalString appendString:[NSString stringWithFormat:@"[%@(==parent)]", [NSString stringWithFormat:@"v%d",i]]];
    }
    // Close the string with the parent
    [horizontalString appendString:@"|"];
    // apply the constraint
    [contentScrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:horizontalString options:0 metrics:nil views:viewsDict]];
}

下面是创建的字符串

H:|[v0(==parent)][v1(==parent)][v2(==parent)][v3(==parent)][v4(==parent)][v5(==parent)][v6(==parent)][v7(==parent)][v8(==parent)][v9(==parent)][v10(==parent)][v11(==parent)][v12(==parent)][v13(==parent)][v14(==parent)][v15(==parent)][v16(==parent)][v17(==parent)][v18(==parent)][v19(==parent)][v20(==parent)]|