Html sửa kích thước màn hình

Các thiết bị Android không chỉ có các kích thước màn hình khác nhau [điện thoại, máy tính bảng, TV, v.v.] mà màn hình của chúng cũng có các kích thước pixel khác nhau. Nghĩa là, trong khi một thiết bị có 160 pixel mỗi inch, thì một thiết bị khác có 480 pixel trong cùng một không gian. Nếu bạn không xem xét những thay đổi về mật độ điểm ảnh này, thì hệ thống có thể chia tỷ lệ hình ảnh của bạn [dẫn đến hình ảnh bị mờ] hoặc hình ảnh có thể xuất hiện ở kích thước hoàn toàn sai

Trang này cho bạn biết cách bạn có thể thiết kế ứng dụng của mình để hỗ trợ các mật độ pixel khác nhau bằng cách sử dụng các đơn vị đo lường không phụ thuộc vào độ phân giải và cung cấp các tài nguyên bitmap thay thế cho từng mật độ pixel

Xem video dưới đây để biết tổng quan về các kỹ thuật này

Để biết thêm thông tin về cách thiết kế nội dung biểu tượng thực tế, hãy xem nguyên tắc về biểu tượng thiết kế material design

Sử dụng pixel không phụ thuộc vào mật độ

Cạm bẫy đầu tiên bạn phải tránh là sử dụng pixel để xác định khoảng cách hoặc kích thước. Xác định kích thước bằng pixel là một vấn đề vì các màn hình khác nhau có mật độ pixel khác nhau, do đó, cùng một số pixel có thể tương ứng với các kích thước vật lý khác nhau trên các thiết bị khác nhau

Hình 1. Hai màn hình có cùng kích thước có thể có số pixel khác nhau

Để duy trì kích thước hiển thị của giao diện người dùng của bạn trên các màn hình có mật độ khác nhau, bạn phải thiết kế giao diện người dùng của mình bằng cách sử dụng các pixel không phụ thuộc vào mật độ [dp] làm đơn vị đo lường của bạn. Một dp là một đơn vị pixel ảo tương đương với một pixel trên màn hình có mật độ trung bình [160dpi; mật độ "đường cơ sở"]. Android dịch giá trị này thành số pixel thực thích hợp cho mỗi mật độ khác

Ví dụ, hãy xem xét hai thiết bị trong hình 1. Nếu bạn xác định chế độ xem rộng "100px", chế độ xem sẽ xuất hiện lớn hơn nhiều trên thiết bị bên trái. Vì vậy, thay vào đó, bạn phải sử dụng "100dp" để đảm bảo nó xuất hiện cùng kích thước trên cả hai màn hình

Tuy nhiên, khi xác định kích thước văn bản, thay vào đó, bạn nên sử dụng pixel có thể mở rộng [sp] làm đơn vị của mình [nhưng không bao giờ sử dụng sp cho kích thước bố cục]. Theo mặc định, đơn vị sp có cùng kích thước với dp, nhưng đơn vị này thay đổi kích thước dựa trên kích thước văn bản ưa thích của người dùng

Ví dụ: khi bạn chỉ định khoảng cách giữa hai chế độ xem, hãy sử dụng

0

Khi chỉ định kích thước văn bản, hãy luôn sử dụng

1

Chuyển đổi đơn vị dp sang đơn vị pixel

Trong một số trường hợp, bạn sẽ cần thể hiện kích thước bằng

0 và sau đó chuyển đổi chúng thành pixel. Việc chuyển đổi đơn vị dp thành pixel màn hình rất đơn giản

3

Ghi chú. Bạn không bao giờ nên mã hóa cứng phương trình này để tính pixel. Thay vào đó, hãy sử dụng

4 để chuyển đổi nhiều loại kích thước [
0, 
1, v.v.] thành pixel cho bạn

Hãy tưởng tượng một ứng dụng trong đó cử chỉ cuộn hoặc vuốt được nhận dạng sau khi ngón tay của người dùng đã di chuyển ít nhất 16 pixel. Trên màn hình cơ sở, màn hình của người dùng phải di chuyển bằng

