Hình ảnh UIBarButtonItem nên lớn như thế nào?

Tôi đang tìm cách tạo các nút Sắp xếp theo Ngày và Sắp xếp theo Số tùy chỉnh của riêng mình mà tôi dự định đặt vào thanh điều hướng làm nút bên phải.

Hình ảnh của tôi phải lớn đến mức nào để lấp đầy khoảng trống một cách thích hợp - trang tài liệu UIBarItem không liệt kê bất cứ điều gì về kích thước của hình ảnh.

Kể từ iOS 11, Nguyên tắc giao diện con người đề xuất glyphs có khoảng 25 × 25 điểm trong thanh công cụ và thanh điều hướng, tối đa khoảng 28 điểm. (Và HIG chắc chắn phải có trong dấu trang của bạn nếu bạn đang làm việc trên các ứng dụng iOS!)

Điều đó sẽ chuyển sang hình ảnh vuông 25px cho các thiết bị cũ hơn như iPad 2 / Mini, 50px vuông cho hầu hết các thiết bị hiện tại như iPhone 8 hoặc iPad và 75px vuông cho các thiết bị Retina HD (iPhone 6/7/8 Plus hoặc iPhone X). Danh mục tài sản sẽ giúp ích rất nhiều trong việc giữ các kích thước tài sản khác nhau được tổ chức (và Xcode thậm chí có thể tạo chúng từ các nguồn vectơ ngày nay).

Các Hướng dẫn Human Interface nói với bạn điều này kể từ iOS7:

Bất kể kiểu trực quan của biểu tượng, hãy tạo thanh công cụ hoặc biểu tượng thanh điều hướng theo các kích thước sau:

Khoảng 44 x 44 pixel

Khoảng 22 x 22 pixel (độ phân giải tiêu chuẩn)

Dưới đây là một ma trận tuyệt vời của tất cả các kích thước cần thiết cho tài nguyên cho tất cả các nền tảng

Có, Apple đề nghị sử dụng hình ảnh với kích thước 22px, 44px và 66px UIBarButtonItems, nhưng nếu bạn sử dụng các biểu tượng được cài đặt sẵn như biểu tượng Bookmark, thì nó có kích thước lần lượt là 25px 50px và 75px cho 1x, 2x và 3x.

Dưới đây là 2 biểu tượng trong UIToolbar. Bên phải là biểu tượng dấu hệ thống của Apple và bên trái là biểu tượng tùy chỉnh của tôi.

Ở đây biểu tượng tùy chỉnh của tôi có kích thước 22px-44px-66px:

Và ở đây 25px-50px-75px:

Vì vậy, nếu bạn sử dụng các biểu tượng tùy chỉnh và hệ thống trong một thanh công cụ, tôi khuyên bạn nên sử dụng tỷ lệ 25px-50px-75px, hoặc các biểu tượng tùy chỉnh của bạn sẽ nhỏ hơn. Trong thực tế, tôi luôn sử dụng tỷ lệ 25px-50px-75px, nó trông tốt hơn trên các thanh công cụ, như đối với tôi.

Dễ dàng: Bao gồm hình ảnh của bạn trong Assets.xcassets.

Làm sao?

• Clic trên Tài sản.xcassets
• Biểu tượng Clic + và sau đó nhấp vào "Bộ ảnh mới"
• Kéo và thả hình ảnh của bạn vào khe 3x
• Đổi tên bộ ảnh
• Trong BarButton, bạn có thể sử dụng tên này trong trường "Hình ảnh"