Autolayout nhầm lẫn: Những hạn chế cho scrollview với WebView và Header/Footer Lần

Question

Để minh họa cho vấn đề của tôi, tôi đã tạo ra đồ họa sau:

Các viền đen xung quanh quảng trường đỏ được cho là màn hình iPhone . Bên trong, chúng tôi có màu đỏ là UIScrollView, cao hơn màn hình. Đó là, trên thực tế, cao như một UIWebView, hiển thị ở trên màu vàng. UIWebView là chế độ xem phụ của UIScrollView, với tính năng cuộn đã tắt. Hơn nữa, chúng tôi có hai chế độ xem màu xanh, mà tôi muốn gọi các chế độ xem đầu trang và chân trang. Chúng cũng là các bản xem trước của UIScrollView, nhưng bên ngoài các giới hạn có thể cuộn được.

Vấn đề của tôi bây giờ là: Làm cách nào để định cấu hình ràng buộc bố cục tự động cho điều này?

Tôi đã quản lý để lấy ra các UIWebView chiều cao sử dụng code from this answer và sau đó cập nhật 's UIScrollViewcontentSize cho phù hợp. Tuy nhiên, đây không thực sự là một giải pháp tốt, bởi vì chiều rộng của UIWebView không phản ứng với thay đổi chiều rộng của UIScrollView.

Tôi cũng cố gắng thiết lập hạn chế bố trí quan điểm tiêu đề của như vậy (sử dụng Masonary):

[headerView makeConstraints:^(MASConstraintMaker *make) { 
    make.top.equalTo(@-100); 
    make.left.equalTo(@0); 
    make.width.equalTo(scrollView.width); 
    make.height.equalTo(@100); 
}]; 

Tuy nhiên, việc thiết lập bố trí quan điểm chân như thế này đã không làm việc:

[changeView makeConstraints:^(MASConstraintMaker *make) { 
    make.top.equalTo(scrollView.bottom) 
    make.left.equalTo(@0); 
    make.width.equalTo(scrollView.width); 
    make.height.equalTo(@100); 
}]; 

Tôi cảm thấy như thế này không thể quá khó khăn và sẽ đánh giá cao một số trợ giúp từ một ai đó quen thuộc hơn với bố cục tự động. Cảm ơn!

Answer 1

Trong Visual Format Language (VFL), những hạn chế sẽ là:

[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(-100)-[headerView(100)]" options:0 metrics:nil views:views]]; 
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[footerView(100)]-(-100)-|" options:0 metrics:nil views:views]]; 
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[headerView]|" options:0 metrics:nil views:views]]; 
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[footerView]|" options:0 metrics:nil views:views]]; 

Hoặc nếu bạn đang đi để thay thế @"V:[footerView(100)]-(-100)-|" VFL với constraintWithItem cuộc gọi, nó sẽ là:

[footerView addConstraint:[NSLayoutConstraint constraintWithItem:footerView 
                 attribute:NSLayoutAttributeHeight 
                 relatedBy:NSLayoutRelationEqual 
                  toItem:nil 
                 attribute:NSLayoutAttributeNotAnAttribute 
                 multiplier:1.0 
                 constant:100.0]]; 

[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:footerView 
                 attribute:NSLayoutAttributeBottom 
                 relatedBy:NSLayoutRelationEqual 
                  toItem:scrollView 
                 attribute:NSLayoutAttributeBottom 
                 multiplier:1.0 
                 constant:100.0]]; 

tôi không thể nói lý do tại sao thực hiện Masonary của bạn không hoạt động, vì tôi không quen thuộc với nó. Nhưng tôi sẽ thử một trong những điều trên và chắc chắn.

Thành thật mà nói, bạn mô tả chiều cao của chế độ xem web và tôi tự hỏi liệu bạn có đặt giới hạn chiều cao của chế độ xem web hay không hoặc bạn chỉ điều chỉnh giá trị frame.size.height (không tốt). Nhưng bạn chưa chia sẻ chi tiết về cách bạn đặt chiều cao của chế độ xem web, vì vậy tôi không thể nhận xét thêm.

Bất kể, nếu bạn có các vấn đề dựa trên ràng buộc, có hai kỹ thuật chẩn đoán hữu ích. Nếu nó vẫn không làm việc, tôi muốn chạy ứng dụng trên giả lập, tạm dừng nó, và sau đó tại (lldb) nhắc nhập:

po [[UIWindow keyWindow] _autolayoutTrace] 

Bạn sẽ thấy một cái gì đó như:

