Làm cách nào tôi có thể sử dụng Autolayout để đặt các ràng buộc trên UIScrollview của mình?


176

Tôi đã dành hai ngày để thử các giải pháp khác nhau cho các cách tiếp cận Tự động hỗn hợp và thuần túy để đạt được một thiết lập cuộn xem tầm thường trước khi tự động thanh toán, và giờ nó đã chính thức - tôi phải quá ngu ngốc. Tôi đang thiết lập phần lớn trong Storyboard (vâng, nó chỉ là như vậy).

Vì vậy, đây là lời cầu xin của tôi để được giúp đỡ.

Lượt xem:

UIView
-UIView
-UIView
..-UIScrollview
...-UIButton
...-UIButton
...-UIButton

Các nút được cho là cuộn theo chiều ngang (trái sang phải và ngược lại). Ai đó có thể vui lòng cho tôi biết cách đặt các ràng buộc để đạt được điều này bằng cách sử dụng Autolayout thuần túy không ???

-

Tôi đã thử cách tiếp cận hỗn hợp, như vậy:

UIView
- UIView
- UIView
..-UIScrollview
...-UIView (contentview)
....-UIButton
....-UIButton
....-UIButton

... và đặt các ràng buộc về chiều rộng và chiều cao cố định cho contentviewvà các translatesAutoresizingMaskIntoConstraintscài đặt theo TechNote của Apple. Các nút và scrollview được thiết lập bằng cách sử dụng các ràng buộc. Điều này nhận được cuộn scrollview (yay) nhưng than ôi, nó cuộn quá xa! Theo như tôi có thể nói, độ rộng cuộn bằng cách nào đó được nhân đôi so với những gì tôi đặt nội dung xem tại ??? !!! ???

Tôi cũng đã thử cách tiếp cận tự động hoàn toàn, cả có contentviewvà không. Tất cả các quan điểm là translatesAutoresizingMaskIntoConstraints=NO, ngoại trừ self.view. Các nút có các ràng buộc về chiều rộng / chiều cao cố định và được ghim vào tất cả bốn cạnh của cuộn xem. Không có gì cuộn.

Vì vậy, tôi hoàn toàn bối rối tại sao tôi không thể làm cho nó hoạt động chính xác. Bất kỳ trợ giúp được đánh giá cao, và nếu bạn cần bất kỳ thông tin khác, xin vui lòng hỏi!

CẬP NHẬT Ảnh chụp màn hình với giải pháp - ràng buộc buttonZ:

nhập mô tả hình ảnh ở đây

EDIT @ Jamie Forrest Vì vậy, giải pháp hóa ra là ràng buộc sai ở nút cuối cùng. Thay vì 6441, giá trị tôi đã đặt là âm, -6441. Điều khó khăn là, khi đặt giá trị trong bảng phân cảnh, có hai tùy chọn trong thanh công cụ Ghim:

nhập mô tả hình ảnh ở đây

Giá trị Canvas hiện tại là âm (dẫn đến không có cuộn) và tùy chọn bên dưới là dương (kích hoạt cuộn). Điều này có nghĩa là tôi không ngu ngốc nhưng ít nhất là tôi bị mù một nửa. Mặc dù, để bảo vệ tôi, không có gì đáng lo ngại khi XCode không hiển thị lỗi cho cài đặt "không chính xác"?

EDITED LẠI Bây giờ điều này thật buồn cười ... thay đổi giá trị theo dõi từ -6441 (không cuộn) thành cuộn kích hoạt 6441. Nhưng người bạn cũ của tôi "quá nhiều nội dung" đã trở lại, dẫn đến kích thước nội dung lớn gấp đôi so với những gì nó cần phải có! Giải pháp để có được cuộn nội dung chính xác là đặt ràng buộc theo dõi thành ZERO! Điều này không rõ ràng khi làm việc trong Storyboard nhưng nhìn vào mã của @Infinity James, đó là những gì nó phải như vậy.


Nơi bạn tính toán / đặt kích thước nội dung cho chế độ xem cuộn của bạn? Đề cập đến lần thử đầu tiên của bạn bằng cách sử dụng contentView và bạn nói rằng nó cuộn quá xa.
Tim

2
Theo như tôi biết, bạn không thể thiết lập contentSizecủa một UIScrollViewsử dụng bố trí tự động mà thôi. Và đó là contentSizeđịnh nghĩa bạn có thể cuộn bao nhiêu. Vì vậy, cuối cùng bạn sẽ phải thiết lập thủ công ở đâu đó. Đối với phần còn lại, bạn có thể sử dụng các ràng buộc bố cục để thiết lập các khung nhìn tương đối với nhau.
Guillaume

@Jeff, kích thước nội dung là cố định, nó không bao giờ thay đổi. Tôi đặt kích thước nội dung trong bảng phân cảnh bằng cách nhập chính xác chiều cao và chiều rộng cho nội dung theo cách thủ công và tôi ghim chiều cao và chiều rộng bằng các ràng buộc trong bảng phân cảnh.
dùng1459524

