UIScrollView Kích thước nội dung có thể cuộn


510

Các thành viên, tôi gặp sự cố với AutoLayout trong Interface Builder (Xcode 5 / iOS 7). Nó rất cơ bản và quan trọng vì vậy tôi nghĩ mọi người nên biết cách hoạt động của nó. Nếu đây là một lỗi trong Xcode, thì đây là một lỗi nghiêm trọng!

Vì vậy, bất cứ khi nào tôi có một hệ thống phân cấp xem như thế này, tôi gặp rắc rối:

>UIViewController
>> UIView
>>>UIScrollView
>>>>UILabel (or any other comparable UIKit Element)

UIScrollView có các ràng buộc vững chắc, ví dụ: 50 px từ mọi phía (không có vấn đề gì). Sau đó, tôi thêm một ràng buộc Không gian hàng đầu vào UILabel (không có vấn đề gì) (và tôi thậm chí có thể ghim chiều cao / chiều rộng của nhãn, không thay đổi gì, nhưng không nên xử lý do kích thước nội tại của Nhãn)

Rắc rối bắt đầu khi tôi thêm một ràng buộc theo dõi vào UILabel:

Ví dụ: Trailing Space to: Superview Bằng: 25

Bây giờ có hai cảnh báo xảy ra - và tôi không hiểu tại sao:

A) Sự mơ hồ về kích thước nội dung có thể cuộn (Chế độ xem cuộn có chiều cao / chiều rộng nội dung có thể cuộn mơ hồ)

