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

Posted 2023-03-12

【中文标题】用于视图数组的自动布局可视化编程语言

【英文标题】：Auto layout visual programming language for an array of views

【发布时间】：2013-10-10 18:44:00

【问题描述】：

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

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

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

【参考方案1】：

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

【参考方案2】：

看看这个很棒的类别：

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;

【讨论】：

请务必查看我的那个项目的分支，它重新设计和清理了 API 并包含更多功能（包括许多约束视图数组的方法）：github.com/smileyborg/UIView-AutoLayout

【参考方案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)]|