In ra nội dung của bạn Kích thước trong thời gian chạy, xem nếu nó phù hợp với các giá trị bạn có đầu vào. ContentSize xác định số lượng cuộn xảy ra, do đó, vấn đề với lần thử đầu tiên của bạn là liên quan đến contentSize.
Tim

@Guillaume, vậy phương pháp "tự động thanh toán thuần túy" rốt cuộc không phải là thuần túy sao? Nhưng làm cách nào để thiết lập kích thước nội dung theo cách thủ công? Như tôi đã đề cập ở trên, tôi đang đặt chiều cao / chiều rộng của chế độ xem nội dung ở các giá trị cố định (trong bảng phân cảnh). Nhưng nó cuộn quá xa (2x).
dùng1459524

Câu trả lời:


68

Thật khó để thấy các giá trị chính xác và thiết lập các ràng buộc của bạn khi bạn dán chúng ở đây, vì vậy tôi không chắc chắn khi nhìn vào ảnh chụp màn hình của bạn, nơi bạn đã sai.

Thay cho lời giải thích về những gì sai trong thiết lập của bạn, tôi đã tạo một dự án mẫu cơ bản với hệ thống phân cấp chế độ xem và ràng buộc rất giống với thiết lập mà bạn mô tả. Cuộn ngang hoạt động như mong đợi trong dự án mẫu, sử dụng phương pháp "Pure AutoLayout" mà Apple mô tả trong Ghi chú kỹ thuật .

Tôi cũng gặp nhiều rắc rối khi bắt đầu sử dụng Giao diện tự động UIScrollView. Chìa khóa để khiến nó hoạt động là đảm bảo rằng tất cả các mục trong chế độ xem cuộn, được ghép lại với nhau, có các ràng buộc cuối cùng liên kết với tất cả các mặt của chế độ xem cuộn và điều đó góp phần giúp hệ thống AutoLayout có thể xác định kích thước nội dung cho xem cuộn sẽ lớn hơn khung của nó. Có vẻ như bạn đang cố gắng thực hiện điều đó trong mã của mình, nhưng có lẽ bạn đã có một số ràng buộc không cần thiết trong đó khiến cho kích thước nội dung quá nhỏ.

Cũng cần lưu ý, như những người khác đã đề cập, với AutoLayout và UIScrollview, bạn không còn đặt nội dung Kích thước rõ ràng nữa. Hệ thống AutoLayout tính toán kích thước nội dung dựa trên các ràng buộc của bạn.

Tôi cũng thấy chương ebook này rất hữu ích trong việc khiến tôi hiểu cách thức hoạt động của tất cả những thứ này. Hy vọng tất cả điều này sẽ giúp.


2
CẢM ƠN BẠN cho dự án mẫu! Nó hoạt động, và trong khi xem qua nó, tôi không thể tìm thấy bất kỳ sự khác biệt nào cho dự án của tôi lúc đầu! Tôi đã sao chép các khung nhìn vào dự án của mình, nghi ngờ một số cài đặt khác ngoài các ràng buộc, nhưng nó vẫn tiếp tục hoạt động. Điều này khiến tôi nhận thấy rằng ràng buộc kéo dài cho nút cuối cùng trong dự án của tôi có một tiêu cực - ở phía trước của nó, trong khi của bạn có một giá trị tích cực! Thay đổi - thành tích cực cho phép cuộn! Khi tôi hiển thị thanh công cụ Ghim, có hai lựa chọn: Sử dụng giá trị Canvas hiện tại là giá trị âm và Chế độ xem cuộn (sử dụng giá trị hiện tại) là dương ...?!
dùng1459524

À, vâng. Giá trị âm thực sự sẽ làm cho kích thước nội dung của chế độ xem cuộn nhỏ hơn, để phù hợp với thực tế là cạnh đuôi phải kết thúc trước khi nút kết thúc. Vui mừng các dự án mẫu đã giúp!
Jamie Forrest

Nó đã làm rất nhiều. Kiểm tra câu trả lời cập nhật của tôi. Giá trị theo dõi thực sự phải là 0 (không).
dùng1459524

6
Đó là điều đáng buồn chúng ta phải chia sẻ ảnh chụp màn hình thay vì mã. Đó chỉ là vì apple khuyến khích các nhà phát triển sử dụng trình xây dựng thay vì cung cấp api tốt hơn.
Vladimír Slavík

4
Hoàn toàn không trực quan. Các nhà phát triển phải phung phí hàng giờ để tìm hiểu những gì đang diễn ra trên XCode, những người tạo ra tâm trí.
Josh

49

LOL chào mừng đến với câu lạc bộ ngu ngốc. Tôi là một trong những người sáng lập. : D

Đối với cuộn CHỨNG : cách duy nhất tôi có thể làm cho nó hoạt động (iOS 8, Xcode 6 và tự động thanh toán thuần túy) là thêm các ràng buộc sau vào Chế độ xem cuộn của tôi (tất cả đều liên quan đến giám sát):

  • Chiều rộng bằng nhau
  • Cao bằng
  • Căn giữa Y
  • Căn giữa X

Cấu trúc của tôi:

  UIView
   - ScrollView
    - Subview
    - Subview
    - Subview
    - Subview
    - ...

Đây là kết quả cuối cùng:

Bản giới thiệu

