'Vary for Traits' trong Xcode 8 là gì?

Tôi đang sử dụng các lớp Tự động thanh toán và Kích thước, nhưng với việc phát hành iOS 10 và Xcode 8.0 mới, có một tùy chọn mới Vary for Traits. Đây là sự thay thế Size Classe cho các chiều rộng và chiều cao khác nhau của các thiết bị.

Bằng cách chọn widthhộp kiểm, nó sẽ hiển thị varying 14 compact width devices.

Bằng cách chọn heighthộp kiểm, nó sẽ hiển thị varying 18 compact height devices.

Bằng cách chọn cả hai hộp kiểm, nó sẽ hiển thị varying 11 compact width regular height devices.

Làm thế nào để sử dụng các tùy chọn này? Chúng ta có thể sử dụng AutoLayout với các lớp kích thước như Xcode7.0 không? Nếu ai có kiến ​​thức chuyên sâu thì vui lòng giải thích giúp.

Đây chỉ là một phần mở rộng về cách sử dụng "Vary Traits" một cách nhanh chóng trong dự án của bạn để thêm các bố cục khác nhau cho iPad và iPhone.

Vui lòng đọc phần này để hiểu thêm về các lớp Kích thước.

https://developer.apple.com/reference/uikit/uitraitcollection

Nếu bạn đang bỏ qua ví dụ sau đây, hãy đọc phần Tóm tắt cuối cùng.

• MỤC TIÊU :

Bạn cần một nút có độ rộng khác nhau trong iPhone và iPad. Cái trước có chiều rộng 80 và cái sau có chiều rộng 300.

• PHƯƠNG PHÁP 1:

Thay đổi Đặc điểm với Nhiều Ràng buộc như đã cài đặt.

• CÁC BƯỚC:

  1. Thêm các ràng buộc chung trước tiên như Căn giữa nút theo chiều ngang và chiều dọc.

2. Chọn VaryForTraits và đối với màn hình iPhone theo nguyên tắc phân loại kích thước, loại kích thước C * R phù hợp với mô hình và điều này chúng tôi kiểm tra đánh dấu của Chiều rộng & Chiều cao trong PopUp. Loại bỏ cửa sổ bật lên bằng cách nhấp vào bất kỳ đâu trên màn hình.

3. Thêm hằng số chiều rộng và kiểm tra xem ràng buộc có được thêm vào cho lớp kích thước C * R hay không. Sau khi thêm các ràng buộc, hãy chọn nút Hoàn tất Thay đổi.

4. Đối với màn hình iPad, hãy chọn lại bất kỳ thiết bị iPad nào và chọn VaryForTraits và lần này khi nhấp vào chiều cao-chiều rộng, nó sẽ hiển thị biến thể R * R.

5. Một lần nữa thêm giới hạn chiều rộng, giới hạn chiều rộng iPhone được thêm cuối cùng phải được làm nổi bật như trong ảnh chụp màn hình. Giá trị gia tăng sẽ dành cho loại kích thước R * R lần này.

6. Quay lại bố cục iPhone và nó có chiều rộng là 80 và iPad sẽ mất 300.

PHẦN KẾT LUẬN :

Xin lưu ý rằng có tổng cộng hai ràng buộc được thêm vào và trong cả hai ràng buộc, các giá trị khác nhau tùy theo loại kích thước đã chọn.

• PHƯƠNG PHÁP 2:

Thay đổi đặc điểm với Ràng buộc duy nhất, được cài đặt nhiều loại kích thước

• CÁC BƯỚC:
  1. Thêm ràng buộc chiều rộng bình thường. Sau đó chọn ràng buộc đó và chọn nút + bên cạnh giá trị Hằng số.

2. Thêm biến thể đặc điểm và đối với iPhone, chúng tôi chọn C * R và đặt giá trị không đổi là 100.

3. Một lần nữa đối với iPad theo sau một biến thể đặc điểm là R * R, chúng tôi thêm một biến thể khác bằng cách nhấp lại vào nút + và đặt giá trị là 300.

4. Chọn một iPad và chiều rộng sẽ tự động được lấy là 300 và trở lại iPhone, nó sẽ có giá trị là 100.

