Cách sử dụng UIScrollView trong Storyboard

Tôi có chế độ xem cuộn với nội dung cao 1000px và muốn có thể bố trí nó để dễ dàng thiết kế trên bảng phân cảnh.
Tôi biết nó có thể được thực hiện theo chương trình nhưng tôi thực sự muốn có thể nhìn thấy nó một cách trực quan. Mỗi lần tôi đặt chế độ xem cuộn trên bộ điều khiển xem, nó sẽ không cuộn. Có thể làm cho nó hoạt động như tôi muốn hoặc tôi phải làm điều đó trong mã?

Tôi đang trả lời câu hỏi của riêng mình vì tôi chỉ mất 2 giờ để tìm giải pháp và StackOverflow cho phép kiểu QA này.

Bắt đầu để kết thúc ở đây là làm thế nào để làm cho nó hoạt động trong bảng phân cảnh.

1: đi đến bạn xem bộ điều khiển và bấm vào Attribute Inspector .

2: thay đổi kích thước thành Freeform thay vì suy ra.

3: Chuyển đến chế độ xem chính trên bảng phân cảnh đó, không phải chế độ xem cuộn của bạn mà là chế độ xem cấp cao nhất.

4: Nhấp Size Inspector và đặt chế độ xem này theo kích thước mong muốn của bạn. Tôi đã thay đổi chiều cao của tôi thành 1000.

Bây giờ bạn sẽ thấy rằng bảng phân cảnh của bạn có thiết lập chế độ xem của bạn để bạn có thể xem toàn bộ chiều cao của cuộn để thiết kế dễ dàng.

5: Thả trên một scrollview và kéo dài nó để nó chiếm toàn bộ khung nhìn. Bây giờ bạn sẽ có một cuộn xem với kích thước 320,1000 ngồi trên một khung nhìn trong bộ điều khiển xem của bạn.

Bây giờ chúng ta cần làm cho nó cuộn và cần làm cho nó hiển thị nội dung chính xác.

6: Nhấp vào scrollview của bạn và nhấp vào Identity Inspector.

7: Thêm một User Defined runtime attributevới KeyPath contentSizesau đó nhập SIZE và đặt kích thước nội dung của bạn. Đối với tôi nó là (320, 1000).

Vì chúng tôi muốn xem toàn bộ chế độ xem cuộn của chúng tôi trên bảng phân cảnh, chúng tôi đã kéo dài nó và nó có khung là 320.1000 nhưng để nó hoạt động trong ứng dụng của chúng tôi, chúng tôi cần thay đổi khung hình xuống dạng xem cuộn sẽ hiển thị.

8: Thêm một runtime attributevới KeyPath framevới Loại RECT và 0,0,320,416.

Bây giờ khi chúng tôi chạy ứng dụng của mình, chúng tôi sẽ có một cuộn xem hiển thị có khung 0,0,320, 416 và có thể cuộn xuống 1000. Chúng tôi có thể bố trí các bản xem xét và hình ảnh của mình và không có gì trong Storyboard giống như cách chúng tôi muốn chúng xuất hiện. Sau đó, các thuộc tính thời gian chạy của chúng tôi đảm bảo hiển thị nó đúng. Tất cả điều này mà không có 1 dòng mã.

Dưới đây là các bước Auto Layoutlàm việc với tôi trên XCode 8.2.1.

1. Chọn Size Inspectorcác View Controller, và thay đổi Simulated Sizeđến Freeformvới chiều cao 1000 thay vìFixed .
2. Đổi tên khung nhìn View Controllerlà RootView .
3. Kéo một khung nhìn Scroll Viewdưới dạng RootView và đổi tên nó thành ScrollView .
4. Thêm các ràng buộc cho ScrollView :
   • ScrollView [Trên cùng, Dưới cùng, Dẫn đầu, Trailing] = RootView [Trên, Dưới, Dẫn đầu, Trailing]
5. Kéo một khung nhìn Vertical Stack Viewdưới dạng ScrollView và đổi tên nó thành ContentView .
6. Thêm các ràng buộc cho ContentView :
   • Xem nội dung .height = 1000
   • ContentView [Trên cùng, Dưới cùng, Dẫn đầu, Trailing, Width] = ScrollView [Trên, Dưới, Dẫn đầu, Trailing, Width]
