Skip to main content

User Interface

Trước khi lập trình iOS bạn nên hiểu rõ những thông tin về các thiết bị của Apple để có thể dễ dàng lập trình cho tất cả giao diện của từng thiết bị chạy hệ điều hành iOS.

- Font chữ mặc định (system) của Label trên iOS 9.0 trở lên là "San Francisco". Từ iOS 8.4 trở xuống là "Helvetica" hoặc "HelvetacaNeue". Nguồn tại đây.

Thông tin trên những thiết bị iPhone:

Độ phân giải Độ phân giải
vật lý
Retina Thiết bị
liên quan
PPI Tỷ lệ
màn hình
Tên
Hậu tố
icon cho
ứng dụng
(bắt buộc)
Left & Right
Margins
iPhone XS Max
(6.5'')
1242 x 2688 414 x 896 O 458 9:19.5(1:2.16) @3x 180 x 180 20px
iPhone XR
(6.1'')
828 x 1792 414 x 896 O 326 9:19.5(1:2.16) @2x 180 x 180 20px
iPhone X
(5.8'')
1125 x 2436 375 x 812 O XS 458 9:18(1:2.17) @3x 180 x 180 20px
iPhone 6+
(5.5'')
1242 x 2208(*)
(1080 x 1920)
414 x 736 O 6S+, 7+, 8+ 401 9:16(1:1.78) @3x 180 x 180 20px
iPhone 6
(4.7'')
750 x 1334 375 x 667 O 6S, 7, 8 326 9:16 @2x 120 x 120 16px
iPhone 5
(4'')
640 x 1136 320 x 568 O 5S, 5C 326 9:16 @2x 120 x 120 16px
iPhone SE
(4'')
640 x 1136 320 x 568 O 326 9:16 @2x 120 x 120 16px
iPhone 4
(3.5'')
640 x 960 320 x 480 O 4S 326 3:2 @2x 120 x 120 16px
iPhone 3
(3.5'')
320 x 480 320 x 480 X 3S,2,1 163 3:2 @1x 57x57 Unknown
- (*) Riêng màn hình iPhone 6+ và iPhone 6S+ thì độ phân giải sẽ tự động giảm từ 1242x2208 xuống 1080x1920 (87%). Bài giải thích nguyên nhân các bạn có thể xem tại đây.
- Nếu ứng dụng của bạn viết trên nhiều loại màn hình thì nên có tên hậu tố để thiết bị tự động tối ưu cách load hình cho từng loại thiết bị.
- Nếu ứng dụng của bạn chỉ hỗ trợ từ loại màn hình retina trở lên thì có thể khỏi cần tên hậu tố là @2x.

Thông tin trên những thiết bị iPad:
Độ phân giải Độ phân giải
vật lý
Retina Những thiết bị
liên quan
PPI Tỷ lệ
màn hình
Tên
Hậu tố
icon cho
ứng dụng
(bắt buộc)
Left & Right
Margins
iPad Pro
(12.9'')
2048 x 2732 1024 x 1366 O 264 3:4 @2x 167 x 167 20px
iPad Air
(9.7'')
1536 x 2048 768 x 1024 O iPad 3, iPad 4,
Air 2
264 3:4 @2x 152 x 152 20px
iPad Mini 2
(7.9'')
1536 x 2048 768 x 1024 O Mini 3,4 326 3:4 @2x 152 x 152 20px
iPad Mini 1
(7.9'')
768 x 1024 768 x 1024 X 163 3:4 @1x 76 x 76 20px
iPad 2
(9.7'')
768 x 1024 768 x 1024 X iPad 1 132 3:4 @1x 76 x 76 20px

