Xcode: Làm thế nào để điều chỉnh thành phần chiều cao và trọng lượng trong Pixel?

Question

hôm nay là ngày đầu tiên tôi sử dụng Xcode và tôi đã tạo thành công ứng dụng xem một lần đầu tiên của mình.

Tôi không có nền tảng về Mục tiêu-C trước đây, nhưng trước đây tôi đã thực hiện rất nhiều HTML + CSS. Vì vậy, khi tôi thiết kế xem đầu tiên của tôi, tôi đã tạo đầu tiên trên PSD sau đó tôi cắt nó từng miếng cho nền lĩnh vực văn bản, nút hình ảnh, vv

nhưng những gì tôi thấy hôm nay là khá thú vị ...

Tôi có hình ảnh PNG 483 x 82 pixel, nhưng khi tôi sử dụng nó làm nền văn bản, tôi thấy trên cửa sổ Kích thước Thanh tra có kích thước 240 x 40. Tôi không biết Xcode đo lường như thế nào, nhưng tôi tin rằng nó không có trong pixel. Và đáng ngạc nhiên, đó là kích thước chính xác giống như tôi thấy trên tập tin PSD.

câu hỏi của tôi là, cách có cùng chiều rộng và chiều cao cho bất kỳ thành phần Xcode nào bằng pixel?

cảm ơn bạn ...

PS: đây là ảnh chụp màn hình của nút của tôi và kích thước của nó:

và đây là những gì tôi có trên Xcode của tôi, thấy rằng trên tab bên thanh tra đúng , tôi phải có 240 và 40 cho chiều rộng và chiều cao, thay vì 483 và 82 điểm ảnh:

nếu tôi đặt pixel thực (483x82) trên tab thanh tra đó, nút sẽ rất lớn trên màn hình iPad.

Answer 1

Thứ nhất, một số nền tảng chung về phi võng mạc và võng mạc hình ảnh trong iOS:

• iPhone 3GS trở lên, iPad 1, iPad 2 và iPad mini (đến tên một vài) sử dụng hình ảnh không võng mạc. Tức là, hình ảnh bạn cung cấp sẽ được hiển thị ở cùng chiều rộng và chiều cao theo pixel.

• iPhone 4+ và "iPad mới" (iPad 3) sử dụng hình ảnh võng mạc. Tức là, hình ảnh bạn cung cấp phải là hai lần chiều rộng và chiều cao bằng pixel như bạn muốn hiển thị trên màn hình.

Điều này dẫn đến các khái niệm về điểm trong iOS apps:

1 điểm = 1 pixel trên thiết bị không võng mạc hoặc 2 pixel trên các thiết bị võng mạc.

Bất cứ khi nào bạn đặt kích thước trong Trình tạo giao diện (IB), bạn đang thực sự đặt điểm kích thước chứ không phải pixel.

Hơn nữa, bạn nên luôn cung cấp hai hình ảnh cho không võng mạc và võng mạc phiên bản. Bạn biểu thị phiên bản võng mạc bằng cách đặt tên nó giống như phiên bản không phải võng mạc và sau đó thêm @ 2x.

Ví dụ:

my_awesome_image.png // non-retina image 
my_awesome_image@2x.png // retina image 

Bằng cách này, hệ điều hành sẽ tự động chọn hình ảnh chính xác cho bạn trên thiết bị võng mạc.

Bây giờ chúng tôi rõ ràng (er) trên khái niệm này, đây là những gì bạn đang thực sự làm trong IB:

Bạn đã thiết lập chiều rộng và chiều cao của điểm ảnh là 240 pt x 40 pt, và theo mặc định, thuộc tính contentMode của chế độ xem hình ảnh được đặt thành UIViewContentModeScaleToFill (do đó, vui lòng thay đổi kích thước hình ảnh được chỉ định của bạn để lấp đầy kích thước bạn đã nói ... vì vậy hình ảnh sẽ hiển thị là 480px x 80px trên thiết bị retina- nhưng lưu ý , điều này xuất hiện "có cùng kích thước" do mật độ pixel 2x và 240px x 40px trên các thiết bị không có võng mạc).

Khi bạn đang thiết lập một cái nhìn hình ảnh, bạn thường cần phải làm như sau:

1. Bao gồm cả võng mạc và hình ảnh phi võng mạc trong dự án của bạn
2. Thiết lập kích thước điểm của xem hình ảnh để bất cứ điều gì bạn muốn nó được
3. Đặt contentMode của xem ảnh để bất cứ điều gì bạn muốn nó được (bạn có thể hoặc có thể không muốn rời như là mặc định)