PHẦN KẾT LUẬN :

Đây có vẻ là một lựa chọn tốt hơn là thêm hai ràng buộc khi một ràng buộc duy nhất được yêu cầu và giá trị không đổi khác nhau.

SỬ DỤNG KHI NÀO, SỬ DỤNG GÌ:

Cả hai cách tiếp cận về cơ bản đều thực hiện cùng một việc, đặt giá trị cho các lớp Kích thước.

Tuy nhiên, # Method1 được sử dụng khi bạn muốn thêm một ràng buộc cụ thể cho một thiết bị hoặc nói kích thước lớp. Ví dụ, trong iPhone, nút này phải từ 50 điểm trở lên và trong iPad, nút này phải được căn giữa theo chiều ngang và chiều dọc. Trong những tình huống như vậy, bạn cần sử dụng VaryForTraits khi nó mở ra cánh cửa để thêm các ràng buộc cho một loại kích thước cụ thể.

# Method2 được sử dụng khi bạn muốn các giá trị hằng số khác nhau cho cùng một loại ràng buộc.

Tái bút: CHO TẤT CẢ NHỮNG AI KHÔNG THỂ CÓ ĐƯỢC VÍ DỤ LÀM VIỆC

Vui lòng đảm bảo rằng bạn chỉ thêm các ràng buộc bắt buộc như Đã cài đặt. Hộp kiểm chống lại Đã cài đặt sẽ chỉ xuất hiện cho ràng buộc mà bạn cần cho một lớp kích thước. Đó là chìa khóa!

Chỉ cần thêm một ràng buộc hàng đầu & một dẫn đến một uiButton trong một dạng xem. Chọn ràng buộc trên cùng và bỏ chọn tùy chọn Đã cài đặt cơ bản với dấu Cộng. Bây giờ, bằng cách nhấp vào dấu Cộng, thêm biến thể vào C R và chọn tùy chọn đó. Bây giờ, thay đổi thiết bị từ iPhone sang iPad với các kết hợp hướng khác nhau. Ràng buộc này sẽ chỉ được áp dụng cho loại kích thước C R là iPhone ở hướng dọc. Nếu hộp kiểm so với Cài đặt cơ bản (hộp có ký hiệu Plus) được chọn có nghĩa là ràng buộc phải được áp dụng cho tất cả các lớp kích thước.

TÓM LƯỢC :

Biến thể đặc điểm là một thay đổi đối với cách trình bày giao diện người dùng của bạn dựa trên cấu hình thiết bị. Đặc điểm Các biến thể của giao diện người dùng không chỉ giới hạn ở các ràng buộc mà có thể được áp dụng cho nhiều thứ khác. Chẳng hạn như thay đổi màu của nền và các yếu tố khác khi thiết bị được đặt thành kiểu tối. Một biến thể có thể áp dụng cho một phần tử của giao diện người dùng, chẳng hạn như loại bỏ một ràng buộc hoặc cho một thuộc tính của một lớp chế độ xem hoặc ràng buộc, chẳng hạn như phông chữ cho nhãn. Bạn có thể thay đổi:

• Kích thước hoặc vị trí của một chế độ xem

• Cài đặt chế độ xem

• Cài đặt một ràng buộc

• Hằng số ràng buộc

• Nét chữ

• Màu cho phông chữ, tông màu hoặc nền

• Lề bố cục

• Tệp hình ảnh

Tập hợp các thuộc tính cụ thể mà bạn có thể thay đổi tùy thuộc vào lớp của phần tử. Trong ví dụ, chúng tôi đã chứng minh việc sử dụng- Cài đặt một ràng buộc & - Hằng số ràng buộc. Những người khác, khá đơn giản và có thể dễ dàng suy ra.

Thay đổi cho các đặc điểm là sự phát triển của tùy chọn lớp kích thước đã có trong phiên bản Xcode trước đây. Nó cho phép một biến thể tiện lợi và chính xác hơn nhiều dựa trên các đặc điểm. Tất nhiên, nó không giới hạn ở các biến thể chỉ iPad / iPhone mà bạn có thể chỉ định các biến thể dựa trên hướng và thiết bị khác nhau.