7, tương đương với 1/10 inch [hoặc 2. 5 mm] trước khi cử chỉ được nhận dạng. Trên thiết bị có màn hình mật độ cao [240dpi], người dùng phải di chuyển bằng 
8, tương đương với 1/15 inch [hoặc 1. 7mm]. Khoảng cách ngắn hơn nhiều và do đó ứng dụng có vẻ nhạy cảm hơn với người dùng

Để khắc phục sự cố này, ngưỡng cử chỉ phải được thể hiện bằng mã trong

0, sau đó được chuyển đổi thành pixel thực tế. Ví dụ

Kotlin

2

Java

3

Trường

20 chỉ định hệ số tỷ lệ được sử dụng để chuyển đổi đơn vị 
0 thành pixel, theo mật độ pixel hiện tại. Trên màn hình mật độ trung bình, 
20 bằng 1. 0; . 5; . 0; . 75. Con số này được sử dụng bởi 
4 để có được số điểm ảnh thực tế cho màn hình hiện tại

Sử dụng các giá trị cấu hình được chia tỷ lệ trước

Bạn có thể sử dụng lớp

24 để truy cập khoảng cách, tốc độ và thời gian phổ biến được sử dụng bởi hệ thống Android. Chẳng hạn, khoảng cách tính bằng pixel được khung sử dụng làm ngưỡng cuộn có thể thu được bằng 
25

Kotlin

0

Java

1

Các phương thức trong

24 bắt đầu bằng tiền tố 
27 được đảm bảo trả về giá trị tính bằng pixel sẽ hiển thị chính xác bất kể mật độ pixel hiện tại là bao nhiêu

Cung cấp bitmap thay thế

Để cung cấp chất lượng đồ họa tốt trên các thiết bị có mật độ pixel khác nhau, bạn nên cung cấp nhiều phiên bản của từng bitmap trong ứng dụng của mình—một phiên bản cho mỗi nhóm mật độ, ở độ phân giải tương ứng. Mặt khác, Android phải chia tỷ lệ bitmap của bạn để nó chiếm cùng một không gian hiển thị trên mỗi màn hình, dẫn đến các thành phần tạo tỷ lệ chẳng hạn như mờ

Hình 2. Kích thước tương đối cho ảnh bitmap ở các kích thước mật độ khác nhau

Có một số nhóm mật độ có sẵn để sử dụng trong ứng dụng của bạn. Bảng 1 mô tả các vòng loại cấu hình khác nhau có sẵn và chúng áp dụng cho loại màn hình nào

Bảng 1. Vòng loại cấu hình cho các mật độ pixel khác nhau

Vòng loại mật độMô tả
28Tài nguyên dành cho màn hình mật độ thấp [ldpi] [~120dpi]. 
29Tài nguyên dành cho màn hình có mật độ trung bình [mdpi] [~160dpi]. [Đây là mật độ cơ bản. ]
30Tài nguyên cho màn hình mật độ cao [hdpi] [~240dpi]. 
31Tài nguyên dành cho màn hình có mật độ cực cao [xhdpi] [~320dpi]. 
32Tài nguyên dành cho màn hình có mật độ cực cao [xxhdpi] [~480dpi]. 
33Tài nguyên cho việc sử dụng mật độ cực cao [xxxhdpi] [~640dpi]. 
34Tài nguyên cho mọi mật độ. Đây là những tài nguyên không phụ thuộc vào mật độ. Hệ thống không mở rộng quy mô tài nguyên được gắn thẻ hạn định này, bất kể mật độ của màn hình hiện tại. 
35Tài nguyên cho màn hình ở đâu đó giữa mdpi và hdpi; . Đây không được coi là nhóm mật độ "chính". Nó chủ yếu dành cho TV và hầu hết các ứng dụng không cần đến nó—việc cung cấp tài nguyên mdpi và hdpi là đủ cho hầu hết các ứng dụng và hệ thống sẽ mở rộng chúng khi thích hợp. Nếu bạn thấy cần cung cấp tài nguyên tvdpi, bạn nên định cỡ chúng ở hệ số 1. 33*mdpi. Ví dụ: hình ảnh 100px x 100px cho màn hình mdpi phải là 133px x 133px cho tvdpi