Đây là thiết lập:

Thiết lập Toàn màn hình

Và đây là dự án .

Hy vọng rằng điều này sẽ cứu ai đó khỏi ĐI VÀO 5 giờ sáng. : D


Cảm ơn rất nhiều vì sự giúp đỡ! Làm thế nào bạn có được subview loại "subview" ?? Tôi đang xem dự án của bạn trong Xcode 6.2 và nó gọi những hình chữ nhật nhỏ đó là "Subview" với ràng buộc duy nhất là nó cao 63px.
Andrew K

1
Lời chào hỏi! "Subview" đó thực sự là một UIVIew. Đó chỉ là một cái tên ... Bạn có thể gõ bất cứ thứ gì ở đó. Kiểm tra hình ảnh này: cl.ly/image/291f1K2N0V3p Về chủ đề ràng buộc, các bài phỏng vấn có nhiều hơn chỉ là một hạn chế về chiều cao. Kiểm tra toàn bộ danh sách ràng buộc cho các chế độ xem tại đây: cl.ly/image/3l061i123j2i
backslash-f

1
Tôi vẫn không thể làm cho cuộn hoạt động - Tôi nhận thấy rằng các lượt xem phỏng vấn của bạn bị "mờ đi" trong dự án của bạn. Sau khi thực hiện một số nghiên cứu, có vẻ như điều này là do bạn đang sử dụng 'các lớp kích thước'. Điều này ảnh hưởng đến việc cuộn như thế nào? Có cách nào để cuộn hoạt động mà không sử dụng cái này không?
Andrew K

Ngoài ra, làm thế nào bạn làm cho giám sát của bạn dài hơn nhiều so với chiều dài mặc định? Tôi đang cố gắng thêm các nút sẽ xuất hiện "bên dưới màn hình" (hoặc tắt màn hình) nhưng rõ ràng tôi không thể thêm chúng vào giám sát nếu tôi không thể kéo và thả chúng vào giám sát vì nó không đủ lớn.
Andrew K

1
Sau một ngày dài tìm kiếm và cố gắng thực hiện bố cục ngu ngốc này, tôi đã tìm thấy câu trả lời này và làm việc ngay lần thử đầu tiên .. Cảm ơn người đàn ông .. bạn đã cứu ngày của tôi .. Tôi ước tôi có thể bỏ phiếu cho câu trả lời này ..: )
Bobby Stenly

32

Ví dụ đơn giản tự chứa

Đánh giá bằng số phiếu cao cho câu hỏi và số phiếu thấp cho câu trả lời, mọi người không tìm thấy giải pháp dễ hiểu và nhanh chóng ở đây. Hãy để tôi thử thêm một. Dự án này là một ví dụ độc lập được thực hiện hoàn toàn trong Trình tạo giao diện. Bạn sẽ có thể làm việc trong vòng 10 phút hoặc ít hơn. Sau đó, bạn có thể áp dụng các khái niệm bạn đã học cho dự án của riêng bạn.

nhập mô tả hình ảnh ở đây

Câu hỏi ban đầu hỏi về các nút cuộn. Ở đây tôi chỉ sử dụng UIViews nhưng chúng có thể đại diện cho bất kỳ chế độ xem nào bạn thích. Tôi cũng chọn cuộn ngang vì ảnh chụp màn hình bảng phân cảnh nhỏ gọn hơn cho định dạng này. Các nguyên tắc là giống nhau cho cuộn dọc, mặc dù.

Ý chính

  • Chỉ UIScrollViewnên sử dụng một subview. Đây là một 'UIView' đóng vai trò là chế độ xem nội dung để giữ mọi thứ bạn muốn cuộn.
  • Làm cho chế độ xem nội dung và cha mẹ của chế độ xem cuộn có chiều cao bằng nhau để cuộn ngang. (Chiều rộng bằng nhau để cuộn dọc)
  • Đảm bảo rằng tất cả các nội dung có thể cuộn có chiều rộng được đặt và được ghim ở tất cả các mặt.

Bắt đầu một dự án mới

Nó có thể chỉ là một ứng dụng xem duy nhất.

Bảng phân cảnh

Trong ví dụ này, chúng tôi sẽ thực hiện chế độ xem cuộn ngang. Chọn Trình điều khiển xem và sau đó chọn Biểu mẫu miễn phí trong Trình kiểm tra kích thước. Tạo chiều rộng 1,000và chiều cao 300. Điều này chỉ cung cấp cho chúng tôi chỗ trên bảng phân cảnh để thêm nội dung sẽ cuộn.

nhập mô tả hình ảnh ở đây

Thêm chế độ xem cuộn

Thêm một UIScrollViewvà ghim tất cả bốn phía vào chế độ xem gốc của bộ điều khiển xem.

nhập mô tả hình ảnh ở đây

Thêm chế độ xem nội dung

Thêm một UIViewdưới dạng xem dưới dạng xem cuộn. Đây là chìa khóa. Đừng cố thêm nhiều lượt xem vào chế độ xem cuộn. Chỉ cần thêm một UIView. Đây sẽ là chế độ xem nội dung của bạn cho các chế độ xem khác mà bạn muốn cuộn. Ghim chế độ xem nội dung vào chế độ xem cuộn ở cả bốn phía.