Các câu trả lời khác trong chủ đề này có một số thiếu sót và không chính xác, có lẽ cách hiệu quả nhất để đưa ra câu trả lời là làm một ví dụ. Để rõ ràng, chúng tôi sẽ giới hạn ví dụ của chúng tôi chỉ với một nút và hai bố cục. Tuy nhiên, như được giải thích bên dưới, bạn có thể mở rộng ví dụ sau theo ý muốn. Mục tiêu của chúng tôi là điều chỉnh vị trí của nút giữa hai bố cục khác nhau: ngang và dọc trên tất cả các thiết bị.

Lưu ý: Nếu không được bật tùy chọn “thay đổi cho các đặc điểm”, tất cả các điều chỉnh bố cục và giao diện ui được gọi là tất cả các đặc điểm (tức là tất cả các lớp kích thước).

Hãy bắt đầu bằng cách đặt một nút trên bảng phân cảnh của chúng tôi. Vì "thay đổi cho các đặc điểm" không được bật, nút sẽ hiển thị trong tất cả các bố cục khác nhau. Thay vào đó, nếu chúng tôi đã bật tính năng thay đổi cho các đặc điểm thì nút sẽ chỉ được đề cập đến đặc điểm cụ thể đã chọn.

Bây giờ, hãy bật "thay đổi theo đặc điểm" và chọn một biến thể dựa trên chiều cao. Bạn sẽ thấy rằng màn hình dưới cùng sẽ chuyển sang màu xanh lam và theo lựa chọn, bạn sẽ thấy tất cả các thiết bị bị tác động. Càng xa càng tốt.

Chọn lại nút và thêm quảng cáo ràng buộc như bình thường. Trong ví dụ của chúng tôi, chúng tôi sẽ thêm khoảng trống ở trên cùng và bên trái cũng như chiều rộng và chiều cao. Sau đó, nhấp vào “Hoàn tất thay đổi”. Bạn sẽ thấy rằng phần dưới cùng của màn hình sẽ chuyển sang màu xám một lần nữa. Điều đang xảy ra là chúng tôi đã yêu cầu Interface Builder thêm các ràng buộc ở trên chỉ cho các lớp (w: C h: R).

Bây giờ hãy chọn chế độ nằm ngang ở cuối màn hình. Bạn sẽ thấy rằng Nút có màu đỏ, vì nó thiếu các ràng buộc mà bạn đã thêm chỉ cho một số đặc điểm. Chọn lại các thay đổi đối với các đặc điểm và chọn lại biến thể chiều cao. Thêm các ràng buộc sau:

và nhấn hoàn thành khác nhau. Giờ đây, nút này được nhận diện tốt trên màn hình cho cả ngang và dọc.

Xây dựng và chạy. Bạn sẽ thấy rằng nút sẽ thay đổi theo hướng của màn hình.

Bạn có thể tạo các bố cục nâng cao hơn theo mẫu này. Ví dụ: ngay từ đầu, bạn có thể chọn một thay đổi cho các đặc điểm và thả các đối tượng UIKit chỉ cho một đặc điểm cụ thể. Đối tượng này sẽ chỉ xuất hiện trong biến thể được chỉ định và sẽ có màu xám trên những biến thể khác, cho phép bạn tạo giao diện người dùng hoàn toàn khác nhau dựa trên các đặc điểm.

Nó không là gì ngoài size classesbản thân nó nhưng với sự đại diện khác nhau. cho đến khi xcode 7chúng tôi sử dụng các lớp học quy mô và chúng ta xem xét height-widthtrong regular,compact and anycách, trong vary for traitskhái niệm này là tương tự nhưng xcode đặc biệt giải thích exact device. Trong phiên bản cũ hơn, chúng tôi biết rằng for every iphone in portraintloại thông tin vv mà trong này chúng tôi có thể biết thiết bị chính xác!

Kiểm tra ảnh chụp màn hình bên dưới,

Bạn nên tham khảo wwdc2016 - video để biết thêm thông tin!

Tham khảo: Đây So Post