Để tạo các bản vẽ bitmap thay thế cho các mật độ khác nhau, bạn nên làm theo 3. 4. 6. 8. 12. Tỷ lệ chia tỷ lệ 16 giữa sáu mật độ chính. Ví dụ: nếu bạn có một ảnh bitmap có thể vẽ được với kích thước 48x48 pixel dành cho màn hình có mật độ trung bình, thì tất cả các kích thước khác nhau phải là

  • 36x36 [0. 75x] cho mật độ thấp [ldpi]
  • 48x48 [1. 0x đường cơ sở] cho mật độ trung bình [mdpi]
  • 72x72 [1. 5x] cho mật độ cao [hdpi]
  • 96x96 [2. 0x] cho mật độ cực cao [xhdpi]
  • 144x144 [3. 0x] cho mật độ cực cao [xxhdpi]
  • 192x192 [4. 0x] cho mật độ cực-cực-cực-cao [xxxhdpi]

Sau đó, đặt các tệp hình ảnh được tạo vào thư mục con thích hợp bên dưới

36 và hệ thống sẽ tự động chọn đúng tệp dựa trên mật độ pixel của thiết bị mà ứng dụng của bạn đang chạy trên đó

3

Sau đó, bất cứ khi nào bạn tham khảo

37, hệ thống sẽ chọn bitmap phù hợp dựa trên dpi của màn hình. Nếu bạn không cung cấp tài nguyên dành riêng cho mật độ cho mật độ đó, thì hệ thống sẽ chọn kết quả phù hợp nhất tiếp theo và chia tỷ lệ cho phù hợp với màn hình

Mẹo. Nếu bạn có một số tài nguyên có thể vẽ được mà hệ thống sẽ không bao giờ mở rộng quy mô [có lẽ vì bạn tự thực hiện một số điều chỉnh đối với hình ảnh trong thời gian chạy], bạn nên đặt chúng vào một thư mục có bộ định cấu hình

34. Các tài nguyên có vòng loại này được coi là bất khả tri về mật độ và hệ thống sẽ không mở rộng chúng

Để biết thêm thông tin về các vòng loại cấu hình khác và cách Android chọn tài nguyên phù hợp cho cấu hình màn hình hiện tại, hãy xem phần Cung cấp tài nguyên

Đặt các biểu tượng ứng dụng trong thư mục mipmap

Giống như tất cả nội dung bitmap khác, bạn cần cung cấp các phiên bản dành riêng cho mật độ của biểu tượng ứng dụng của mình. Tuy nhiên, một số trình khởi chạy ứng dụng hiển thị biểu tượng ứng dụng của bạn lớn hơn tới 25% so với kích thước mà giới hạn mật độ của thiết bị yêu cầu

Ví dụ: nếu giới hạn mật độ của thiết bị là xxhdpi và biểu tượng ứng dụng lớn nhất mà bạn cung cấp là ở

39, thì ứng dụng trình khởi chạy sẽ tăng tỷ lệ biểu tượng này và điều đó làm cho biểu tượng trông kém sắc nét hơn. Vì vậy, bạn nên cung cấp biểu tượng trình khởi chạy mật độ cao hơn nữa trong thư mục 
00. Giờ đây, trình khởi chạy có thể sử dụng nội dung xxxhdpi để thay thế

Vì biểu tượng ứng dụng của bạn có thể được phóng to như thế này, bạn nên đặt tất cả các biểu tượng ứng dụng của mình vào thư mục ________ 201 thay vì thư mục ________ 202. Không giống như thư mục

02, tất cả các thư mục 
01 đều được giữ lại trong APK ngay cả khi bạn tạo các APK dành riêng cho mật độ. Điều này cho phép các ứng dụng launcher chọn biểu tượng có độ phân giải tốt nhất để hiển thị trên màn hình chính

2

Để biết nguyên tắc thiết kế biểu tượng, hãy xem tài liệu hướng dẫn về biểu tượng

Để được trợ giúp tạo biểu tượng ứng dụng, hãy xem Tạo biểu tượng ứng dụng bằng Image Asset Studio

Sử dụng đồ họa vector thay thế