(lldb) po [[UIWindow keyWindow] _autolayoutTrace] 
$0 = 0x0715d6e0 
*<UIWindow:0x758aae0> 
| *<UIView:0x71630f0> 
| | *<UIScrollView:0x716a370> 
| | | *<HeaderView:0x716b860> 
| | | *<FooterView:0x716bbb0> 
| | | *<UIWebView:0x716c2b0> 
| | | | <_UIWebViewScrollView:0x7176a30> 
| | | | | ... 
| | | | | <UIWebBrowserView:0x797fe00> 
| | | <UIImageView:0x75e1360> 
| | | <UIImageView:0x75e2a60> 

Hãy chắc chắn rằng bạn không có bất kỳ cảnh báo nào.Nếu mọi thứ đều ok đó, sau đó tôi sau đó muốn sử dụng lệnh sau tại dấu nhắc (lldb):

po [[UIWindow keyWindow] recursiveDescription] 

Bạn sẽ thấy một cái gì đó như:

(lldb) po [[UIWindow keyWindow] recursiveDescription] 
$1 = 0x071c0ea0 <UIWindow: 0x758aae0; frame = (0 0; 320 568); autoresize = W+H; layer = <UIWindowLayer: 0x758b770>> 
    | <UIView: 0x71630f0; frame = (0 20; 320 548); autoresize = RM+BM; layer = <CALayer: 0x7163180>> 
    | | <UIScrollView: 0x716a370; frame = (0 0; 320 548); clipsToBounds = YES; gestureRecognizers = <NSArray: 0x716b1d0>; layer = <CALayer: 0x716ad20>; contentOffset: {0, 16}> 
    | | | <HeaderView: 0x716b860; frame = (0 -100; 320 100); layer = <CALayer: 0x716b910>> 
    | | | <FooterView: 0x716bbb0; frame = (0 564; 320 100); layer = <CALayer: 0x716bee0>> 
    | | | <UIWebView: 0x716c2b0; frame = (0 8; 320 548); layer = <CALayer: 0x716c360>> 
    | | | | <_UIWebViewScrollView: 0x7176a30; frame = (0 0; 320 548); clipsToBounds = YES; autoresize = H; gestureRecognizers = <NSArray: 0x7177000>; layer = <CALayer: 0x7176c80>; contentOffset: {0, 0}> 
    | | | | | ... 
    | | | | | <UIWebBrowserView: 0x797fe00; frame = (0 0; 1024 1754); gestureRecognizers = <NSArray: 0x7173260>; layer = <UIWebLayer: 0x716d7f0>> 
    | | | | | | ... 
    | | | <UIImageView: 0x75e1360; frame = (1 540; 318 7); alpha = 0; opaque = NO; autoresize = TM; userInteractionEnabled = NO; layer = <CALayer: 0x75e2980>> 
    | | | <UIImageView: 0x75e2a60; frame = (312 32.5; 7 530.5); alpha = 0; opaque = NO; autoresize = LM; userInteractionEnabled = NO; layer = <CALayer: 0x75e2b00>> 

Hãy nhìn vào kết quả khác nhau của bạn frame giá trị và xem chuyện gì đang xảy ra. Điều đó có thể giúp bạn chẩn đoán giải pháp. Bạn không cung cấp đủ thông tin để chúng tôi chẩn đoán vấn đề (bạn cho chúng tôi biết chân trang không hoạt động, nhưng bạn không cho chúng tôi biết nơi mà các ràng buộc của bạn đã kết thúc việc đặt nó). Nếu bạn thực hiện các lệnh trên, bạn có thể xác định chính xác nơi ràng buộc của bạn đã kết thúc đặt chân trang của bạn, và sau đó tìm ra cách khắc phục vấn đề từ đó.

Lưu ý, bạn sẽ thấy rằng headerView và footerView của tôi được hiển thị trong hai danh sách này đều là HeaderView và FooterView lớp thay vì UIView. Khi chẩn đoán các vấn đề ràng buộc, sẽ hữu ích nếu các khung nhìn chính có lớp riêng của chúng, vì vậy tôi đã xác định UIView các lớp con không thực hiện, nhưng nếu tôi sử dụng các lớp con duy nhất đó cho chế độ xem đầu trang và chân trang của mình, nó sẽ dễ dàng hơn để diễn giải kết quả của ở trên (lldb) lệnh.

@interface HeaderView : UIView 
@end 
@implementation HeaderView 
@end 

@interface FooterView : UIView 
@end 
@implementation FooterView 
@end