添加编程创建的视图到垂直滚动视图

添加编程创建的视图到垂直滚动视图

本文介绍了添加编程创建的视图到垂直滚动视图(iOS中线性布局)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我要创建编程添加UIViews到滚动视图,支持自动布局约束。像Android的垂直线性布局。
(目标C没有SWIFT)

I want to add programatically created UIViews into scrollView with auto layout constraints. Like vertical linear layout in Android.(In objective c not swift)

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

I have scrollview inside view controller in storyboard. So basically i want to create and add several views in vertical layout with no spaces into that scrollview. And i want to set container size of the scroll view dynamically according to the view heights.

每个视图都有标签内,每个视图需要根据文字大小动态地设置其高度。但可能我需要来以后。

Each view has label inside and each view needs to set its height dynamically according to text size. But probably i need to come to that later.

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];
}

使用了code我可以补充意见,但我需要添加其他根据之一。

With that code i can add views but i need to add one under the other.

推荐答案

在在的环境中使用自动版式的情况下的的UIScrollView 的我会建议使用一个内容查看内幕您的UIScrollView。只需将它们添加到ViewControllers查看里面的 viewDidLoad中的功能。

In case of using AutoLayout in the context of a UIScrollView I would recommend using a ContentView insider your UIScrollView. Just add them to the ViewControllers View inside the viewDidLoad function.

@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];
}

这code会做一个单一视图的伎俩。添加您需要的视图作为子视图的内容查看并设置约束。

This Code will do the Trick for one single view. Add your required Views as Subview to the contentView and set the Constraints.

- (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]];
}

我希望这将有助于你得到你的意见的权利。

I hope this will help you to get your Views right.

这篇关于添加编程创建的视图到垂直滚动视图(iOS中线性布局)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 16:27