Một cách khác để tạo nhiều phiên bản hình ảnh có mật độ cụ thể là chỉ tạo một đồ họa vector. Đồ họa vector tạo hình ảnh bằng XML để xác định đường dẫn và màu sắc, thay vì sử dụng pixel bitmap. Như vậy, đồ họa vector có thể chia tỷ lệ theo bất kỳ kích thước nào mà không cần chia tỷ lệ tạo tác, mặc dù chúng thường tốt nhất cho các hình minh họa như biểu tượng, không phải ảnh

Đồ họa véc tơ thường được cung cấp dưới dạng tệp SVG [Đồ họa véc tơ có thể mở rộng], nhưng Android không hỗ trợ định dạng này, do đó bạn phải chuyển đổi tệp SVG sang định dạng có thể vẽ véc tơ của Android

Bạn có thể dễ dàng chuyển đổi SVG thành vectơ có thể vẽ được từ Android Studio bằng Vector Asset Studio như sau

  1. Trong cửa sổ Project, nhấp chuột phải vào thư mục res và chọn New > Vector Asset
  2. Chọn tệp cục bộ [SVG, PSD]
  3. Định vị tệp bạn muốn nhập và thực hiện bất kỳ điều chỉnh nào

    Hình 3. Nhập SVG bằng Android Studio

    Bạn có thể nhận thấy một số lỗi xuất hiện trong cửa sổ Asset Studio, cho biết một số thuộc tính của tệp mà các bản vẽ vector không hỗ trợ. Nhưng điều này sẽ không ngăn bạn nhập—các thuộc tính không được hỗ trợ sẽ bị bỏ qua

  4. Bấm tiếp

  5. Trên màn hình tiếp theo, xác nhận nơi bạn muốn tệp trong dự án của mình và nhấp vào Kết thúc

    Bởi vì một vectơ có thể vẽ được có thể được sử dụng trên tất cả các mật độ pixel, nên tệp này sẽ nằm trong thư mục có thể vẽ mặc định của bạn [bạn không cần sử dụng các thư mục dành riêng cho mật độ]

    3

Để biết thêm thông tin về cách tạo đồ họa vector, hãy đọc tài liệu Vector Drawable

Lời khuyên cho các vấn đề về mật độ không phổ biến

Phần này mô tả thêm về cách Android thực hiện chia tỷ lệ cho ảnh bitmap ở các mật độ pixel khác nhau và cách bạn có thể kiểm soát thêm cách vẽ ảnh bitmap ở các mật độ khác nhau. Trừ khi ứng dụng của bạn xử lý đồ họa hoặc bạn gặp sự cố khi chạy trên các mật độ pixel khác nhau, bạn có thể bỏ qua phần này