B) Lượt xem bị đặt sai (Nhãn dự kiến: x = -67 Thực tế: x = 207

Tôi đã làm ví dụ tối thiểu này trong một dự án mới mà bạn có thể tải xuống và tôi đã đính kèm một ảnh chụp màn hình. Như bạn có thể thấy, Trình tạo giao diện hy vọng Nhãn sẽ nằm ngoài ranh giới của UIScrollView (hình chữ nhật nét đứt màu cam). Cập nhật khung của Nhãn bằng Công cụ giải quyết vấn đề sẽ di chuyển nó ngay tại đó.

Xin lưu ý: Nếu bạn thay thế UIScrollView bằng UIView, hành vi sẽ như mong đợi (khung của Nhãn là chính xác và theo ràng buộc). Vì vậy, dường như có một vấn đề với UIScrollView hoặc tôi đang bỏ lỡ điều gì đó quan trọng.

Khi tôi chạy Ứng dụng mà không cập nhật khung của Nhãn như được đề xuất bởi IB, nó được đặt ở vị trí tốt, chính xác là vị trí của nó và UIScrollView có thể cuộn được. Nếu tôi cập nhật khung, Nhãn sẽ khuất tầm nhìn và UIScrollView không cuộn.

Giúp tôi Obi-Wan Kenobi! Tại sao bố trí mơ hồ? Tại sao quan điểm không đúng chỗ?

Bạn có thể tải xuống dự án mẫu tại đây và thử xem bạn có thể biết chuyện gì đang xảy ra không: https://github.com/Wirsing84/AutoLayoutPro Hiệu

Minh họa vấn đề trong Interface Builder


8
Hãy thử đặt UILabel trong chế độ xem nội dung, sau đó đặt cạnh đuôi của nhãn thành chế độ xem nội dung (UIView thông thường). Video này có thể giúp bạn rất nhiều: youtube.com/watch?v=PgeNPRBrB18&feature=youtu.be
erdekhayser

1
Video tuyệt vời nhưng nó đã không sửa các cảnh báo cho tôi. :(
Ông Rogers

Cảm ơn bạn rất nhiều về video - có (khá ngạc nhiên) khá nhiều tôi đã học được từ nó! Tuy nhiên, khi tôi kết hợp kiến ​​thức của video với stackoverflow.com/questions/18953617/, tôi có thể sửa các cảnh báo. Câu hỏi còn lại là: Làm thế nào để làm cho kích thước contentView của scrollView chỉ lớn đến mức cần thiết?
Wirsing

Hãy xem video này . Nó cho thấy cách sử dụng UIScrollLayout và autolayout với XCode 5 / iOS 7.
vui vẻ

Đề nghị của tôi là không sử dụng UIScrollViewtrực tiếp. Thay vì sử dụng UICollectionViewhoặc UITableViewcàng nhiều càng tốt, hầu hết mọi thứ đều có thể với các yếu tố này và nó cũng mang lại sự đơn giản, dễ đọc và tái sử dụng !!!
SPatel

Câu trả lời:


1093

Vì vậy, tôi chỉ sắp xếp theo cách này:

  1. Bên trong UIScrollView thêm mộtUIView (chúng ta có thể gọi đó contentView);

  2. Trong trường hợp này contentView, đặt lề trên, dưới, trái và phải thành 0 (tất nhiên từ scrollViewđó là superView); Đặt cũng căn chỉnh trung tâm theo chiều ngang và chiều dọc ;

Đã kết thúc .

Bây giờ bạn có thể thêm tất cả các chế độ xem của mình vào đó contentViewvà quan contentSizeđiểm scrollViewsẽ được tự động thay đổi kích thước theocontentView .

Cập nhật:

Một số trường hợp đặc biệt được bao phủ bởi video này được đăng bởi @Sergio trong các bình luận bên dưới.


33
Gần như hoàn hảo, ngoại trừ việc xem cuộn có thể không còn đoán được độ dài của nội dung của bạn và thay đổi kích thước cho phù hợp với nội dung của nó để phù hợp với các đối tượng bên trong. Tôi có chế độ xem bảng bên trong nội dung Xem có thay đổi chiều cao (thông qua ràng buộc) và chế độ xem cuộn không cho phép tôi cuộn.
CyberMew 11/05/2015

28
Có lẽ video này có thể giúp khắc phục tất cả các vấn đề còn lại.
Sergio

46
Điều này không làm cho nó cuộn tho.
dorian

2
@MatteoGobbi Thế thôi! Nó đã lừa Đã phải vật lộn với loại vấn đề này của scrollView autoLayout điên rồ trong 2 ngày .... Cảm ơn bạn ạ !!!
polo987

56
Đối với bất kỳ ai gặp phải vấn đề với ScrollView không thể cuộn được, việc đặt đáy và căn chỉnh trung tâm ràng buộc theo chiều dọc với mức độ ưu tiên thấp đã là mẹo cho tôi!
jimmy0251

98

Lỗi này khiến tôi mất một lúc để theo dõi, ban đầu tôi đã thử ghim kích thước của ScrollView nhưng thông báo lỗi ghi rõ "kích thước nội dung". Tôi chắc chắn rằng mọi thứ tôi ghim từ đầu ScrollView cũng được ghim xuống phía dưới. Bằng cách đó, ScrollView có thể tính toán chiều cao nội dung của nó bằng cách tìm chiều cao của tất cả các đối tượng & ràng buộc. Điều này đã giải quyết được chiều cao nội dung không rõ ràng, chiều rộng khá giống nhau ... Ban đầu tôi có hầu hết mọi thứ X tập trung trong ScrollView, nhưng tôi cũng phải ghim các đối tượng sang một bên của ScrollView. Tôi không thích điều này vì iPhone6 ​​có thể có màn hình rộng hơn nhưng nó sẽ loại bỏ lỗi 'độ rộng nội dung mơ hồ'.


31
Cảm ơn bạn vì câu trả lời! Nếu tôi hiểu bạn một cách chính xác, bạn đạt được để loại bỏ lỗi bằng cách ghim từng và mọi khung nhìn trong ScrollView lên trên cùng và dưới cùng. Tuy nhiên, điều này là không cần thiết. Bạn chỉ cần đảm bảo rằng có một cách để tạo một dòng ràng buộc liên tục từ trên xuống dưới cùng của cuộn xem. [-XXX] Tôi hy vọng điều đó có thể hiểu được;>
Wirsing

1
Làm thế nào để khắc phục vấn đề nếu chế độ xem có độ cao thay đổi? Làm cách nào để thiết lập các ràng buộc sau đó để scrollview có thể tính toán kích thước?
hashier

2
'Bạn chỉ cần đảm bảo rằng có một cách để tạo ra một dòng ràng buộc liên tục từ đầu đến cuối cuộn giấy' <- cảm ơn vì câu đó
Adam Waite

3
Điều giúp tôi là đảm bảo chế độ xem cuộn được ghim vào giám sát và không phải là hướng dẫn bố cục trên cùng hoặc dưới cùng. Tôi đã loại bỏ các ràng buộc cho hướng dẫn bố cục dưới cùng và đi qua menu thay vì trình tạo giao diện. Trình chỉnh sửa -> Ghim -> Không gian dưới cùng để Superview.
Alberto Lopez

2
Nếu bạn muốn chiều rộng của cuộn xem đi theo chiều rộng của màn hình điện thoại của bạn hoặc bất kỳ yếu tố nào khác trong Giao diện người dùng của bạn (như UIView có chứa), bạn cần đặt "chiều rộng bằng nhau" trên nó bằng cách sử dụng một yếu tố khác nằm ngoài cuộn xem để đo.
Departamento B

89

Xcode 11+

Cách đơn giản nhất sử dụng autolayout:

  1. Thêm UIScrollViewvà ghim nó 0,0,0,0vào giám sát (hoặc kích thước mong muốn của bạn)
  2. Thêm UIViewvào ScrollView, ghim nó 0,0,0,0vào tất cả 4 mặt và căn giữa nó horizontallyvertically.
  3. Trong trình kiểm tra kích thước, thay đổi bottomalign center Yưu tiên thành 250. (đối với thay đổi cuộn ngang trailingalign center X)
  4. Thêm tất cả các khung nhìn mà bạn cần vào khung nhìn này. Đừng quên đặt ràng buộc dưới cùng ở chế độ xem thấp nhất.
  5. Chọn UIScrollView, chọn thanh tra kích thước và bỏ chọn Content Layout Guides.

1
Tôi không thể đặt chiều cao nội dung của scrollview nhưng nó hoạt động. :)
Ninja mù

2
Gợi ý: theo tôi nó chỉ hoạt động, nếu tôi loại bỏ trung tâm theo chiều ngang và chiều dọc và thay thế nó bằng chiều rộng bằng nhau (scrollView + view bên trong scrollView) VÀ thêm chiều cao dựa trên nội dung, có nghĩa là phần tử cuối cùng của chế độ xem cần ràng buộc dưới cùng. Xem tại đây để biết thêm thông tin: stackoverflow.com/a/54577278/5056173
Sean Ở lại

1
Sean, tôi đang sử dụng điều này theo nghĩa đen mỗi ngày và tôi chưa bao giờ gặp vấn đề với phương pháp này khi nói đến cuộn cuộn dọc và ngang. Có lẽ bạn đã quên đặt một ràng buộc dưới cùng cho phần tử thấp nhất / cuối cùng. Không có điều đó, điều này sẽ không hoạt động.
Đorđe Nilović

7
Điểm số 4 - câu thứ hai là câu lớn.
Nitish

2
câu trả lời này hoàn toàn phù hợp với tôi
satvinder singh

63

Đó là câu trả lời cho câu hỏi tự trả lời của tôi UIScrollView + Chế độ xem trung tâm + Kích thước nội dung có thể cuộn mơ hồ + nhiều kích thước iPhone .

Nhưng nó hoàn toàn bao gồm trường hợp của bạn quá!

Vì vậy, đây là trạng thái ban đầu cho trường hợp đơn giản nhất:

  1. scrollView với 0 ràng buộc cho tất cả các cạnh
  2. Nút nằm giữa và ngang với chiều rộng và chiều cao cố định ràng buộc
  3. Và, tất nhiên - cảnh báo gây phiền nhiễu Has ambiguous scrollable content widthHas ambiguous scrollable content height.

1

Tất cả, điều chúng ta phải làm là:

  • Thêm 2 ràng buộc bổ sung, ví dụ "0" cho dấu vết và / hoặc không gian dưới cùng cho chế độ xem của chúng tôi (xem ví dụ trên ảnh chụp màn hình bên dưới).

Quan trọng: bạn phải thêm các ràng buộc dưới và / hoặc dưới cùng . Không phải "hàng đầu và hàng đầu" - nó không hoạt động!

2

Bạn có thể kiểm tra nó trong dự án ví dụ của tôi , minh họa cách khắc phục vấn đề này.

PS

Theo logic - hành động này sẽ gây ra "các ràng buộc xung đột". Nhưng không!

Tôi không biết lý do tại sao nó hoạt động và cách Xcode phát hiện ràng buộc nào được ưu tiên hơn (vì tôi không đặt ưu tiên cho các ràng buộc này. Tôi sẽ biết ơn nếu ai đó giải thích, tại sao nó hoạt động trong các bình luận bên dưới.


Mẹo tuyệt vời! Cuối cùng tôi chỉ tạo ra một ràng buộc cho cạnh dưới và đặt mức độ ưu tiên ở mức trung bình hoặc thấp
Dean

Ồ Điều này nghiêm túc không có ý nghĩa gì nhưng hoạt động! Cảm ơn bạn! Mục cuối cùng tôi có trong chế độ xem của mình, tôi đặt giới hạn dưới là 0 và BANG. Cuối cùng cũng làm việc.
Jakob Hviid

60

Xcode 11+, Swift 5

Nếu bạn đang tự hỏi tại sao tất cả các câu trả lời không hoạt động nữa, hãy đảm bảo rằng bạn đã ghim chế độ xem nội dung (cái bạn đã đặt trong chế độ xem cuộn) vào Hướng dẫn bố cục nội dung của chế độ xem cuộn và KHÔNG cho Hướng dẫn bố cục khung.

Không nên ghim các cạnh xem nội dung (hàng đầu, dấu, trên, dưới) như dẫn trên hình ảnh - vào Hướng dẫn bố cục khung

Không như thế này

nhưng như thế này - để Hướng dẫn bố cục nội dung.

Chọn Hướng dẫn bố cục nội dung từ danh sách thả xuống

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

Và sau đó hầu hết các câu trả lời sẽ làm việc cho bạn.

Cách tiếp cận đơn giản nhất bây giờ là như thế này:

  1. Đặt chế độ xem cuộn trong chế độ xem gốc
  2. Ghim tất cả các mặt của chế độ xem cuộn vào giám sát
  3. Lấy một UIView khác (sẽ gọi nó là chế độ xem nội dung) và đặt nó vào trong chế độ xem cuộn
  4. Ghim tất cả các mặt của chế độ xem nội dung để cuộn Hướng dẫn bố cục nội dung
  5. Ghim chiều rộng của chế độ xem nội dung bằng với Hướng dẫn bố cục khung của chế độ xem cuộn
  6. Khắc phục chiều cao của nội dung xem theo bất kỳ cách nào bạn muốn (Tôi chỉ sử dụng ràng buộc chiều cao không đổi trong ví dụ bên dưới)

Nhìn chung, cấu trúc của bạn trong việc thực hiện đơn giản nhất sẽ như thế này

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


@WantToKnow Không cần phải hạn chế về chiều cao, chỉ cần thay đổi mức độ ưu tiên của nó thành thấp (250)
Reckoner

Xcode 11+, Swift 5. Theo câu trả lời của @WantToKnow, tôi đã giải quyết vấn đề của mình, tôi đã chuẩn bị [video] [1] và [code] [2] [1]: youtube.com/watch?v=qMrH5_Yj5hM [2]: github.com/AhmAbdallah/CustomCollectionView
Ahmed Abdallah

1
Đây là một câu trả lời tuyệt vời, cảm ơn bạn.
Constantine

1
Đây là câu trả lời đúng. Cảm ơn.
Vincent Joy

Điều này chỉ hiệu quả với tôi khi tôi thêm ràng buộc dưới cùng vào thành phần cuối cùng của chế độ xem nội dung
D.Zotov

49

Bạn cần tạo một UIViewtiểu cảnh UIScrollViewnhư được mô tả dưới đây:

  • UIViewController
  • UIView 'Quan điểm chính'
    • UIScrollView
      • UIView 'Xem container'
        • [Nội dung của bạn]

Bước thứ hai là thực hiện các UIScrollViewràng buộc. Tôi đã làm điều này với các ràng buộc trên, dưới, dẫn và theo dõi đối với superView của nó.

Tiếp theo tôi đã thêm các ràng buộc cho vùng chứa UIScrollViewvà đây là nơi vấn đề bắt đầu. Khi bạn đặt các ràng buộc tương tự (trên cùng, dưới cùng, dẫn đầu và theo dõi), Storyboard sẽ đưa ra một thông báo cảnh báo:

"Có chiều rộng nội dung có thể cuộn mơ hồ" và "Có chiều cao nội dung có thể cuộn mơ hồ"

Tiếp tục với các khó khăn tương tự ở trên, và chỉ cần thêm những ràng buộc Equal HeightEqual Widthcho bạn container Xem liên quan đến chính Xemkhông để bạn UIScrollView. Nói cách khác, các ràng buộc của Container View được gắn vớiUIScrollView của.

Sau đó, bạn sẽ không có cảnh báo trong Storyboard của mình và bạn có thể tiếp tục thêm các ràng buộc cho các bài phỏng vấn của mình.


2
Đồng ý - Tôi nghĩ rằng thêm chế độ xem container là giải pháp tốt nhất, dễ bảo trì nhất.
Andrew Eble

1
Giải pháp này sẽ hoạt động khi bạn không có thanh điều hướng để quản lý.
Leena

26

Tôi gặp vấn đề tương tự. Bỏ chọn hộp kiểm này. Vì bạn đang đặt kích thước nội dung trong mã. nhập mô tả hình ảnh ở đây


24

Cuối cùng tôi đã tìm ra điều này, tôi hy vọng điều này dễ hiểu hơn.

Bạn thường có thể bỏ qua cảnh báo đó bằng cách thêm UIView cơ bản vào chế độ xem cuộn dưới dạng "chế độ xem nội dung", như họ đã đề cập và làm cho nó có cùng kích thước với chế độ xem cuộn của bạn và trên chế độ xem nội dung này, đặt 6 tham số này.

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

Như bạn thấy, bạn cần tổng cộng 6 tham số! Mà trong các trường hợp thông thường, bạn đang nhân đôi 2 ràng buộc nhưng đây là cách để tránh lỗi bảng phân cảnh này.


1
Ở trên hầu như làm việc với tôi, vì tôi lo lắng về 3 độ rộng màn hình khác nhau (4/5, 6, 6+) Tôi đặt chế độ xem nội dung và chế độ xem cuộn để có chiều rộng bằng nhau. Bạn nói đúng, đó là một bản sao vì tôi đã nói với chế độ xem nội dung có 0 không gian dẫn và kết thúc.
Stuart P.

8
Bạn có thể đặt các ràng buộc về chiều rộng và chiều cao bằng nhau từ chế độ xem nội dung sang chế độ xem cuộn, thay vì các giá trị không đổi. Điều này sẽ làm việc trên tất cả các nghị quyết.
Kumar C

Tôi phải thực hiện tương tự, vì vậy bạn có thể giúp tôi rằng tôi phải đặt chiều cao và chiều rộng bằng nhau cho cả chế độ xem nội dung và chế độ xem cuộn không?
Urmi

Có thể đáng để kiểm tra xem nếu bạn vẫn phải làm điều này. Tôi đã thiết lập một imageView trong một scrollview gần đây và có thể thoát khỏi chỉ với việc đặt 4 ràng buộc hiển thị ở trên cùng để làm cho lỗi biến mất trong Xcode 8.3
William T.

1
@Honey này đã được đăng hơn 3 năm trước. Họ chắc chắn đã cải thiện bảng phân cảnh kể từ đó. Tôi cũng nhận thấy rằng bạn có thể thoát khỏi mà không cần xem nội dung bây giờ. Tôi sẽ điều chỉnh câu trả lời của mình.
William T.

16

Tôi biết tôi có thể bị trễ, nhưng giải pháp tiếp theo giải quyết loại vấn đề này mà không cần thêm mã , chỉ sử dụng bảng phân cảnh:

Đối với chế độ xem nội dung của bạn, bạn cần đặt các ràng buộc cho không gian hàng đầu / dấu / trên / dưới thành cuộn xem và điều này sẽ không thay đổi khung nhìn nội dung , như sau:nhập mô tả hình ảnh ở đây

Tất nhiên bạn cần tạo các ràng buộc bổ sung cho chế độ xem nội dung để chế độ xem cuộn có thể biết kích thước nội dung. Ví dụ đặt chiều cao cố định và tâm x.

Hi vọng điêu nay co ich.


7

Đối với tôi thêm một contentViewkhông thực sự làm việc như đề xuất. Hơn nữa, nó tạo ra một chi phí do chế độ xem được thêm vào (mặc dù tôi không coi đây là một vấn đề lớn). Điều làm việc tốt nhất với tôi chỉ là tắt tính năng kiểm tra sự mơ hồ cho tôi scrollView. Mọi thứ đều được bố trí độc đáo nên tôi nghĩ nó ổn trong những trường hợp đơn giản như của tôi. Nhưng hãy nhớ rằng, nếu các ràng buộc khác cho bạn scrollViewnghỉ, Trình tạo giao diện sẽ không cảnh báo bạn thêm về điều đó.

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


5
Điều này sẽ chỉ loại bỏ cảnh báo và không làm gì để giải quyết vấn đề.
Manojlovic

Bạn. Chúng tôi. của tôi anh hùng. Không nhận ra điều này tồn tại và vui mừng khi tìm thấy nó! Tôi đã thử "Xác minh vị trí chỉ" mà bạn mong đợi, tôi không biết, chỉ xác minh vị trí nhưng không cho phép vấn đề "kích thước nội dung" lỗi này. Phải đi với "Không bao giờ xác minh". Cảm ơn!
Dustin

Tôi nghĩ rằng đây là câu trả lời đúng nếu bạn đang tạo chế độ xem trẻ theo chương trình. Cảm ơn!
Florian Kusche

6

Kiểm tra điều này thực sự nhanh chóng và hướng dẫn điểm về cách làm cho chế độ xem cuộn hoạt động và hoàn toàn có thể cuộn với bố cục tự động. Bây giờ, điều duy nhất vẫn còn khiến tôi bối rối là tại sao kích thước nội dung của chế độ xem cuộn luôn lớn hơn cần thiết ..

http://samwize.com/2014/03/14/how-to-use-uiscrollview-with-autolayout/


3

Xem bên dưới: chế độ xem nội dung trong cuộn dọc và ngang tập trung. bạn gặp lỗi không rõ ràng, luôn đảm bảo hai cái được thêm vào scrollview từ chế độ xem nội dung của bạn là 1) .bảng không gian đến vùng chứa.2) dấu cách để theo dõi ràng buộc được tô sáng trong ảnh chụp màn hình,

