iOS以编程方式使用Autolayout在UIScrollView中修复子视图的位置

时间:2014-05-28 18:29:54

标签: ios objective-c uiscrollview mkmapview autolayout

我有一个包含UIScrollView的UIView。 UIScrollView包含一个MKMapView子视图和位于其下方的占位符子视图。我想将MKMapView固定在屏幕顶部,并允许占位符子视图在其上滑动并覆盖它。

Apple表示,现在可以通过Autolayout实现这一目标,但它似乎并不适用于我。下面的代码正确显示了UIScrollView及其子视图,但地图仍然与其他所有内容一起滚动。我错过了一些非常明显的东西吗?

https://developer.apple.com/LIBRARY/ios/technotes/tn2154/_index.html

请注意,您可以通过在视图和滚动视图子树外部的视图之间创建约束(例如滚动视图的超级视图),使滚动视图的子视图显示为浮动(不滚动)在其他滚动内容上

UIView .m文件:

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {

        // Create scroll view and add to view
        UIScrollView *scrollView = [[UIScrollView alloc] init];
        [scrollView setBackgroundColor: [UIColor clearColor]];
        [scrollView setShowsVerticalScrollIndicator:NO];
        [scrollView setTranslatesAutoresizingMaskIntoConstraints:NO];
        [self addSubview:scrollView];

        // Create map view and add to scroll view
        mapView = [[MKMapView alloc] init];
        mapView.showsPointsOfInterest = NO;
        mapView.translatesAutoresizingMaskIntoConstraints = NO;
        [scrollView addSubview:mapView];

        // Create a placeholder image to scroll over map view
        UIImageView *randomPlaceholderStuff = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"stuff.png"]];
        [dividingLine setTranslatesAutoresizingMaskIntoConstraints:NO];
        [scrollView addSubview:dividingLine];


        // Layouts
        NSDictionary *viewArranging = NSDictionaryOfVariableBindings(scrollView, tourMap, randomPlaceholderStuff);

        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scrollView]|"
                                                                     options:0
                                                                     metrics:0
                                                                       views:viewArranging]];

        [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scrollView]|"
                                                                     options:0
                                                                     metrics:0
                                                                       views:viewArranging]];

        UIView *referenceSuperView = scrollView.superview;

        [referenceSuperView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[mapView(320)]|"
                                                                           options:0
                                                                           metrics:0
                                                                             views:viewArranging]];

        [referenceSuperView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[mapView(320)]"
                                                                           options:0
                                                                           metrics:0
                                                                             views:viewArranging]];

        [scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-334-[randomPlaceholderStuff]|"
                                                                           options:0
                                                                           metrics:0
                                                                             views:viewArranging]];

        [scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[randomPlaceholderStuff(320)]|"
                                                                           options:0
                                                                           metrics:0
                                                                             views:viewArranging]];

    }
    return self;
}

@end

修改

jrturton的回答很明显。这是最终工作的代码:

[self addConstraint:[NSLayoutConstraint constraintWithItem:mapView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:scrollView.superview attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0]];

[self addConstraint:[NSLayoutConstraint constraintWithItem:mapView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:scrollView.superview attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0]];

[self addConstraint:[NSLayoutConstraint constraintWithItem:mapView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:320.0]];

2 个答案:

答案 0 :(得分:3)

您无法使用可视化格式语言进行尝试。 |字符将始终被解释为视图的直接超级视图,因此您不会创建您认为自己的约束。

您需要使用较长的方法(constraintWithItem...)来创建单独的约束,其中item1是浮动视图,而item2是滚动视图的superview。

答案 1 :(得分:0)

您可以通过将子视图添加/移动到滚动视图的超级视图来添加UIScrollView上的浮动子视图,如:

将按钮放置/设置在滚动视图上(不在滚动视图内),如此快照中所示。并且还针对滚动视图的超级视图设置按钮约束(位置)。

enter image description here

这是参考。每个视图相对于彼此的位置层次结构的快照。

enter image description here