Thông tin trên những thiết bị iWatch:
Độ phân giải Độ phân giải
vật lý
Retina Những thiết bị
liên quan
PPI Tỷ lệ
màn hình
Tên
Hậu tố
icon cho
ứng dụng
(bắt buộc)
iWatch 38mm
(1.32")
272 x 340 O 326 4:5 @2x 172 x 172
iWatch 42mm
(1.5")
312 x 390 O 326 4:5 @2x 172 x 172

Ngoài những thông tin trên những hình ảnh cần thiết trước khi bạn submit ứng dụng iPhone và iPad lên trên Apple như:
- Hình ảnh khi launch ứng dụng với kích thước như độ phân giải của từng loại thiết bị. Ví dụ: như iPhone 6 thì hình launch với kích thước là 750 x 1334 (px).
- Icon cho ứng dụng hiển thị trên App Store với kích thước là 1024 x 1024 (px).
Lưu ý: Nếu bạn không có những hình ảnh này thì Apple sẽ reject ứng dụng của bạn.

Thông tin chi tiết phần cứng của những thiết bị của Apple các bạn có thể xem tại đây.

Tài liệu tham khảo:

- iOS HIG.
- iOS design.
- iOS icon.
- iWatch icon size.


Comments

Popular posts from this blog

So sánh những framework hỗ trợ viết ứng dụng trên SmartPhone

Khi lập trình trên SmartPhone bạn không nhất thiết phải học những ngôn ngữ đặc thù trên từng loại hệ điều hành thì mới có thể lập trình được. Ví dụ như muốn lập trình trên iOS thì phải học ngôn ngữ Objective-C hay Swift, muốn lập trình được trên Android thì học ngôn ngữ Java, muốn lập trình trên WinPhone thì học ngôn ngữ C#. Hiện nay có rất nhiều những framework giúp đỡ cho các bạn rất nhiều khi các bạn muốn viết trên nhiều nền tảng smartphone bằng ngôn ngữ mà bạn yêu thích. Theo mình thấy thì hiện nay có 3 loại như: Native App, Hybrid Mobile App, Native Cross-Platform App. 1. Native App: là những ứng dụng sử dụng những framework và ngôn ngữ lập trình của hệ thống cung cấp sẵn. Ví dụ như bạn muốn lập trình iOS thì phải cài XCode, học ngôn ngữ Objective-C hay Swift, lập trình Android thì cài Android Studio và học ngôn ngữ Java. - Ưu điểm: Hiệu năng thực thi ứng dụng trên nền tảng nhanh và hiệu quả. Không bị phụ thuộc vào bên thứ 3. Khi phát hành ứng dụng trên những Mobile Store cũng dễ...

Phân biệt biến kiểu Property, Public, Protected, Private trong ngôn ngữ Objective C

- Theo kinh nghiệm làm việc của mình với các bạn trong nhóm khi lập trình Objective-C và cũng đọc qua code của những project cũ. Ít khi nào mọi người để ý và khai báo đúng với ý đồ của từng đối tượng, và vi phạm quy tắc tính đóng gói, tính bảo mật thông tin của đối tượng trong lập trình hướng đối tượng (Tham khảo lý thuyết Lập trình hướng đối tượng tại trang Wiki ). - Theo ngôn ngữ lập trình Java, người ta khuyến khích mỗi khi dùng biến kiểu public thì nên đặt 1 biến private và hỗ trợ những hàm getter/setter để truy suất biến private đó.     + Nguyên nhân họ nói là đảm bảo tính đóng gói, và nếu sau này có thay đổi gì trên biến đó bạn có thể sửa được dễ dàng, chi tiết về vấn đề này ở đây .     + Nói tóm tại thì nguyên nhân chính là có thể kiểm soát được truy xuất đến giá trị của 1 đối tượng từ bên ngoài, có thể dễ dàng mở rộng code bằng cách override lại những hàm getter/setter. - Các bạn có thể áp dụng nguyên tắc đó từ bên Java qua ngôn ngữ lập trình Object...

Hướng dẫn dùng Serverless sử dụng Lambda AWS

1. Lambda function là gì? AWS Lambda cho phép bạn chạy mã mà không cần cung cấp hay quản lý máy chủ. Bạn chỉ phải trả tiền cho thời gian xử lý thông tin đã sử dụng. Với Lambda, bạn có thể chạy mã cho gần như toàn bộ các loại ứng dụng hay dịch vụ backend – tất cả đều không cần quản trị. Chỉ cần tải đoạn mã của bạn lên và Lambda sẽ lo hết những gì cần làm để chạy và mở rộng mã của bạn với mức độ có sẵn cao. Bạn có thể thiết lập mã của bạn tự động kích hoạt từ các dịch vụ AWS khác, hoặc gọi trực tiếp từ bất cứ ứng dụng web hay di động nào. Chi phí chạy trên lambda function rẻ so với chi phí bạn mua 1 con server, duy trì và quản trị nó ( ví dụ như bạn phải xử lý bất đồng bộ những request, khi lượng user bạn tăng đột biến bạn phải có cơ chế auto scale, chứ không thì server bị sẽ bị treo, khi server bị treo bạn phải tự động khởi động lại sẽ mất thời gian,... ).