nhập mô tả hình ảnh ở đây

Cao bằng

Bây giờ trong Outline Document, Commandbấm cả hai quan điểm nội dung và giao diện cuộn của xem cha mẹ để chọn cả hai. Sau đó đặt độ cao bằng nhau ( Controlkéo từ Chế độ xem nội dung sang Chế độ xem cuộn). Đây cũng là chìa khóa. Vì chúng tôi đang cuộn theo chiều ngang, nên chế độ xem nội dung của chế độ xem cuộn sẽ không biết nó sẽ cao đến mức nào trừ khi chúng tôi đặt nó theo cách này.

nhập mô tả hình ảnh ở đây

Ghi chú:

  • Nếu chúng tôi thực hiện cuộn nội dung theo chiều dọc, thì chúng tôi sẽ đặt chiều rộng của chế độ xem nội dung bằng với chiều rộng của phụ huynh của chế độ xem cuộn.

Thêm nội dung

Thêm ba UIViews và cung cấp cho họ tất cả các ràng buộc. Tôi đã sử dụng lề 8 điểm cho tất cả mọi thứ.

nhập mô tả hình ảnh ở đây

Các ràng buộc:

  • Chế độ xem màu xanh lá cây: ghim các cạnh trên, trái và dưới. Làm chiều rộng 400.
  • Chế độ xem màu đỏ: ghim các cạnh trên, trái và dưới. Tạo chiều rộng 300.
  • Chế độ xem màu tím: ghim tất cả bốn cạnh cạnh. Tạo chiều rộng cho dù không gian còn lại là bao nhiêu (trong trường hợp này là 268).

Đặt các ràng buộc về chiều rộng cũng là chìa khóa để chế độ xem cuộn biết mức độ xem nội dung của nó sẽ rộng như thế nào.

Đã kết thúc

Đó là tất cả. Bạn có thể chạy dự án của bạn bây giờ. Nó nên hoạt động giống như hình ảnh cuộn ở đầu câu trả lời này.

Để cuộn dọc, chỉ cần trao đổi tất cả các hướng chiều rộng và chiều cao trong ví dụ này (đã được thử nghiệm và hoạt động).

Học cao hơn


9

ContentSize được đặt hoàn toàn bằng cách áp dụng các ràng buộc bên trong UIScrollView.

Ví dụ: bạn có UIScrollView bên trong UIView, nó sẽ trông như thế này (vì tôi chắc chắn bạn biết):

    UIView *containerView               = [[UIView alloc] init];
    UIScrollView *scrollView            = [[UIScrollView alloc] init];
    [containerView addSubview:scrollView];
    containerView.translatesAutoresizingMaskIntoConstraints = NO;
    scrollView.translatesAutoresizingMaskIntoConstraints    = NO;
    NSDictionary *viewsDictionary       = NSDictionaryOfVariableBindings(containerView, scrollView);

    [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scrollView]|"
                                                                          options:kNilOptions
                                                                          metrics:nil
                                                                            views:viewsDictionary]];
    [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scrollView]|"
                                                                          options:kNilOptions
                                                                          metrics:nil

Điều đó sẽ đặt scrollView để lấp đầy kích thước của containerView (vì vậy containerView sẽ phải có kích thước nhất định).

Sau đó, bạn có thể điều chỉnh kích thước nội dung của UIScrollView bằng cách đặt ngầm định nó đủ lớn để giữ các nút như thế này:

    UIButton *buttonA                   = [[UIButton alloc] init];
    UIButton *buttonB                   = [[UIButton alloc] init];
    UIButton *buttonC                   = [[UIButton alloc] init];
    [scrollView addSubview:buttonA];
    [scrollView addSubview:buttonB];
    [scrollView addSubview:buttonC];
    buttonA.translatesAutoresizingMaskIntoConstraints       = NO;
    buttonB.translatesAutoresizingMaskIntoConstraints       = NO;
    buttonC.translatesAutoresizingMaskIntoConstraints       = NO;

    viewsDictionary                     = NSDictionaryOfVariableBindings(scrollView, buttonA, buttonB, buttonC);

    [scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[buttonA]-|"
                                                                       options:kNilOptions
                                                                       metrics:nil
                                                                         views:viewsDictionary]];
    [scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[buttonA]-[buttonB]-[buttonC]-|"
                                                                       options:NSLayoutFormatAlignAllBaseline
                                                                       metrics:nil
                                                                         views:viewsDictionary]];

Vì vậy, tôi đặt các ràng buộc giữa scrollView và các nút, chứ không phải containerView và các nút? Tôi nghĩ đó là về sự khác biệt duy nhất tôi đang thể hiện mã của bạn và những gì tôi đang làm thông qua bảng phân cảnh ngay bây giờ.
dùng1459524

Tôi chỉ nhận ra sau khi đọc lần thứ hai rằng bạn đang thiết lập CONTAINERview chứ không phải là NỘI DUNG. Dựa trên mã của bạn, tôi đã tạo lại mọi thứ chính xác trong bảng phân cảnh và nó không cuộn. Tôi sẽ chỉnh sửa câu hỏi của tôi với một số ảnh chụp màn hình.
dùng1459524