7. Chọn Attributes Inspectorcác contentView , và thay đổi Distributionđể Fill Equallythay Fill.
8. Kéo một khung nhìn Viewdưới dạng ContentView và đổi tên nó thành RedView .
9. Đặt Redlàm nền của RedView .
10. Kéo một khung nhìn Viewdưới dạng ContentView và đổi tên nó thành BlueView .
11. Đặt Bluelàm nền của BlueView .
12. Chọn RootView và nhấp vào Update Framesnút.
    • Update Frameslà một nút mới trong Xcode8, thay vì Resolve Auto Layout Issuesnút. Nó trông giống như một nút làm mới, nằm trong thanh điều khiển bên dưới Storyboard:

Xem phân cấp:

• RootView
  • Cuộn xem
    • Xem nội dung
      • Xem lại
      • BlueView

Xem cảnh điều khiển (Chiều cao: 1000):

Chạy trên iPhone7 (Chiều cao: 1334/2):

Dưới đây là các bước làm việc cho tôi trên iOS 7 và XCode 5.

1. Kéo một ViewContoder (đi kèm với "Xem" của UIView).

   1.1 Chọn "Xem Trình điều khiển" và chọn "Trình kiểm tra tệp" và bỏ chọn "Bố cục tự động".

2. Kéo một ScrollView (là con của UIView "View" của ViewContoder
3. Chọn ScrollView và mở "Trình kiểm tra danh tính".

4. Nhập "contentSize" cho keyPath. Chọn "Kích cỡ" cho Loại. Và nhập {320, 1000} cho giá trị.

   Lưu ý: Bước 4 chỉ đơn giản là nói rằng thanh cuộn chứa một số nội dung có kích thước là 320x1000 đơn vị. Vì vậy, thiết lập contentSize sẽ làm cho công cụ cuộn hoạt động.

5. Chọn Xem Trình điều khiển, Chọn "Trình theo dõi thuộc tính", sau đó chọn Biểu mẫu miễn phí từ Kích thước.

   Lưu ý: bước 5 sẽ cho phép chúng tôi thay đổi kích thước của "Chế độ xem" mà bộ điều khiển chế độ xem đi kèm.

6. Chọn "Xem" và sau đó chọn "Trình kiểm tra kích thước".

7. Đặt chiều rộng thành 320 và chiều cao thành 1000.

Lưu ý: 5, 6 & 7 hoàn toàn là để chúng ta thấy được kéo dài hoặc toàn bộ chế độ xem được mở rộng bên trong StoryBoard. Lưu ý: Đảm bảo bỏ chọn "Bố cục tự động" trên Trình điều khiển xem.

Hệ thống phân cấp Chế độ xem của bạn sẽ giống như:

Sau nhiều giờ dùng thử và lỗi, tôi đã tìm thấy một cách rất dễ dàng để đưa nội dung vào các cuộn xem là 'ngoài màn hình'. Đã thử nghiệm với XCode 5 & iOS 7. Bạn có thể thực hiện việc này gần như hoàn toàn trong Storyboard, sử dụng 2 thủ thuật / cách giải quyết nhỏ:

1. Kéo một trình điều khiển khung nhìn vào bảng phân cảnh của bạn.
2. Kéo một cuộn Xem trên khung nhìn này, đối với bản demo, bạn có thể để mặc định kích thước của nó, bao phủ toàn bộ màn hình.
3. Bây giờ đến mẹo 1 : trước khi thêm bất kỳ yếu tố nào vào scrollView, hãy kéo vào một 'chế độ xem' thông thường (Chế độ xem này sẽ được làm lớn hơn màn hình và sẽ chứa tất cả các thành phần phụ như nút, nhãn, ... hãy gọi nó là ' bao vây xem ').
4. Hãy để kích thước Y của khung nhìn bao quanh này trong trình kiểm tra kích thước, ví dụ 800.
5. Thả nhãn vào chế độ xem kèm theo, ở đâu đó tại vị trí Y 200, đặt tên là 'nhãn 1'.
6. Thủ thuật 2 : đảm bảo chế độ xem kèm theo được chọn ( không phải là scrollView! ) Và đặt vị trí Y của nó thành ví dụ -250, để bạn có thể thêm một mục nằm ngoài màn hình
7. Thả vào một nhãn, ở đâu đó ở dưới cùng của màn hình, đặt tên là 'nhãn 2'. Nhãn này thực sự là 'tắt màn hình'.
8. Đặt lại vị trí Y của chế độ xem kèm theo thành 0, bạn sẽ không còn thấy nhãn 2 nữa, vì nó được đặt ở vị trí tắt màn hình.

Cho đến nay để làm việc với bảng phân cảnh, bây giờ bạn cần thêm một dòng mã vào phương thức 'viewDidLoad' của viewContoder để đặt nội dung scrollViews để nó chứa toàn bộ 'khung nhìn bao quanh'. Tôi đã không tìm thấy một cách để làm điều này trong Storyboard:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.scrollView.contentSize = CGSizeMake(320, 800);
}

