thắc mắc Thắc mắc về triết lý của lập trình iOS

datbeo090 said:

Hiện tại mình đang làm tester cho một app mobile và hnay có 1 anh dev bảo triết lý lập trình iOS có không có resize ảnh nên mình đang có đang có thắc mắc này.
Mình đưa ra trường hợp ví dụ này (các thông số chỉ mang tính tỷ lệ): như trong ảnh thiết kế đính kèm, màn hình điện thoại trên thiết kế diện tích 1000pixel đặt vào trong đó 1 icon với diện tích 300pixel. Nhưng thực tế có 1 số thiết bị màn hình chỉ có 500 điểm ảnh thôi, nếu ko có thuật toán để resize lại diện tích của cái Icon cho phù hợp thì sẽ xảy ra trường hợp vị trí của Icon sẽ bị lệch với thiết kế (ảnh thực tế)
Ae dev iOS trong trường hợp này cho mình hỏi có giải pháp để hiển thị app trên thiết bị nào cũng có tỷ lệ tương đối giống với thiết kế, nhất định phải tuân theo những gì trong link Themes - iOS - Human Interface Guidelines - Apple Developer này. Mình thấy dùng trên IpX ok nhưng sang Ip5 bị lệch quá nhìn rất là kỳ

Click to expand...

pauncito said:

Không hiểu ý của chủ thớt , cái ảnh thực tế nó có bị bể hay gì đâu ta

Click to expand...

buonnguqua said:

Thằng dev ngu nó lừa thớt thôi
Trong lập trình giao diện có 1 khái niệm là Anchoring
Cái hình phải Anchoring ở Centre theo trục Y nữa

Click to expand...

datbeo090 said:

Ảnh thiết kế là designer làm dựa theo requiement. Cái ảnh thực tế là ông dev code xong cho ra cái kết quả như vậy vì bảo là không thể làm cho cái Icon ra giữa màn hình ở tất cả các thiết bị của Apple được. Fix cố định pixel của Icon trên tất cả các thiết bị, và liên quan đến vấn đề Safe Area trên từng thiết bị nữa
Do đó sẽ như mình nói sẽ xảy ra trường hợp là nếu dev làm đúng trên IpX do IpX độ phân giải cao hơn Ip5 hoặc Ip6 như ảnh đính kèm sẽ xảy ra trường hợp cái Icon sẽ bị lệch về phía trên hoặc dưới của màn hình

Click to expand...

view.translatesAutoresizingMaskIntoConstraints = false
view.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
view.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true

datbeo090 said:

View attachment 350334

Mình muốn hỏi thêm là các khoảng cách A, B, C (trên ảnh mô tả) trên màn hình là cố định theo số pixel, không thể tự động co/dãn theo từng thiết bị theo tỉ lệ màn hình cho phù hợp được?

Click to expand...

pauncito said:

Nhìn tấm hình ko hiểu ý nó đang diễn ta gì cho lắm, cái khoảng trắng giữa A và B là gì? thường chỗ đó sẽ là thanh Navigation nhưng theo hình thì nó quá to so với một thanh nav bình thường .

Nhưng chung quy thì A là cố định, mỗi thiết bị mỗi khác nhưng hoàn toàn có thể set constraints một cách dynamic.

B và C nếu bác muốn nó dynamic thì set nó theo tỉ lệ màn hình:

B = view.frame.size.height * 0.1
C = view.frame.size.height * 0.2

Click to expand...

datbeo090 said:

Mình xin diễn đạt lại vấn đề xem có phải nãy mình diễn đạt sai không:
View attachment 350491Ví dụ như ảnh mô tả bên trái là thiết kế cho màn hình theo độ phân giải của IpX, ảnh bên phải là màn hình kết quả hiển thị trên Ip6, chiều dài các đoạn thẳng A, B, C, D(đo theo pixel) là khoảng cách cách đối tượng đến rìa Safe Area, đoạn thẳng E là chiều dài Safe Area(cố định trên từng thiết bị Iphone, Ipad).