1
Vì vậy, hóa ra nỗ lực của tôi để tạo lại mã trong bảng phân cảnh là không chính xác 100%. Giá trị theo dõi cho nút cuối cùng phải chính xác bằng 0, phản chiếu H: | - [buttonA] - [buttonB] - [buttonC] - | Điều đó không rõ ràng khi làm việc trong bảng phân cảnh (hoặc ít nhất là với tôi) nhưng bây giờ sau khi thực tế có vẻ tầm thường. Tôi thích tự động thanh toán nhưng những điều nhỏ nhặt đó có được ...
user1459524

Những gì @ user1459524 đã đề cập là một vấn đề đối với tôi. Chế độ xem dưới cùng của tôi là một nút và ràng buộc dưới cùng là -32 bởi IB. Tôi đặt giá trị đó thành 0 và nó được cập nhật trong IB thành Không gian dưới cùng thành: giám sát. Nó sẽ hoạt động, cũng có vẻ như miễn là bạn ở khía cạnh tích cực thì nó hoạt động. Có vẻ như đó có thể là một lỗi với IB. Hy vọng rằng sẽ giúp người khác. Tôi cũng đã xóa tất cả các chế độ xem và quay lại giúp ích khi cố gắng đưa ra những quan điểm này mà tôi tìm thấy và nó thường không mất nhiều thời gian.
Michael

8

Có rất nhiều câu hỏi về việc sử dụng AutoLayout với UIScrollView, điểm quan trọng mà chúng tôi bỏ qua là các chế độ xem bên trong của UIScrollView tạo ra các ràng buộc đối với Chế độ xem nội dung chứ không phải chính UIScrollView. Tham khảo Lưu ý kỹ thuật TN2154 , bạn có thể tìm thấy:

Lớp UIScrollView cuộn nội dung của nó bằng cách thay đổi nguồn gốc của giới hạn của nó. Để thực hiện công việc này với Bố cục tự động, các cạnh trên, trái, dưới và phải trong chế độ xem cuộn giờ có nghĩa là các cạnh của chế độ xem nội dung của nó.

Hình dưới đây sẽ mô tả rằng: nhập mô tả hình ảnh ở đây

Bạn có thể tìm thấy không gian dấu là 500 điểm, nếu ràng buộc được thực hiện đối với UIScrollView, chế độ xem sẽ bị bỏ lỡ và sẽ được cập nhật khung của nó. Tuy nhiên, không có cảnh báo và không có lỗi. Bởi vì tất cả các ràng buộc đều chống lại chế độ xem nội dung.

