Trình tạo giao diện: Giao diện của UIView iOS 6/7 Deltas để làm gì?


111

Tôi vừa nhận thấy thuộc tính Delta iOS 6/7 được tìm thấy trong bố cục cấu trúc của UIView.

Cái này để làm gì và tại sao cái này bị thiếu trong AutoLayout?

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

Câu trả lời:


83

Điều này thực sự đề cập đến Delta giữa vị trí bố cục từ iOS6 đến iOS7.

Trong iOS7, một số chế độ xem có thể ẩn thanh trạng thái hoặc để thanh trạng thái trong suốt và trên thực tế, nó được phủ lên trên chế độ xem của bạn. Vì vậy, nếu bạn đặt một phần tử giao diện người dùng ở (0.0, 0.0) trên iOS6, nó sẽ xuất hiện bên dưới thanh trạng thái, nhưng trên iOS7, nó sẽ xuất hiện một phần bên dưới thanh trạng thái. Vì vậy, trong trường hợp đó, bạn sẽ muốn một delta khớp với chiều cao thanh trạng thái (20,0 điểm) để bố cục trông giống nhau trong iOS6 và iOS7.

Tôi tin rằng điều này là không cần thiết nếu bạn sử dụng autolayout, nhưng tất nhiên, sau đó bạn sẽ mất hỗ trợ iPad1, điều mà nhiều người trong chúng ta không sẵn sàng thừa nhận tại thời điểm này.


27
Đối với tôi, tôi thấy đó là vùng đồng bằng từ iOS 7 lên iOS 6. Tôi cúi yếu tố của tôi 20 điểm, sau đó thiết lập một -20 cho Delta Y.
guptron

điều này đặc biệt hữu ích với UIProgressView mỏng hơn nhiều trong iOS 7
Lee Probert 27/09/13

108

Lưu ý: Tôi đã nhận thấy câu hỏi này một lúc trước, nhưng tôi chỉ đăng câu trả lời của mình bây giờ vì NDA đã được dỡ bỏ

Tại sao nó không xuất hiện cho Tự động thanh toán?

Như bạn có thể đã nhận thấy, iOS 7 mang đến một giao diện hoàn toàn mới. Giao diện của các phần tử giao diện người dùng đã thay đổi, nhưng cũng có một số kích thước của chúng (hoặc chỉ số nói chung). Điều này có thể làm cho việc thiết kế giao diện để phù hợp với cả iOS 7 và các phiên bản tiền nhiệm của nó có một chút khó khăn.

Dòng chính thức của Apple là sử dụng AutoLayout để giải quyết vấn đề này; điều này sẽ mang lại rất nhiều rắc rối khi đặt ra các phần tử giao diện người dùng cho bạn. Đôi khi việc kết hợp này không dễ dàng thực hiện, đặc biệt nếu bạn vẫn phải hỗ trợ iOS 5 vì lý do kinh doanh hoặc giao diện của bạn được quản lý theo cách khiến việc triển khai Tự động thanh toán trở nên khó khăn. Như vậy, Apple dường như đã cung cấp một cách để giúp công việc của bạn dễ dàng hơn một chút nếu bạn rơi vào danh mục thích hợp này và họ đã gọi đây là iOS 6/7 Deltas.

Được rồi, nó làm gì?

Mặc dù nhãn trong Trình tạo giao diện hơi không rõ ràng về ý nghĩa của 'Delta' trong ngữ cảnh này, mã chứa trong tệp .xib tương ứng với tính năng này rõ ràng hơn một chút:

<inset key="insetFor6xAndEarlier" minX="-50" minY="-100" maxX="-50" maxY="300"/>

Tên khóa insetFor6xAndEarliernói rõ điều này làm gì; bạn có thể cung cấp các nội dung thay thế cho các phần tử giao diện người dùng khi chạy trên các phiên bản trước của iOS 7. Ví dụ, ở trên xác định thay đổi delta sau:

x: 50
y: 100
width: -100
height: 200

Mặc dù các giá trị được lưu trữ trong .xib không tương ứng trực tiếp với các giá trị được trích dẫn, nhưng có một mối tương quan giữa chúng.

x: -minX
y: -minY
width: minX + maxX
height: minY + maxY

Những hình ảnh dưới đây cho thấy sự thay đổi này một cách trực quan. Đó là một ví dụ cực đoan, nhưng nó để chứng minh khả năng của nó. Tôi chỉ mong đợi trong thực tế sẽ có những thay đổi delta chỉ vài pixel.

Chế độ xem iOS7

Chế độ xem iOS6

Bạn có thể nhận thấy rằng các giá trị là nghịch đảo đối với chế độ xem iOS 6; điều này là do các delta có liên quan đến kiểu xem bạn đang làm việc. Nếu bạn đang chỉnh sửa cho iOS 6, các delta có để chuyển đổi phần tử một cách chính xác cho iOS 7 (ngược lại với ví dụ ở trên).

Để xem các kiểu khác nhau, bạn có thể thay đổi cách Trình tạo giao diện trình bày nó dựa trên hệ điều hành mà nó sẽ chạy. Điều này được chứa trong Trình kiểm tra tệp-> Tài liệu trình tạo giao diện (tab đầu tiên trên thanh bên phải), như vậy:

Chuyển đổi kiểu giao diện

Điều này có tồn tại nếu tôi muốn viết mã giao diện của mình bằng tay không?

Không trực tiếp, nhưng bạn có thể dễ dàng đạt được hiệu quả tương tự bằng cách kiểm tra có điều kiện phiên bản hệ điều hành trong mã của bạn và đặt vị trí / kích thước chính xác cho phù hợp. Khả năng delta tồn tại trong Trình tạo giao diện vì sẽ không có cách nào đơn giản để có định vị có điều kiện mà không cần mã để thực hiện điều đó và quan điểm của Trình tạo giao diện là lấy nhiều mã nhất có thể cho giao diện người dùng.