Bạn có thể thử làm điều này bằng cách thêm contentSizekeyPath làmsize trong Trình kiểm tra danh tính và đặt thành (320, 1000).

Tôi nghĩ Apple nên làm điều này dễ dàng hơn trong bảng phân cảnh, trong TableViewContoder, bạn có thể chỉ cần cuộn màn hình trong Storyboard (chỉ cần thêm 20 ô và bạn sẽ thấy bạn chỉ có thể cuộn), điều này cũng có thể xảy ra với ScrollViewControll.

Bắt cuộn để hoạt động trong iOS7 và Tự động bố trí trong iOS 7 và XCode 5.

Ngoài ra: https://stackoverflow.com/a/22489795/1553014

Rõ ràng, tất cả những gì chúng ta cần làm là:

1. Đặt tất cả các ràng buộc thành Chế độ xem cuộn (tức là sửa chế độ xem cuộn trước)

2. Sau đó, đặt ràng buộc khoảng cách từ-scrollView xuống dưới cùng của hầu hết các mục để xem chế độ xem (là chế độ xem siêu).

Lưu ý: Bước 2 sẽ cho biết bảng phân cảnh nơi phần nội dung cuối cùng nằm trong chế độ xem Cuộn.

Trong ví dụ này, tôi đã bỏ chọn tính năng Tự động xóa của trình tạo Giao diện. Và, tôi vẫn đang sử dụng (không có lý do nào cả) phiên bản Xcode 4.6.1 tương đối cũ.

Bắt đầu với một bộ điều khiển xem có chế độ xem cuộn qua nó (chế độ xem chính).

1: Thêm Chế độ xem Container, từ Thư viện đối tượng, vào chế độ xem cuộn. Lưu ý rằng bộ điều khiển chế độ xem mới được thêm vào bảng phân cảnh và nó được liên kết với bộ điều khiển chế độ xem với chế độ xem cuộn.

2: Chọn chế độ xem vùng chứa và trên Trình kiểm tra kích thước, đặt nó ở vị trí trên cùng và bên trái mà không tự động thay đổi kích thước.

3: Thay đổi chiều cao của nó thành 1000. (1000 được sử dụng cho ví dụ này. Bạn nên áp dụng giá trị mà bạn yêu cầu.)

4: Chọn bộ điều khiển chế độ xem mới và, từ Trình theo dõi thuộc tính, thay đổi Kích thước thành Dạng tự do.

5: Chọn chế độ xem của bộ điều khiển chế độ xem mới và, trên Trình kiểm tra kích thước, thay đổi chiều cao thành 1000 (bằng với chiều cao của chế độ xem của bộ chứa).

6: Đối với thử nghiệm của bạn sau này, trong khi vẫn ở chế độ xem của bộ điều khiển chế độ xem mới, hãy thêm nhãn ở trên cùng và ở dưới cùng của chế độ xem.

7: Chọn chế độ xem cuộn từ bộ điều khiển xem ban đầu. Trên trình kiểm tra danh tính, thêm một thuộc tính với keyPath được đặt thành contentSize, nhập được đặt thành Kích thước và giá trị được đặt thành {320, 1000} (hoặc kích thước của chế độ xem vùng chứa của bạn).

8: Chạy trên Trình mô phỏng iPhone 4 inch. Bạn sẽ có thể cuộn từ nhãn trên cùng lên nhãn dưới cùng.