các ràng buộc này có nghĩa là trong cuộn là số lượng bạn có thể cuộn sau khi xem chiều cao hoặc chiều rộng của nội dung.

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

nó có thể giúp bạn


3

Tôi đã giải quyết loại vấn đề này cho chế độ xem của mình bằng cách sử dụng "Giải quyết các sự cố bố cục tự động"> "Thêm các ràng buộc bị thiếu" cho Chế độ xem được chọn nhập mô tả hình ảnh ở đây

Hai ràng buộc sau đây giải quyết vấn đề của tôi:

trailing = Stack View.trailing - 10
bottom = Stack View.bottom + 76

trong đó: trailing, bottom là trailing, bottom của UIScrollView


Điều này làm việc cho tôi bằng cách thêm một ràng buộc "xuống dưới". Bây giờ tôi nghĩ về nó, nó có ý nghĩa hoàn hảo.
SilverWolf - Phục hồi Monica

3

Sử dụng contentView ( UView) như bên trong thùng chứa UIScrollView, dính vào mép ( top, bottom, trailing, leading) của SuperView ( UIScrollView) và contentViewnên có equalwidthequalheightđể SuperView. Đó là những hạn chế. Và gọi phương thức:

-(void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    self.scrollView.contentSize = self.contentView.frame.size;
}