UIScrollView sẽ tính toán kích thước của chế độ xem nội dung theo các ràng buộc của chế độ xem bên trong. (Ví dụ: kích thước nội dung: width = 100 (không gian hàng đầu) + 200 (chiều rộng của chế độ xem) + 500 (không gian theo dõi), height = 131 (khoảng cách trên cùng) + 200 (chiều cao) + 269 (khoảng cách dưới cùng)

Cách thêm các ràng buộc cho các khung nhìn trong UIScrollView:

  1. Hình ảnh các vị trí của chế độ xem trong chế độ xem nội dung.
  2. Thêm khoảng cách trên cùng, bên phải, dưới cùng, bên trái vào các cạnh của chế độ xem nội dung, ngoài ra, cũng là chiều rộng và chiều cao của các chế độ xem này.

Và tất cả đã xong.

Một cách dễ dàng để đối phó với AutoLayout với scrollview là thêm chế độ xem container chứa tất cả các lần xem trong chế độ xem cuộn.

Kết luận: điểm mấu chốt để hiểu AutoLayout với UIScrollView là các chế độ xem bên trong tạo ra các ràng buộc đối với chế độ xem nội dung chứ không phải chính UIScrollView.

mã ví dụ đính kèm


5

Giải pháp sau đây hoạt động với tôi cho scrollView với autolayout và không có contentSize :

  1. Kéo n thả một cuộn Xem để xem Trình điều khiển và áp dụng bất kỳ ràng buộc nào để che khoảng trống bạn muốn.
  2. Kéo n thả một UIView bên trong scrollView và làm cho nó bao phủ toàn bộ không gian của scrollView và áp dụng các ràng buộc cho không gian trên cùng, bên trái, bên phải, dưới cùng từ scrollView.
  3. Đặt chiều cao (và chiều rộng nếu cần cuộn ngang) của chế độ xem bên trong theo nhu cầu cuộn. Phần này cũng có thể được thực hiện từ mã nếu được yêu cầu.
  4. Quan trọng . Sau khi bạn đặt chiều cao thành một số giá trị lớn ở điểm (3), quay lại điểm (2) và chắc chắn đặt giá trị trên cùng, bên trái, bên phải, dưới cùng về 0 vì Xcode có thể đã thay đổi chúng cho bạn khi bạn buộc thay đổi chiều cao trong (3).

Và bạn đã hoàn thành. Bây giờ, bạn có thể thêm bất kỳ số điều khiển nào vào chế độ xem này và áp dụng các ràng buộc có liên quan với nhau (dường như không hoạt động nếu không có chế độ xem này). Nếu bạn không muốn sử dụng chế độ xem này thì bạn sẽ phải áp dụng các ràng buộc cho từng điều khiển liên quan đến scrollView (không liên quan đến nhau).


Mẹo áp đảo ..............

Quan trọng . Hãy nói rõ ràng rằng UIScrollView rộng 1000 và cao 100. (Trong thực tế, thông thường các giá trị này sẽ là động, tất nhiên, tùy thuộc vào độ rộng của thiết bị, v.v. Nhưng bây giờ chỉ cần nói 1000 rộng và 100 cao.) Giả sử bạn đang thực hiện cuộn ngang. Vì vậy, đặt một UIView bên trong UIScrollView. (Đó là "chế độ xem nội dung".) Đặt tất cả bốn ràng buộc của chế độ xem nội dung trên cùng, dưới cùng, dẫn đầu, theo dõi, cho chế độ xem cuộn. Làm cho tất cả bằng không ngay cả khi điều đó có vẻ sai. Đặt chiều cao của nội dung UIView thành 100 và quên nó đi. Bây giờ: bạn muốn cuộn theo chiều ngang, vì vậy hãy đặt chiều rộng của chế độ xem nội dung thành 1225.

Lưu ý rằng chiều rộng của chế độ xem nội dung hiện lớn hơn 225 so với chiều rộng của chế độ xem cuộn gốc. Điều đó ổn: trên thực tế, bạn PHẢI làm điều đó. Lưu ý rằng

... bạn KHÔNG đặt chiều rộng theo sau thành âm 225 ...

bạn sẽ nghĩ rằng bạn phải "khớp" chiều rộng như bình thường . Nhưng nếu bạn làm điều đó, nó sẽ không hoạt động.

Bạn phải đặt các số dẫn đầu và dấu thành số KHÔNG , không bao giờ âm (mặc dù chiều rộng là "lớn hơn")

Thật thú vị, bạn thực sự có thể đặt các số dẫn đầu / dấu theo bất kỳ giá trị dương nào (thử nói "50") và nó mang lại cho bạn một mức độ chênh lệch của độ nảy. (Nó thường trông rất tuyệt: hãy thử nó.) Bất kỳ giá trị âm nào ở hai đầu sẽ "âm thầm phá vỡ".

Lưu ý rằng, cực kỳ tức giận, thường là Xcode (kể từ 7.3.1),

sẽ 'hữu ích' đặt các giá trị đó cho bạn thành số âm!

bởi vì nó cố gắng tự động kiểm đếm chúng cho bạn. Nếu vậy nó sẽ âm thầm phá vỡ. Đặt tất cả bốn giá trị về 0 trong trường hợp đầu tiên. Và đặt chiều rộng của chế độ xem nội dung rộng hơn nhiều so với "1000" trong ví dụ.


Đã chỉnh sửa: Tôi đã kết thúc với việc sử dụng UITableView thay vì UIScrollView cho hầu hết các yêu cầu của tôi. Như bảngView dường như linh hoạt và năng động hơn nhiều.


Đây thực sự là câu trả lời tốt nhất ở đây. Cảm ơn!
Fattie

4

Tôi giả sử bạn đang gặp vấn đề với contentSize. Kiểm tra bài đăng trên blog này về cách xử lý contentSizekhi sử dụng phương pháp AutoLayout "thuần túy". Điểm chính của nó là các ràng buộc của bạn ngầm định nghĩa kích thước nội dung. Bạn KHÔNG BAO GIỜ đặt nó rõ ràng khi sử dụng AutoLayout. Tôi đã đính kèm dự án ví dụ ở cuối bài viết trên blog để chứng minh cách thức hoạt động của nó


3

Có một phần trong các ghi chú công nghệ mà bạn có thể đã xem qua. Bạn có thể đặt ngầm định kích thước nội dung của chế độ xem cuộn bằng các ràng buộc cố định với các cạnh của chế độ xem cuộn.

Đây là một ví dụ đơn giản. Tạo bảng phân cảnh với một chế độ xem, có một chế độ xem cuộn. Đặt các ràng buộc về chế độ xem cuộn để làm cho nó phù hợp với kích thước của chế độ xem mà bạn đặt.

Trong chế độ xem cuộn đó thêm một chế độ xem. Đặt rõ ràng kích thước của chế độ xem đó bằng các ràng buộc (và đảm bảo rằng kích thước đó lớn hơn chế độ xem cuộn).

Bây giờ thêm bốn ràng buộc nữa cho chế độ xem bên trong đó khóa bốn cạnh của chế độ xem bên trong vào chế độ xem cuộn chính của nó. Bốn ràng buộc đó sẽ khiến kích thước nội dung mở rộng để phù hợp với chế độ xem bên trong.

Nếu bạn có nhiều chế độ xem bạn muốn thêm vào chế độ xem cuộn, ví dụ như được đặt theo chiều ngang, bạn sẽ khóa bên trái của chế độ xem phụ đầu tiên ở bên trái của chế độ xem cuộn, khóa các chế độ xem cho nhau theo chiều ngang và bên phải bên của chế độ xem phụ cuối cùng ở bên phải của chế độ xem cuộn. Những ràng buộc đó sẽ buộc kích thước nội dung của chế độ xem cuộn phải mở rộng để phù hợp với tất cả các cuộc phỏng vấn và các ràng buộc của chúng.


3

Nếu câu hỏi của bạn là "Làm cách nào để đặt một loạt UITextField trong UIScrollView cuộn theo chiều dọc để chúng di chuyển ra khỏi bàn phím khi chúng tập trung", thì câu trả lời tốt nhất là:

Đừng.

Sử dụng một UITableViewControll với các ô tĩnh thay thế.

Bạn nhận được hành vi cuộn ngoài luồng này miễn phí, VÀ tất cả các nội dung được chèn Chỉ hoạt động nếu trình điều khiển chế độ xem của bạn được hiển thị bên trong Trình điều khiển UINavestion.


3

Bạn nên sắp xếp bố cục của bạn như thế này
ViewControllerViewchứa ScrollView, ScrollViewchứa ContainerView, ContainerViewchứa 2Labels
nhập mô tả hình ảnh ở đây

Sau đó làm theo 3 bước để làm cho bạn ScrollViewcó thể cuộn

  1. Đặt ScrollViewpin (trên / phải / dưới / trái) thànhViewControllerView
    • Đặt ContainerViewpin (trên / phải / dưới / trái) thànhScrollView
    • Đặt Horizontally in Container( không đặt Vertically in Container)
    • Label1ghim ( trên / phải / trái) đểContainerView
    • Label1pin (phải / trái / dưới ) để ContainerViewđầu đểLabel1

nhập mô tả hình ảnh ở đây

ĐÂY là dự án demo

Hy vọng điều này giúp đỡ


1

Cách tiếp cận tự động thanh toán thuần túy hoạt động rất đẹp nhưng khá khó để thiết lập nếu bạn di chuyển từ không tự động thanh toán. Tôi đã thực hiện nó một vài lần và tôi có một vài lời khuyên chung:

  • Bắt đầu nhỏ: ngay cả khi điều đó có nghĩa là tái tạo các chế độ xem bảng phân cảnh của bạn, hãy bắt đầu chỉ bằng một vài yếu tố và xây dựng các chế độ xem của bạn từ từ, đảm bảo kiểm tra việc cuộn đó hoạt động sau khi thêm một vài yếu tố.
  • Tắt translatesAutoresizingMaskIntoConstraint về mọi thứ: đây luôn là nguyên nhân của xung đột ràng buộc đối với tôi.
  • Đặt các ràng buộc UIScrollView của bạn đúng cách: đảm bảo chế độ xem cuộn được kết nối ở tất cả các phía với chế độ xem chính, nếu không nó sẽ không mở rộng chút nào.

1

Sau một thời gian xử lý vấn đề này, cuối cùng tôi cũng tìm được giải pháp. Tôi đang làm việc với bảng phân cảnh kích thước lớp phổ quát (600x600). Tôi đã tạo một UIView (contentView) kích thước của scrollView và tạo các ràng buộc đối với Top, bottom, Dẫn đầu và Trailing cho scrollView. Sau đó, tôi cắt kích thước thủ công của contentView thành 600x600. Bảng phân cảnh đã ngừng cố gắng thay đổi kích thước mọi thứ và tôi có thể làm việc nhưng chế độ xem trông khủng khiếp trên thiết bị thực hoặc trình giả lập. Tôi đã thực hiện 2 cửa hàng ràng buộc của kích thước cắt này.

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *contentViewWidthConstraint; 
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *contentViewHeightConstraint;

Sau đó, trong viewDidLoad

CGSize viewSize = self.view.frame.size;
self.contentViewWidthConstraint.constant = viewSize.width;
self.contentViewHeightConstraint.constant = viewSize.height;

Công trình tuyệt vời.


1

Tôi đã dành nhiều ngày cố gắng tìm giải pháp về cách sử dụng AutoLayout để xem Scrollview được nhúng, để đặt giữa chế độ xem trong màn hình hiển thị, hoạt động trên tất cả các kích thước màn hình / thiết bị cũng như xoay màn hình.

Tôi đã dành nhiều ngày cố gắng để làm điều đó chỉ với Autolayout, và đã gần nhưng không bao giờ đủ gần. Vì vậy, cuối cùng tôi cũng phải thêm 3 dòng mã trên mỗi màn hình, trong viewDidLoad.

Xem giải pháp dưới đây:

  1. Tạo scrollview và điền nó với bất kỳ đối tượng nào bạn muốn
  2. Bật bố trí tự động
  3. Sau đó, trung tâm ScrollView theo chiều dọc và ngang Trung tâm ScrollView
  4. Chọn Chế độ xem và sau đó 'Thêm các ràng buộc bị thiếu' - sau đó thực hiện công việc của nó
  5. Kết quả là rất nhiều ràng buộc được tạo ra. Có 2 cái mới được tạo cho chế độ xem: 'Horiz space scrollview to View' và 'Vert space scrollview to view' hoặc ngược lại.
  6. Xóa 'Chế độ xem không gian Horiz để xem' để bạn hiện có 3 ràng buộc trên Chế độ xem. 2 để nhập scrollview trong chế độ xem và một để đặt không gian dọc giữa chế độ xem cuộn và chế độ xem
  7. Bây giờ liên kết ràng buộc Vert với mã của bạn bằng cách nhấp và Ctrl kéo nó vào tệp tiêu đề và tạo NSLayoutConstraint IBOutlet (Tôi đã gọi là ràng buộc của tôiVertVtoSV)
  8. Bây giờ hãy vào tệp .m và thêm các dòng mã này vào viewDidLoad (chơi với số lượng đệm để có được định tâm chính xác)

    if (IPAD)

    {self.constraintVertVtoSV.constant = 150.0; }

  9. bây giờ nó sẽ chạy trên tất cả các thiết bị và được căn giữa đúng cách và vẫn cuộn đúng cách.


1

Nếu giống như tôi, bạn chỉ cần sử dụng nội dung tĩnh mà không có counstraint bên trong khung nhìn phụ, giống như bạn có thể làm như thế này:

override func viewDidLayoutSubviews() {
    scrollView.contentSize = CGSizeMake(320, 800)
}

1

Vấn đề tương tự tôi gặp phải hôm nay với iOS 8.4, Xcode 6.4

Có một chế độ xem chứa chế độ xem cuộn, chứa nội dung Xem (UIView) có chứa các mục xem xét.

Tất cả mọi thứ là tự động bố trí ở khắp mọi nơi. Các cạnh của scrollview được ghim vào các cạnh của khung nhìn cha với các ràng buộc. Các cạnh xem nội dung được ghim vào các cạnh xem cuộn với các ràng buộc.

Ban đầu, chế độ xem nội dung sẽ từ chối kích thước là toàn bộ chiều rộng của chế độ xem cuộn. Tôi đã phải thêm một ràng buộc bổ sung vào chế độ xem nội dung để có chiều rộng của nó khớp với chế độ xem cuộn gốc. Hoặc tôi có thể đặt ràng buộc contentView.centerX == scrollView.centerX. Một trong những thứ đó ngoài việc ghim các cạnh đột nhiên làm cho nội dung xem đúng kích thước.

// Either one of these additional constraints are required to get autolayout to correctly layout the contentView. Otherwise contentView size is its minimum required size
scrollView.addConstraint(NSLayoutConstraint(item: contentView, attribute: .CenterX, relatedBy: .Equal, toItem: scrollView, attribute: .CenterX, multiplier: 1.0, constant: 0))
scrollView.addConstraint(NSLayoutConstraint(item: contentView, attribute: NSLayoutAttribute.Width, relatedBy: .Equal, toItem: scrollView, attribute: .Width, multiplier: 1.0, constant: 0.0))

Ghim các cạnh của chế độ xem nội dung vào chế độ xem cuộn bằng các ràng buộc trực quan của biểu mẫu,

let cvConstraints = ["H:|[contentView]|", "V:|[contentView]|"]

Tôi sử dụng một thói quen để lặp qua mảng và thêm chúng vào scrollView.


1

Tôi phải đối mặt với một vấn đề tương tự. Tôi đặt mọi ràng buộc và luôn tự hỏi tại sao nó vẫn thay đổi kích thước một số bài phỏng vấn. Giải pháp của tôi là đặt clipToBound thành CÓ.


1

Trong swift bạn có thể sử dụng giải pháp làm việc này.

Chống chỉ định

ScrollView: Dẫn đầu, Trailing, Top, bottom = Superview

ContentView: Dẫn đầu, Trailing, Top, bottom = ScrollView. Chiều cao cố định / liên quan đến nội dung.

Bạn có thể đặt ràng buộc độ rộng (contentView) thành giám sát cuộn xem bằng nhau, nhưng chọn loại bỏ loại bỏ thời gian xây dựng vì bạn sẽ thêm ràng buộc đó theo chương trình. Đây chỉ là để IB không phàn nàn với các cảnh báo.

extension UIView {

    func setupContentViewForViewWithScroll(contentView vwContent : UIView) {
        //Set constraint for scrollview content
        let constraint = NSLayoutConstraint(item: vwContent, attribute: NSLayoutAttribute.Width, relatedBy: .Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: self.bounds.size.width)
        vwContent.addConstraint(constraint)
        self.layoutSubviews()
    }

}

Và trong View Controller viewDidLayoutSubviewstôi chỉ cần gọi phương thức này:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    self.view.setupContentViewForViewWithScroll(contentView: vwContent)
}

0

Tôi biết đây là giải pháp của giáo dân chứ không phải những gì Apple gợi ý trong tài liệu, nhưng nó hoạt động với tôi hai lần, với nội dung khác nhau và có thể được thiết lập rất nhanh: Trong trình điều khiển chế độ xem bảng phân cảnh chèn UIView. Trong UIView chèn Chế độ xem bảng, Động, 0 ô nguyên mẫu, Kiểu đồng bằng hoặc được nhóm. Trong Chế độ xem bảng chèn một Chế độ xem cuộn, trong Chế độ xem cuộn chèn nội dung. Đó là, không có cài đặt trong trình điều khiển xem tùy chỉnh.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.