9: Chạy trên Trình mô phỏng iPhone 3,5 inch. Bạn sẽ có thể cuộn từ nhãn trên cùng lên nhãn dưới cùng.

Hãy nhớ rằng Xcode 4.6.1 chỉ có thể xây dựng cho iOS6 trở xuống. Sử dụng phương pháp này và xây dựng cho iOS6, tôi vẫn có thể đạt được kết quả tương tự khi ứng dụng được chạy trên iOS7.

Lưu ý rằng trong vòng một UITableView , bạn thực sự có thể cuộn chế độ xem bảng bằng cách chọn một ô hoặc một thành phần trong đó và cuộn lên hoặc xuống bằng bàn di chuột của bạn.

Đối với UIScrollView, tôi thích đề xuất của Alex, nhưng tôi khuyên bạn nên tạm thời thay đổi trình điều khiển chế độ xem thành dạng tự do, tăng chiều cao của chế độ xem gốc, xây dựng giao diện người dùng của bạn (các bước 1-5), sau đó thay đổi lại thành kích thước được suy ra tiêu chuẩn khi bạn hoàn thành để bạn không phải cứng kích thước nội dung mã dưới dạng thuộc tính thời gian chạy. Nếu bạn làm điều đó, bạn sẽ tự giải quyết được rất nhiều vấn đề về bảo trì khi cố gắng hỗ trợ cả hai thiết bị 3,5 "và 4", cũng như khả năng tăng độ phân giải màn hình trong tương lai.

Bạn chỉ nên đặt thuộc tính contentSize trên viewDidAppear, như mẫu này:

- (void)viewDidAppear:(BOOL)animated{

     [super viewDidAppear:animated];
     self.scrollView.contentSize=CGSizeMake(306,400.0);

}

Nó giải quyết các vấn đề tự động thanh toán và hoạt động tốt trên iOS7.

Tuyên bố miễn trừ trách nhiệm: - Chỉ dành cho ios 9 trở lên (Chế độ xem ngăn xếp).

Nếu bạn đang triển khai ứng dụng của mình trên thiết bị ios 9, hãy sử dụng chế độ xem ngăn xếp . Dưới đây là các bước: -

1. Thêm chế độ xem cuộn với các ràng buộc - ghim sang trái, phải, dưới cùng, trên cùng (không có lề) để giám sát (chế độ xem)
2. Thêm chế độ xem ngăn xếp với các ràng buộc tương tự để xem cuộn.
3. Ngăn xếp xem các ràng buộc khác: - stackView.bottom = view.bottom và stackView. Thong = scrollView. Thong
4. Bắt đầu thêm quan điểm của bạn. Chế độ xem cuộn sẽ quyết định cuộn dựa trên kích thước của chế độ xem ngăn xếp (về cơ bản là chế độ xem nội dung của bạn)

Trong iOS7 tôi thấy rằng nếu tôi có Chế độ xem bên trong UIScrollView trên ViewContoder có kích thước FreeForm thì nó sẽ không cuộn trong ứng dụng, bất kể tôi đã làm gì. Tôi đã chơi xung quanh và thấy những thứ sau dường như hoạt động, không sử dụng FreeForms:

1. Chèn một UIScrollView bên trong Chế độ xem chính của ViewContoder

2. Đặt các ràng buộc Tự động thanh toán trên ScrollView là phù hợp. Đối với tôi, tôi đã sử dụng Hướng dẫn bố trí từ 0 đến trên cùng và Hướng dẫn bố cục từ 0 đến dưới

3. Trong ScrollView, đặt Chế độ xem Container. Đặt chiều cao của nó thành bất cứ thứ gì bạn muốn (ví dụ 1000)

4. Thêm một ràng buộc Chiều cao (1000) vào Container để nó không thay đổi kích thước. Dưới cùng sẽ là quá khứ của hình thức.

5. Thêm dòng [self.scrollView setContentSize: CGSizeMake (320, 1000)]; vào ViewContoder chứa scrollView (mà bạn đã kết nối dưới dạng IBOutlet)

ViewContoder (được thêm tự động) được liên kết với Container sẽ có chiều cao mong muốn (1000) trong Trình tạo giao diện và cũng sẽ cuộn đúng trong trình điều khiển xem ban đầu. Bây giờ bạn có thể sử dụng ViewContoder của bộ chứa để bố trí các điều khiển của mình.