Giải quyết các vấn đề cho tôi.


3

Cách tiếp cận Swift 4+:

1) Đặt lề trên, dưới, trái và phải của UIScrollView thành 0

2) Bên trong UIScrollView thêm một UIView và đặt các lề trên, dưới, hàng đầu, theo sau thành 0 (bằng với lề UIScrollView).

3) Phần quan trọng nhất là đặt chiều rộng và chiều cao, trong đó ràng buộc về chiều cao phải có mức độ ưu tiên thấp .

private func setupConstraints() {

    // Constraints for scrollView
    scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

    // Constraints for containerView
    containerView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
    containerView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
    containerView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
    containerView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
    containerView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true

    let heightConstraint = containerView.heightAnchor.constraint(equalTo: scrollView.heightAnchor)
    heightConstraint.priority = UILayoutPriority(rawValue: 250)
    heightConstraint.isActive = true
}

2

Câu trả lời của @Matteo Gobbi là hoàn hảo, nhưng trong trường hợp của tôi, cuộn xem không thể cuộn, tôi xóa " căn chỉnh trung tâm Y " và thêm " height> = 1 ", cuộn xem sẽ có thể cuộn được


2

Những người đang vật lộn với uiscrollview không cuộn chỉ đặt giới hạn dưới cùng của chế độ xem nội dung của bạn với bố cục dưới cùng của chế độ xem cuối cùng (nằm trong chế độ xem nội dung của bạn). Đừng quên loại bỏ ràng buộc trung tâm Y.

