Bố cục tự động: Xcode 6: Các yếu tố giao diện người dùng trung tâm

Question

Tôi đang sử dụng Trình tạo giao diện trong Xcode 6 để tạo ứng dụng và gặp sự cố khi tải các trường văn bản và nút để căn giữa trên màn hình cho các màn hình kích thước khác nhau.

Tôi nghĩ rằng đó là vấn đề chọn căn giữa và ngang trong container nhưng có vẻ như không phải khi tôi thử nó trong bố cục tự động. Trên thực tế tôi đã tinkered xung quanh một chút và tôi vẫn chưa có nó.

Tôi chỉ muốn để có thể xem tất cả các nút và văn bản lĩnh vực của tôi đối với bất kỳ màn hình kích thước iPhone và ngay bây giờ mô phỏng được chỉ cho thấy một phần của những yếu tố giao diện người dùng như thế này:

Tôi cũng muốn làm điều này trong bảng phân cảnh và không phải trong mã như tôi không ở mức độ làm điều này trong mã nào được nêu ra.

Answer 1

Bước 1: Đảm bảo lớp kích thước của bạn bao phủ tất cả màn hình iPhone ít nhất ở chế độ xem dọc. Vì vậy, thay đổi lớp kích thước thành "wCompact hRegular".

Bước 2: Sau khi đặt đúng kích cỡ lớp, hãy thêm UITextFields và UIButton vào bảng phân cảnh của bạn. Đối với tôi, nó trông giống như-

Bước 3: Trước đây, bạn bắt đầu thêm những hạn chế, bạn cần phải nhớ hai things-

a. Phần tử của bạn (UITextField, UIButton, UIView hoặc bất kỳ thành phần nào) cần biết vị trí bắt đầu của nó một cách rõ ràng và

b. Yếu tố của bạn cần biết ý nghĩa kích thước của nó, chiều cao và chiều rộng của nó.

Trong trường hợp này, khi bạn muốn căn giữa các phần tử, tôi giả định rằng nó cần phải được căn giữa bắt đầu từ 10 thang đo từ cạnh trái và phải kết thúc 10 vảy ra khỏi cạnh phải của màn hình iPhone. Bây giờ, điều đó có nghĩa, chiều rộng của nó sẽ khác nhau dựa trên kích thước màn hình, nhưng chiều cao của nó sẽ giống nhau.

Vì vậy, tôi chỉ cần thêm ép sau đường cho văn bản 1st box-

Thông báo, trong thanh tra kích thước, tôi đặt hộp văn bản của điểm khởi đầu, x và chiều rộng trong một cách mà nó là 10 pt đi từ cạnh trái và 10 pt đi từ cạnh phải. Đừng lo lắng, nó chỉ đơn giản là toán học.

Đối với TextField thứ 2, tôi thêm Constrain, giống gì theo cách

Cuối cùng, đối với các nút, ép là following-

Bây giờ, bạn là tốt để đi. Mọi thứ đều được căn giữa.

Hy vọng điều này sẽ hữu ích.

Answer 2

Bạn cần tận dụng bộ chọn lớp kích thước ở cuối cửa sổ bảng phân cảnh.

Vì vậy, cho một chiếc iPhone 6 hoặc 6 Plus trong bức chân dung bạn sẽ chọn một chiều rộng nhỏ gọn và chiều cao bình thường như thế này:

Và sau đó bạn sẽ làm bất cứ điều gì bố trí ô tô thứ cho thiết bị nhất định có

Answer 3

Bằng cách sử dụng bộ chọn lớp kích thước ở cuối cửa sổ bảng phân cảnh, đặt kích thước của bạn thành bất kỳ chiều rộng và chiều cao nào và sau đó thực hiện theo các ràng buộc bố cục tự động bên dưới. Nó sẽ làm việc cho bạn.

Trước tiên hãy chọn xem bạn muốn thiết lập bố trí tự động, và sau đó chọn tùy chọn pin từ góc dưới bên phải của kịch bản của bạn và sau đó thêm ép như thể hiện trong hình ở trên và nút bấm Add 4 constrains

Lặp lại quy trình cho tất cả các chế độ xem và đặt các ràng buộc là Fix the top, bottom, left and right constrains of all views except the last button that should be fix from top,left,right and fixed height.