Tôi muốn đặt 5 xu của mình cho câu trả lời được chấp nhận: tôi đã nghiên cứu chủ đề trong 2 ngày và cuối cùng đã tìm thấy một giải pháp mà tôi sẽ luôn sử dụng từ bây giờ

đi đến mục 4 trong câu trả lời được chấp nhận và quên đi việc thêm thuộc tính của khung và nội dung, v.v.

để làm mọi thứ tự động chỉ cần sử dụng giải pháp từ liên kết này

mọi thứ đều rõ ràng, dễ dàng, thanh lịch và hoạt động như một nét quyến rũ trên ios 7. Tôi khá vui mừng với tất cả những điều đó lol

Đây là một giải pháp đơn giản.

1. Đặt thuộc tính kích thước của trình điều khiển chế độ xem của bạn trong bảng phân cảnh thành "Freeform" và đặt kích thước bạn muốn. Đảm bảo rằng nó đủ lớn để phù hợp với toàn bộ nội dung của chế độ xem cuộn của bạn.

2. Thêm chế độ xem cuộn của bạn và đặt các ràng buộc như bình thường. tức là nếu bạn muốn chế độ xem cuộn là kích thước của chế độ xem của bạn, sau đó đính kèm các lề trên, dưới, hàng đầu, theo dõi của bạn vào giám sát như bình thường.

3. Bây giờ chỉ cần đảm bảo có các ràng buộc trong các chế độ xem của cuộn xem kết nối trên cùng và dưới cùng của chế độ xem cuộn. Tương tự cho trái và phải nếu bạn có cuộn ngang.

Đây là một chút câu trả lời khó hiểu cho cùng một giải pháp cho chế độ xem cuộn dọc, nhưng (đối với nguyên tắc của stackoverflow) không trả lời câu hỏi. Thay vì sử dụng scrollView, chỉ cần sử dụng UITableView, kéo UIView bình thường vào tiêu đề và làm cho nó lớn như bạn muốn, giờ đây bạn có thể cuộn nội dung trong bảng phân cảnh.

Rõ ràng bạn không cần chỉ định chiều cao! Điều này thật tuyệt nếu nó thay đổi vì một số lý do (bạn thay đổi kích thước các thành phần hoặc thay đổi kích thước phông chữ).

Tôi chỉ làm theo hướng dẫn này và mọi thứ đã hoạt động: http://natashatherobot.com/ios-autolayout-scrollview/

(Lưu ý bên lề: Không cần thực hiện viewDidLayoutSubview trừ khi bạn muốn tập trung vào chế độ xem, vì vậy danh sách các bước thậm chí còn ngắn hơn).

Mong rằng sẽ giúp!

Chìa khóa là kích thước nội dung.

Điều này thường bị thiếu và không được chỉ định khi thêm UIScrollView.

Chọn UIScrollView và chọn Trình kiểm tra danh tính.

Thêm một contentSizekeyPath như mộtsize trong Trình kiểm tra danh tính và đặt nó thành (320, 1000).

Di chuyển đi.

Nếu bạn đang sử dụng bố cục tự động hơn phương pháp tốt nhất là sử dụng UITableViewControll với các ô tĩnh trong bảng phân cảnh.

Tôi cũng đã từng phải đối mặt với vấn đề với chế độ xem yêu cầu cuộn nhiều hơn, vì vậy hãy thay đổi UIScrollView bằng kỹ thuật đã đề cập ở trên.

Dưới đây là cách thiết lập cuộn xem bằng Xcode 11

1 - Thêm scrollview và đặt các ràng buộc trên, dưới, dẫn và theo dõi

2 - Thêm Chế độ xem nội dung vào cuộn xem, kéo kết nối đến Hướng dẫn bố cục nội dung và chọn Dẫn đầu, Trên cùng, Dưới cùng và Trailing. Đảm bảo đặt giá trị của nó thành 0 hoặc các hằng số bạn muốn.

3 - Kéo từ Chế độ xem nội dung sang Hướng dẫn bố cục khung và chọn Độ rộng bằng nhau

4 - Đặt hằng số ràng buộc chiều cao cho Chế độ xem nội dung