Để hiểu rõ hơn về cách bạn có thể hỗ trợ nhiều mật độ khi thao tác đồ họa trong thời gian chạy, bạn nên hiểu rằng hệ thống giúp đảm bảo tỷ lệ phù hợp cho ảnh bitmap theo các cách sau

  1. Định tỷ lệ trước tài nguyên [chẳng hạn như bản vẽ bitmap]

    Dựa trên mật độ của màn hình hiện tại, hệ thống sử dụng mọi tài nguyên dành riêng cho mật độ từ ứng dụng của bạn. Nếu tài nguyên không có sẵn với mật độ chính xác, hệ thống sẽ tải tài nguyên mặc định và tăng hoặc giảm tỷ lệ chúng khi cần. Hệ thống giả định rằng các tài nguyên mặc định [những tài nguyên từ một thư mục không có bộ định cấu hình] được thiết kế cho mật độ điểm ảnh cơ sở [mdpi] và sẽ thay đổi kích thước các ảnh bitmap đó thành kích thước thích hợp cho mật độ điểm ảnh hiện tại

    Nếu bạn yêu cầu kích thước của tài nguyên được chia tỷ lệ trước, hệ thống sẽ trả về các giá trị đại diện cho kích thước sau khi chia tỷ lệ. Ví dụ: một bitmap được thiết kế ở 50x50 pixel cho màn hình mdpi được chia tỷ lệ thành 75x75 pixel trên màn hình hdpi [nếu không có tài nguyên thay thế cho hdpi] và hệ thống báo cáo kích thước như vậy

    Có một số tình huống mà bạn có thể không muốn Android mở rộng trước tài nguyên. Cách dễ nhất để tránh mở rộng quy mô trước là đặt tài nguyên vào thư mục tài nguyên với bộ định cấu hình

    34. Ví dụ

    5

    Khi hệ thống sử dụng bitmap

    06 từ thư mục này, hệ thống sẽ không chia tỷ lệ dựa trên mật độ thiết bị hiện tại

  2. Tự động chia tỷ lệ kích thước và tọa độ pixel

    Bạn có thể tắt kích thước và hình ảnh thu nhỏ trước bằng cách đặt thành

    08 trong tệp kê khai hoặc theo chương trình cho 
    09 bằng cách đặt 
    10 thành 
    08. Trong trường hợp này, hệ thống tự động điều chỉnh tỷ lệ bất kỳ tọa độ pixel tuyệt đối và giá trị kích thước pixel nào tại thời điểm vẽ. Nó thực hiện điều này để đảm bảo rằng các thành phần màn hình được xác định bằng pixel vẫn được hiển thị ở cùng kích thước vật lý như chúng sẽ ở mật độ pixel cơ sở [mdpi]. Hệ thống xử lý tỷ lệ này một cách minh bạch cho ứng dụng và báo cáo kích thước pixel được chia tỷ lệ cho ứng dụng, thay vì kích thước pixel vật lý

    Chẳng hạn, giả sử một thiết bị có màn hình mật độ cao WVGA, có kích thước 480x800 và có cùng kích thước với màn hình HVGA truyền thống, nhưng thiết bị đó đang chạy một ứng dụng đã tắt tính năng chia tỷ lệ trước. Trong trường hợp này, hệ thống sẽ "nói dối" ứng dụng khi truy vấn kích thước màn hình và báo cáo 320x533 [bản dịch mdpi gần đúng cho mật độ pixel]. Sau đó, khi ứng dụng thực hiện các thao tác vẽ, chẳng hạn như vô hiệu hóa hình chữ nhật từ [10,10] thành [100, 100], hệ thống sẽ biến đổi tọa độ bằng cách chia tỷ lệ cho chúng một lượng phù hợp và thực sự vô hiệu hóa vùng [15,15] thành . Sự khác biệt này có thể gây ra hành vi không mong muốn nếu ứng dụng của bạn thao tác trực tiếp với bitmap được chia tỷ lệ, nhưng đây được coi là sự đánh đổi hợp lý để giữ cho hiệu suất của ứng dụng ở mức tốt nhất có thể. Nếu bạn gặp trường hợp này, hãy đọc Chuyển đổi đơn vị dp sang đơn vị pixel

    Thông thường, bạn không nên tắt tính năng chia tỷ lệ trước. Cách tốt nhất để hỗ trợ nhiều màn hình là làm theo các kỹ thuật cơ bản được mô tả trong tài liệu này

Nếu ứng dụng của bạn thao tác ảnh bitmap hoặc tương tác trực tiếp với các pixel trên màn hình theo một số cách khác, bạn có thể cần thực hiện các bước bổ sung để hỗ trợ các mật độ pixel khác nhau. Ví dụ: nếu bạn phản hồi cử chỉ chạm bằng cách đếm số pixel mà ngón tay lướt qua, bạn cần sử dụng các giá trị pixel không phụ thuộc vào mật độ thích hợp, thay vì pixel thực, nhưng bạn có thể dễ dàng

Kiểm tra trên tất cả các mật độ điểm ảnh

Điều quan trọng là phải thử nghiệm ứng dụng của bạn trên nhiều thiết bị có mật độ pixel khác nhau để bạn có thể đảm bảo giao diện người dùng của mình chia tỷ lệ chính xác. Thử nghiệm trên thiết bị vật lý rất dễ dàng nhưng bạn cũng có thể sử dụng Trình giả lập Android nếu bạn không có quyền truy cập vào thiết bị vật lý cho tất cả các mật độ pixel khác nhau

Nếu muốn thử nghiệm trên thiết bị thực nhưng không muốn mua thiết bị, bạn có thể sử dụng Phòng thí nghiệm kiểm tra Firebase để truy cập thiết bị trong trung tâm dữ liệu của Google

Chủ Đề