Dev bên mình đang giải thích là (các con số mình viết chỉ mang tính tượng trưng cho dễ hiểu): code theo thiết kế cho màn hình IpX, "diện tích Icon màu xanh lá cây là cố định trên mọi thiết bị", với chiều dài đoạn thẳng E dài 2000px so với đoạn thẳng D dài 500px, A dài 400px. Do đó khi sử dụng trên Ip6 đoạn E dài 1500px, Ip5 đoạn E dài 1000px vì diện tích Icon màu xanh lá cố định nên để hiển thị đầy đủ sẽ bị lệch lên trên như kết quả bên phải

Click to expand...

datbeo090 said:

Mình xin diễn đạt lại vấn đề xem có phải nãy mình diễn đạt sai không:
View attachment 350491Ví dụ như ảnh mô tả bên trái là thiết kế cho màn hình theo độ phân giải của IpX, ảnh bên phải là màn hình kết quả hiển thị trên Ip6, chiều dài các đoạn thẳng A, B, C, D(đo theo pixel) là khoảng cách cách đối tượng đến rìa Safe Area, đoạn thẳng E là chiều dài Safe Area(cố định trên từng thiết bị Iphone, Ipad).

Dev bên mình đang giải thích là (các con số mình viết chỉ mang tính tượng trưng cho dễ hiểu): code theo thiết kế cho màn hình IpX, "diện tích Icon màu xanh lá cây là cố định trên mọi thiết bị", với chiều dài đoạn thẳng E dài 2000px so với đoạn thẳng D dài 500px, A dài 400px. Do đó khi sử dụng trên Ip6 đoạn E dài 1500px, Ip5 đoạn E dài 1000px vì diện tích Icon màu xanh lá cố định nên để hiển thị đầy đủ sẽ bị lệch lên trên như kết quả bên phải

Click to expand...

datbeo090 said:

Mình xin diễn đạt lại vấn đề xem có phải nãy mình diễn đạt sai không:
View attachment 350491Ví dụ như ảnh mô tả bên trái là thiết kế cho màn hình theo độ phân giải của IpX, ảnh bên phải là màn hình kết quả hiển thị trên Ip6, chiều dài các đoạn thẳng A, B, C, D(đo theo pixel) là khoảng cách cách đối tượng đến rìa Safe Area, đoạn thẳng E là chiều dài Safe Area(cố định trên từng thiết bị Iphone, Ipad).

Dev bên mình đang giải thích là (các con số mình viết chỉ mang tính tượng trưng cho dễ hiểu): code theo thiết kế cho màn hình IpX, "diện tích Icon màu xanh lá cây là cố định trên mọi thiết bị", với chiều dài đoạn thẳng E dài 2000px so với đoạn thẳng D dài 500px, A dài 400px. Do đó khi sử dụng trên Ip6 đoạn E dài 1500px, Ip5 đoạn E dài 1000px vì diện tích Icon màu xanh lá cố định nên để hiển thị đầy đủ sẽ bị lệch lên trên như kết quả bên phải

Click to expand...

pauncito said:

Nếu giữ nguyên kích thước của tấm hình thì D với A nó phải lệch đi 1 đoạn là đúng rồi bác, vì để đảm bảo hình nằm giữa thì phải thay đổi D vs A:

Đây là cái em vừa làm thử

View attachment 350720

Click to expand...

datbeo090 said:

Hiện tại mình hiểu để cân đối thì phải resize cái Icon cho nó phù hợp với cái màn hình của Ip5 thì mới đảm bảo được tỉ lệ vị trí theo thiết kế.
Quay trở lại vấn đề resize/scale ảnh. Mình thắc mắc là code của iOS có thuật toán để nó tối ưu được hình ảnh cho cân đối trên mọi thiết bị không như trên Android không hay cái ảnh Icon phải giữ nguyên độ phân giải

Click to expand...

pauncito said:

Em vẫn ko hiểu ý bác như thiết kế là như thế nào? Ý bác là cái khoảng cách A phải luôn bằng nhau? Thế thì làm sao mà được, vì 1 con tràn viền, 1 con thì không
View attachment 350751

Click to expand...