Phần còn lại tất cả các ràng buộc giống như được xác định ở trên. Scrollview chỉ quan tâm đến việc lấy chiều cao tối đa từ chế độ xem nội dung của nó và chúng tôi đang đặt nó làm giới hạn dưới cùng của chế độ xem trước, điều đó có nghĩa là scrollview sẽ tự động thay đổi phần bù nội dung của nó.

Trong trường hợp của tôi, chế độ xem trước là UILable không có thuộc tính dòng = 0 (tự động điều chỉnh chiều cao tùy thuộc vào nội dung của nó) để nó tự động tăng chiều cao của uilable và cuối cùng diện tích có thể cuộn của chúng tôi tăng lên do bố cục dưới cùng của uilable được căn chỉnh với đáy của chế độ xem nội dung của chúng tôi, mà buộc scrollview để tăng bù nội dung của nó.


2

Tôi đã tạo một video trên youTube
Scroll StackViews chỉ bằng Storyboard trong Xcode

Tôi nghĩ rằng 2 loại kịch bản có thể xuất hiện ở đây.

Chế độ xem bên trong scrollView -

  1. không có bất kỳ kích thước nội dung bên trong (ví dụ UIView)
  2. không có kích thước nội dung riêng của nó (ví dụ UIStackView)

Để có chế độ xem theo chiều dọc trong cả hai trường hợp, bạn cần thêm các ràng buộc sau:

  1. 4 ràng buộc từ trên, trái, dưới và phải.

  2. Chiều rộng bằng với scrollview (để dừng cuộn theo chiều ngang)

