Swift安全区域布局指南和可视格式语言

时间:2017-09-28 22:41:08

标签: swift autolayout ios11 visual-format-language safearealayoutguide

我想使用Apples可视化格式语言将视图限制在iOS 11中的新Safe Area Layout Guide。但是,我得到一个例外:

  

- [NSLayoutYAxisAnchor nsli_superitem]:无法识别的选择器发送到实例0x1c447ed40

    //Make View Dictionary
    var views: [String: Any] = ["left": self.leftContainer]

    //Check swift version and add appropriate piece to the view dictionary
    if #available(iOS 11, *) {
        views["topGuide"] = self.view.safeAreaLayoutGuide.topAnchor
    }else{
        views["topGuide"] = self.topLayoutGuide
    }

    //Make the constraint using visual format language
    let leftVertical = NSLayoutConstraint.constraints(withVisualFormat: "V:[topGuide][left]|", options: [], metrics: nil, views: views)

    //Add the new constraint
    self.view.addConstraints(vertical)

我喜欢可视化格式语言的原因是因为在某些情况下你可以用更少的代码添加很多约束。

任何想法?

4 个答案:

答案 0 :(得分:30)

  

我想使用Apples可视化格式语言将视图约束到新的“安全区域布局指南”

你做不到。通过可视格式语言无法访问安全区域布局指南。我已经提交了一个错误,我建议你这样做。

答案 1 :(得分:9)

我们在这里扩展了视觉格式化语言,所以现在你可以反对“< |”当你的意思是safeAreaLayoutGuide。我希望Apple能做到这样的事情。

例如,如果您有以下iOS 11之前的代码:

[NSLayoutConstraint activateConstraints:[NSLayoutConstraint
     constraintsWithVisualFormat:@"V:[_button]-(normalPadding)-|"
    options:0 metrics:metrics views:views
]];

现在你要确保按钮位于iPhone X的安全底部边缘上方,然后执行此操作:

[NSLayoutConstraint activateConstraints:[NSLayoutConstraint
    mmm_constraintsWithVisualFormat:@"V:[_button]-(normalPadding)-<|"
    options:0 metrics:metrics views:views
]];

就是这样。它会在iOS 9和10上将按钮锚定到其超级视图的底部,但是将其锚定在iOS 11上的safeAreaLayoutGuide的底部。

请注意使用“|&gt;”固定到顶部不会排除iOS 9和10上的状态栏。

// In @interface/@implementation NSLayoutConstraint (MMMUtil)
// ...

+(NSArray<NSLayoutConstraint *> *)mmm_constraintsWithVisualFormat:(NSString *)format
    options:(NSLayoutFormatOptions)opts
    metrics:(NSDictionary<NSString *,id> *)metrics
    views:(NSDictionary<NSString *,id> *)views
{
    if ([format rangeOfString:@"<|"].location == NSNotFound && [format rangeOfString:@"|>"].location == NSNotFound ) {
        // No traces of our special symbol, so do nothing special.
        return [self constraintsWithVisualFormat:format options:opts metrics:metrics views:views];
    }

    if (![UIView instancesRespondToSelector:@selector(safeAreaLayoutGuide)]) {
        // Before iOS 11 simply use the edges of the corresponding superview.
        NSString *actualFormat = [format stringByReplacingOccurrencesOfString:@"<|" withString:@"|"];
        actualFormat = [actualFormat stringByReplacingOccurrencesOfString:@"|>" withString:@"|"];
        return [NSLayoutConstraint constraintsWithVisualFormat:actualFormat options:opts metrics:metrics views:views];
    }

    //
    // OK, iOS 11+ time.
    // For simplicity we replace our special symbols with a reference to a stub view, feed the updated format string
    // to the system, and then replace every reference to our stub view with a corresponding reference to safeAreaLayoutGuide.
    //

    UIView *stub = [[UIView alloc] init];
    static NSString * const stubKey = @"__MMMLayoutStub";
    NSString *stubKeyRef = [NSString stringWithFormat:@"[%@]", stubKey];
    NSDictionary *extendedViews = [@{ stubKey : stub } mmm_extendedWithDictionary:views];

    NSString *actualFormat = [format stringByReplacingOccurrencesOfString:@"<|" withString:stubKeyRef];
    actualFormat = [actualFormat stringByReplacingOccurrencesOfString:@"|>" withString:stubKeyRef];

    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:actualFormat options:opts metrics:metrics views:extendedViews];

    NSMutableArray *processedConstraints = [[NSMutableArray alloc] init];
    for (NSLayoutConstraint *c in constraints) {
        UIView *firstView = c.firstItem;
        UIView *secondView = c.secondItem;
        NSLayoutConstraint *processed;
        if (firstView == stub) {
            if (![secondView isKindOfClass:[UIView class]]) {
                NSAssert(NO, @"We only support UIView with <| and |> anchors, got %@", secondView.class);
                continue;
            }
            processed = [self
                constraintWithItem:secondView.superview.safeAreaLayoutGuide attribute:_MMMOppositeAttribute(c.firstAttribute)
                relatedBy:c.relation
                toItem:secondView attribute:c.secondAttribute
                multiplier:c.multiplier constant:c.constant
                priority:c.priority
                identifier:@"MMMSafeAreaFirstItemConstraint"
            ];
        } else if (secondView == stub && [firstView isKindOfClass:[UIView class]]) {
            if (![firstView isKindOfClass:[UIView class]]) {
                NSAssert(NO, @"We only support UIView with <| and |> anchors, got %@", secondView.class);
                continue;
            }
            processed = [self
                constraintWithItem:firstView attribute:c.firstAttribute
                relatedBy:c.relation
                toItem:firstView.superview.safeAreaLayoutGuide attribute:_MMMOppositeAttribute(c.secondAttribute)
                multiplier:c.multiplier constant:c.constant
                priority:c.priority
                identifier:@"MMMSafeAreaSecondItemConstraint"
            ];
        } else {
            processed = c;
        }
        [processedConstraints addObject:processed];
    }

    return processedConstraints;
}