Nhìn chung ...

Apple thực sự khuyên bạn nên sử dụng Tự động thanh toán, nó giúp cuộc sống của bạn dễ dàng hơn trong hầu hết các trường hợp. Nếu bạn không thể sử dụng nó (vì những lý do đã đề cập ở trên), delta cung cấp cho bạn sự linh hoạt để định vị các phần tử giao diện người dùng của bạn một cách thích hợp, dựa trên các chỉ số của hệ điều hành hiện tại mà không cần phải định vị lại chúng trong mã theo cách thủ công. Một ví dụ điển hình là điều chỉnh việc thiếu thanh trạng thái, nhưng có rất nhiều trường hợp sử dụng khác.

Đương nhiên, nếu bạn chỉ đang phát triển cho iOS7 trở lên, bạn không cần biết tính năng này / sẽ không khám phá ra nó. Chỉ khi bạn cần có thiết bị iOS6 chạy ứng dụng của mình khi được xây dựng với iOS7 SDK, không có tự động thanh toán, bạn mới cần có delta.

Tại thời điểm viết bài (ngày 21 tháng 8), tôi không thể tìm thấy bất kỳ tài liệu nào liên quan đến tính năng này, cũng như bất kỳ đề cập nào trong tài liệu WWDC. Tôi đã có một cuộc vui chơi xung quanh và sau một chút nghiên cứu, đó là những gì tôi đã khám phá ra.


2
Thank you very much WDUK
Kamar Shad

Không tính đến nay, thats những gì tôi cần biết
Jasper

30

Tôi biết điều này đã được trả lời, chỉ cần thêm một biến thể nhỏ hy vọng nó cũng có thể giúp những người không sử dụng bố cục tự động và vẫn muốn hỗ trợ iOS 6.1 và các phiên bản trước đó.

Đọc này Hướng dẫn chuyển đổi của Apple - Hỗ trợ phiên bản trước đó

Chọn 'Xem dưới dạng' thành 'iOS 7.0 trở lên'

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

Giao diện người dùng cơ bản cho iOS 7. Đối với iOS 6 cung cấp giá trị delta phù hợp. Sử dụng bản xem trước để xem điều này sẽ hiển thị như thế nào trong thiết bị iOS 7 và iOS 6.

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

Các bước nhanh chóng:

Chọn riêng lẻ từng phần tử con của chế độ xem gốc và thêm 20px vào giá trị 'Y' của nó.

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

Sau đó, chọn chung tất cả các phần tử con trực tiếp và đặt delta Y là -20px. Bạn cũng có thể làm điều này hàng loạt hoặc riêng lẻ.

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


9

Tự động thanh toán yêu cầu ít nhất iOS 6.0. Nếu bạn muốn hỗ trợ iOS 5.0, bạn không thể sử dụng Tự động thanh toán.

Và những delta đó dùng để giúp bạn điều chỉnh vị trí xem trên các phiên bản iOS khác nhau (chủ yếu là iOS 7 và phiên bản iOS thấp hơn 7).

Tôi sử dụng những giá trị đó để giúp tôi thích bức tranh này. nhập mô tả hình ảnh ở đây


1
Khi tôi thay đổi những điều này, không có gì xảy ra cả, có một bước khác có liên quan không?
Thép tái chế

@RecycledSteel xem câu trả lời của tôi ở đây: link
Riskov

3

Để xem iOS 6/7 Delta đang hoạt động, tôi sẽ demo với SegmentedControl xuất hiện đúng trên cả thiết bị iOS 6 và iOS 7.

Đầu tiên, chọn .Xib hoặc ViewController của bạn trong Storyboard. Bỏ chọn Sử dụng Tự động thanh toán và chọn " Xem dưới dạng iOS 7 trở lên "

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

Trong canvas của Interface Builder, hãy đặt SegmentedControl của bạn sao cho origin.y là 20. Trong iOS 6/7 Delta, chọn -20 cho DeltaY

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

Điều này sẽ làm cho SegmentedControl của bạn được đặt bên dưới Thanh trạng thái trong cả thiết bị iOS 6 và iOS 7

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

Một trích dẫn hữu ích khác từ Hướng dẫn của nhà phát triển về Thanh trạng thái iOS 7

Các dây đai có thể được đặt riêng cho từng chế độ xem và hoạt động như bạn mong đợi. Nếu bảng phân cảnh hoặc nib của bạn được đặt để xem là iOS 6, thì việc đặt các delta sẽ khiến chế độ xem đó bị thay đổi và / hoặc thay đổi kích thước theo số lượng delta đã đặt khi chạy trong iOS 7. Ngoài ra, nếu bảng phân cảnh hoặc nib của bạn được đặt để xem trong iOS 7, thì các delta sẽ được áp dụng khi chạy trong iOS 6


0

Nếu bạn đang sử dụng Tự động thanh toán, thì Delta không khả dụng. Hãy thử điều này (được thử nghiệm trong iPhone 4s chạy iOS6):

- (void) viewWillLayoutSubviews {

//iOS 6 workaround offset
if ([[[UIDevice currentDevice] systemVersion] floatValue] < 7) {

    self.view.clipsToBounds = YES;
    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenHeight = 0.0;
    screenHeight = screenRect.size.width;
    CGRect screenFrame = CGRectMake(0, -20, self.view.frame.size.width,self.view.frame.size.height+10);

    self.view.frame = screenFrame;
}
}
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.