Bạn không cần bất kỳ ràng buộc nào khác cho các chế độ xem có chiều cao nội dung nội tại của riêng mình.

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


Đối với các chế độ xem không có bất kỳ chiều cao nội dung nội tại nào, bạn cần thêm ràng buộc về chiều cao. Chế độ xem sẽ chỉ cuộn nếu giới hạn chiều cao lớn hơn chiều cao của scrollView.

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


2
import UIKit

class ViewController: UIViewController {

    //
    let scrollView: UIScrollView = {

        let sv = UIScrollView()
        sv.translatesAutoresizingMaskIntoConstraints = false
        return sv
    }()

    let lipsumLbl: UILabel = { // you can use here any of your subview

        let lbl = UILabel()
        lbl.translatesAutoresizingMaskIntoConstraints = false
        lbl.text = """
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend nisi sit amet mi aliquet, ut efficitur risus pellentesque. Phasellus nulla justo, scelerisque ut libero id, aliquet ullamcorper lectus. Integer id iaculis nibh. Duis feugiat mi vitae magna tincidunt, vitae consequat dui tempor. Donec blandit urna nec urna volutpat, sit amet sagittis massa fringilla. Pellentesque luctus erat nec dui luctus, sed maximus urna fermentum. Nullam purus nibh, cursus vel ex nec, pulvinar lobortis leo. Proin ac libero rhoncus, bibendum lorem sed, congue sapien. Donec commodo, est non mollis malesuada, nisi massa tempus ipsum, a varius quam lorem vitae nunc.

        Cras scelerisque nisi dolor, in gravida ex ornare a. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vitae nisl id erat sollicitudin accumsan sit amet viverra sapien. Etiam scelerisque vulputate ante. Donec magna nibh, pharetra sed pretium ac, feugiat sit amet mi. Vestibulum in ipsum vitae dui vehicula pulvinar eget ut lectus. Fusce sagittis a elit ac elementum. Fusce iaculis nunc odio, at fermentum dolor varius et. Suspendisse consectetur congue massa non gravida. Sed id elit vitae nulla aliquam euismod. Pellentesque accumsan risus dolor, eu cursus nibh semper id.

        Vestibulum vel tortor tellus. Suspendisse potenti. Pellentesque id sapien eu augue placerat dictum. Fusce tempus ligula at diam lacinia congue in ut metus. Maecenas volutpat tellus in tellus maximus imperdiet. Integer dignissim condimentum lorem, id luctus nisi maximus at. Nulla pretium, est sit amet mollis eleifend, tellus nulla viverra dolor, ac feugiat massa risus a lectus. Pellentesque ut pulvinar urna, blandit gravida ipsum. Nullam volutpat arcu nec fringilla auctor. Integer egestas enim commodo, faucibus neque ac, rutrum magna. Vivamus tincidunt rutrum auctor. Cras at rutrum felis. Fusce elementum lorem ut pharetra venenatis.
        """
        lbl.textColor = .darkGray
        lbl.font = UIFont.systemFont(ofSize: 16)
        lbl.numberOfLines = 0
        return lbl
    }()