+ (instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1
    relatedBy:(NSLayoutRelation)relation
    toItem:(id)view2 attribute:(NSLayoutAttribute)attr2
    multiplier:(CGFloat)multiplier constant:(CGFloat)c
    priority:(UILayoutPriority)priority
    identifier:(NSString *)identifier
{
    NSLayoutConstraint *result = [NSLayoutConstraint constraintWithItem:view1 attribute:attr1 relatedBy:relation toItem:view2 attribute:attr2 multiplier:multiplier constant:c];
    result.priority = priority;
    result.identifier = identifier;
    return result;
}

// @end

static inline NSLayoutAttribute _MMMOppositeAttribute(NSLayoutAttribute a) {
    switch (a) {
        // TODO: support trailing/leading in the same way
        case NSLayoutAttributeLeft:
            return NSLayoutAttributeRight;
        case NSLayoutAttributeRight:
            return NSLayoutAttributeLeft;
        case NSLayoutAttributeTop:
            return NSLayoutAttributeBottom;
        case NSLayoutAttributeBottom:
            return NSLayoutAttributeTop;
        // These two are special cases, we see them when align all X or Y flags are used.
        case NSLayoutAttributeCenterY:
            return NSLayoutAttributeCenterY;
        case NSLayoutAttributeCenterX:
            return NSLayoutAttributeCenterX;
        // Nothing more.
        default:
            NSCAssert(NO, @"We don't expect other attributes here");
            return a;
    }
}

@interface NSDictionary (MMMUtil)
- (NSDictionary *)mmm_extendedWithDictionary:(NSDictionary *)d;    
@end

@implementation NSDictionary (MMMUtil)

- (NSDictionary *)mmm_extendedWithDictionary:(NSDictionary *)d {

    if (!d || [d count] == 0)
        return self;

    NSMutableDictionary *result = [[NSMutableDictionary alloc] initWithDictionary:self];
    [result addEntriesFromDictionary:d];
    return result;
}

@end

答案 2 :(得分:9)

我知道它不是VFL,但是有一个名为NSLayoutAnchor的工厂类可以使创建约束更简洁明了。

例如,我能够用一条紧凑的线将UILabel的顶部锚固定到安全区域的顶部锚点:

label.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor).isActive = true

请注意,safeAreaLayoutGuide需要iOS 11.对于旧版本,请将self.view.safeAreaLayoutGuide.topAnchor替换为self.topLayoutGuide.bottomAnchor

同样,我知道它不是VFL,但这似乎是我们现在拥有的。

答案 3 :(得分:0)

虽然您目前无法创建相对于安全区域的视觉约束,但可以将安全区域包括在约束中。例如:

int safeInsetTop = self.view.safeAreaInsets.top;
int safeInsetBottom = self.view.safeAreaInsets.bottom;
NSString *verticalConstraints = [NSString stringWithFormat:@"V:|-%d-[myView]-%d-|", safeInsetTop, safeInsetBottom];
constraints = [NSLayoutConstraint constraintsWithVisualFormat:verticalConstraints options:0 metrics:nil views:viewsDictionary];

比理想情况更冗长,但有效且合理。