    //======================================================================//
    //
    // MARK:- viewDidLoad
    //
    override func viewDidLoad() {
        super.viewDidLoad()

        setupViews()
        setupAutoLayout()
    }

    func setupViews() {

        title = "ScrollView Demo"
        view.backgroundColor = .white
        view.addSubview(scrollView)
        scrollView.addSubview(lipsumLbl)
    }

    func setupAutoLayout() {

        scrollView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        scrollView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

        lipsumLbl.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
        lipsumLbl.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        lipsumLbl.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        lipsumLbl.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        lipsumLbl.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
    }
}

Đầu ra:

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


Tại sao bạn cần hàng đầu khi bạn đã rời khỏiAnchor?
ShadowToD

leftAnchor không thể được sử dụng cho mục đích này, vì vậy chúng tôi sử dụng hàng đầu để đạt được điều tương tự ..
iAj

bạn đã sử dụng cả hai trong ví dụ của bạn.
ShadowToD

@ShadeToD hãy để tôi kiểm tra
iAj

2

Trong trường hợp của tôi, tôi đã nhận được vấn đề về kích thước nội dung và kích thước nội dung không chính xác Kích thước mơ hồ trong iPad nhưng đang hoạt động trong trường hợp của iPhone. Tôi đã thực hiện các thay đổi sau trong bảng phân cảnh để giải quyết vấn đề.

  1. Thêm scrollview trong UIView và thêm các ràng buộc hàng đầu, trên cùng, theo dõi và dưới cùng thành 0,0,0,0.
  2. Đặt chiều cao của chế độ xem cuộn theo yêu cầu, ví dụ: 100.
  3. Thêm UIView để xem cuộn và thêm các ràng buộc hàng đầu, trên cùng, theo dõi và dưới cùng thành 0,0,0,0 và căn chỉnh các ràng buộc trung tâm (X) và trung tâm (Y).
  4. Hướng dẫn chọn nội dung sắp xếp nội dung Hướng dẫn chọn kích thước của trình xem cuộn.

1

Di chuyển theo chiều dọc

  1. Thêm một UIScrollView với các ràng buộc 0,0,0,0 vào giám sát.
  2. Thêm một UIView trong ScrollView, với các ràng buộc 0,0,0,0 cho giám sát.
  3. Thêm ràng buộc chiều rộng tương tự cho UIView vào UIScrollView.
  4. Thêm chiều cao cho UIView.
  5. Thêm các yếu tố với các ràng buộc cho UIView.
  6. Đối với phần tử gần đáy nhất, hãy đảm bảo rằng phần tử này có ràng buộc với phần dưới của UIView.

0

Những gì tôi đã làm là tạo ra một chế độ xem nội dung riêng biệt như được hiển thị ở đây.

Chế độ xem nội dung là dạng tự do và có thể có tất cả các cuộc phỏng vấn được thêm vào nó với các ràng buộc riêng liên quan đến nội dung.

UIScrollView được thêm vào bộ điều khiển khung nhìn chính.

Về mặt lập trình, tôi thêm contentView được liên kết qua IBOutlet vào lớp và đặt contentView của UIScrollView.

UIScrollView với ContentView thông qua Trình tạo giao diện


0

Tôi đã nhận được cùng một lỗi .. tôi đã làm theo

  1. Xem (Giám sát)
  2. Cuộn xem 0,0,600,600
  3. UIView bên trong ScrollView: 0,0,600,600
  4. UIView chứa chế độ xem hình ảnh, nhãn

Bây giờ, thêm hàng đầu / dấu / trên / dưới cho scrollView (2) rồi UIView (3).

Chọn Xem (1) và Xem (3) đặt chiều cao và cân nặng bằng nhau .. nó đã giải quyết được vấn đề của tôi.

Tôi đã thực hiện video sẽ giúp:

https://www.youtube.com/watch?v=s-CPN3xZS1A


0

[đã thử nghiệm trong XCode 7.2 và cho iOS 9.2]

Điều ngăn chặn các lỗi và cảnh báo của Storyboard đối với tôi là đặt kích thước nội tại của chế độ xem cuộn và chế độ xem nội dung (trong trường hợp của tôi là stackview) thành Placeholder . Cài đặt này được tìm thấy trong Trình kiểm tra kích thước trong Storyboard. Và nó nói - Đặt kích thước nội dung bên trong thời gian thiết kế chỉ ảnh hưởng đến chế độ xem trong khi chỉnh sửa trong Trình tạo giao diện. Chế độ xem sẽ không có kích thước nội dung nội tại này khi chạy.

Vì vậy, tôi đoán rằng chúng ta sẽ không sai khi đặt điều này.

Lưu ý: Trong bảng phân cảnh, tôi đã ghim tất cả các cạnh của scrollview vào giám sát và tất cả các cạnh của stackview vào scrollview. Trong mã của tôi, tôi đã đặt translatesAutoresizingMaskIntoConstraint là sai cho cả scrollview và stackview. Và tôi đã không đề cập đến một kích thước nội dung. Khi stackview phát triển linh hoạt, các ràng buộc được đặt trong bảng phân cảnh đảm bảo rằng ngăn xếp có thể cuộn được.

Cảnh báo bảng phân cảnh khiến tôi phát điên và tôi không muốn tập trung mọi thứ theo chiều ngang hoặc chiều dọc chỉ để trấn áp cảnh báo.


0

Nếu bất cứ ai đang có một hành vi mà bạn nhận thấy thanh cuộn trên cuộn phải nhưng nội dung không di chuyển, thì thực tế này có lẽ đáng để xem xét:

Bạn cũng có thể sử dụng các ràng buộc giữa nội dung của chế độ xem cuộn và các đối tượng bên ngoài chế độ xem cuộn để cung cấp vị trí cố định cho nội dung của chế độ xem cuộn, làm cho nội dung đó dường như nổi trên chế độ xem cuộn.

Đó là từ tài liệu của Apple . Ví dụ: nếu bạn vô tình ghim Nhãn / Nút / Img / Chế độ xem hàng đầu của bạn vào chế độ xem bên ngoài khu vực cuộn (Có thể là một tiêu đề hoặc một cái gì đó ngay phía trên scrollView?) Thay vì contentView, bạn sẽ đóng băng toàn bộ nội dung của bạn.


0

Như đã đề cập trong các câu trả lời trước, bạn nên thêm chế độ xem tùy chỉnh bên trong chế độ xem cuộn:

Chế độ xem tùy chỉnh là ContentView được đánh dấu trong hình ảnh

Thêm tất cả các cuộc phỏng vấn của bạn để xem nội dung. Tại một số điểm bạn sẽ thấy chế độ xem nội dung cuộn có cảnh báo kích thước nội dung không rõ ràng, bạn nên chọn chế độ xem nội dung và nhấp vào nút "Giải quyết vấn đề bố cục tự động" (ở góc dưới bên phải của bố cục IB) và chọn "Thêm thiếu các ràng buộc "tùy chọn.

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

Từ giờ trở đi khi bạn chạy dự án, chế độ xem cuộn sẽ tự động cập nhật kích thước nội dung của nó, không cần thêm mã.


0

Bạn chỉ cần đảm bảo rằng có một cách để tạo một dòng ràng buộc liên tục từ trên xuống dưới cùng của cuộn xem. [-XXX]

Trong trường hợp của tôi - chế độ xem cuộn cuộn theo chiều ngang - Tôi cũng cần thêm các ràng buộc về chiều rộng và chiều cao cho từng con của chế độ xem cuộn, mặc dù ghi chú kỹ thuật của Apple không cho bạn biết điều này.



0

Nếu bạn vẫn gặp sự cố với UIScrollView, chỉ cần tắt Hướng dẫn bố cục nội dung (Chọn ScrollView trong Trình tạo giao diện xcode -> chọn Trình kiểm tra kích thước trong bảng bên phải -> bỏ chọn 'Hướng dẫn bố cục nội dung') Hoặc thử các bước sau: xcode 11 bố cục xem cuộn - nó có thể hữu ích cho phong cách bố trí mới. Hoạt động tốt ở macOS 10.15.2, Xcode 11.3.1, cho 05.02.2020

xem ảnh chụp màn hình


0

Sử dụng Autolayout

Thêm chế độ xem cuộn của bạn bên trong chế độ xem được xác định rõ và sau đó thêm chế độ xem ngăn xếp bên trong chế độ xem cuộn

Thêm các ràng buộc trên, trái, phải, dưới, giữa X và trung tâm Y từ chế độ xem cuộn và chế độ xem ngăn xếp vào chế độ xem siêu liên quan của chúng

Đảm bảo rằng các ràng buộc được liên kết từ chế độ xem ngăn xếp đến giám sát hợp lệ (scrollview) vì cài đặt mặc định hiện tại là thêm ràng buộc Align Top chứ không phải là Top Space.

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.