20%

KHUYẾN MẠI

Giảm giá khi nâng cấp web năm 2021

Làm sao thiết kế nhiều màn hình trong Android

Để thiết kế nhiều màn hình thì cần áp dụng các kỹ thuật sau:
– ConstraintLayout (ConstraintLayout tương ứng với Auto Layout bên iOS)
– Tính phần trăm tỷ lệ giữa các view trong màn hình với nhau (cái này luôn được kết hợp)

Trong ConstraintLayout dùng Guideline để làm mốc cho các thành phần khác, Guideline có kiểu ngang và dọc và được tính theo %, ngoài ra không thể không quên dùng các loại attr (thuộc tính) để làm mối liên hệ giữa các thành phần trong màn hình:

Phần này sẽ mình nói qua thôi còn chi tiết mình sẽ viết vào 1 bài khác đầy đủ hơn.

android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@+id/guideline4"
app:layout_constraintBottom_toBottomOf="@+id/editTextWrapper"
app:layout_constraintLeft_toLeftOf="@+id/editTextWrapper"
app:layout_constraintRight_toRightOf="@+id/editTextWrapper"

Khi thiết kế đa màn hình thì cần chú ý:

1. Chú ý đến kích thước màn hình

Cái này cần thiết kế các file layout.xml sao cho hợp lý với kích thước vật lý thật của màn hình điện thoại (tạo nhiều thư mục layout).
ví dụ:
res/layout/my_layout.xml // layout for normal screen size (“default”)
res/layout-large/my_layout.xml // layout for large screen size
res/layout-xlarge/my_layout.xml // layout for extra-large screen size
res/layout-xlarge-land/my_layout.xml // màn hình ngang dọc

Kích thước tương ứng:

  • xlarge màn hình có chiều rộng nhỏ nhất là 720dp và có chiều dài thấp nhất là 960dp
  • large màn hình có chiều rộng nhỏ nhất là 480dp và có chiều dài thấp nhất là 640dp
  • normal màn hình có chiều rộng nhỏ nhất là 320dp và có chiều dài thấp nhất là 470dp
  • small màn hình có chiều rộng nhỏ nhất là 320dp và có chiều dài thấp nhất là 426dp

Chú ý: Không phải màn hình bé mà có độ phân giải thấp đâu nhé.

2. Chú ý đến độ phân giải màn hình

Chỉ quan tâm đến thư mục drawable (cần tạo ra nhiều thư mục drawable). Cái này cần xử lý độ mịn của ảnh là chính.
Ví dụ:
res/drawable-mdpi/graphic.png // bitmap for medium-density
res/drawable-hdpi/graphic.png // bitmap for high-density
res/drawable-xhdpi/graphic.png // bitmap for extra-high-density
res/drawable-xxhdpi/graphic.png // bitmap for extra-extra-high-density

Mật độ điểm ảnh tương ứng:

  • ldpi (low) ~120dpi
  • mdpi (medium) ~160dpi
  • hdpi (high) ~240dpi
  • xhdpi (extra-high) ~320dpi
  • xxhdpi (extra-extra-high) ~480dpi
  • xxxhdpi (extra-extra-extra-high) ~640dpi

3. Chú ý đến chất lượng của icon launcher (ngoài home để người dùng nhìn và mở app).

Cái này không liên quan đến kích thước màn hình nhưng mình cứ note tại đây để bạn biết luôn.

Nếu muốn icon to hơn và mịn hơn ta làm lần lượt như sau: tạo ảnh chất lượng trên photoshop sau đó vào trang online convert nó bằng tool (xem thêm Tạo icon cho app trong android), sau đó copy vào dự án.
Ví dụ:
res/mipmap-mdpi/my_icon.png // launcher icon for medium-density
res/mipmap-hdpi/my_icon.png // launcher icon for high-density
res/mipmap-xhdpi/my_icon.png // launcher icon for extra-high-density
res/mipmap-xxhdpi/my_icon.png // launcher icon for extra-extra-high-density
res/mipmap-xxxhdpi/my_icon.png // launcher icon for extra-extra-extra-high-density

Kết hợp thêm các công cụ sau:

Trang dùng để nén dung lượng ảnh mà kích thước ko thay đổi
https://www.iloveimg.com/compress-image

Trang dùng để tạo nhiều phiên bản ảnh cho các thiết bị độ phân giải thấp (tạo ra nhiều kích thước khác nhau)
https://appicon.co/#image-sets

Các bài viết không xem thì tiếc:

《Chia sẻ kiến thức này là người hào sảng》
---------------------------------------

Mình vừa đăng 1 video lên Youtube theo phong cách YOLO cách đây vài ngày trong lúc dịch COVID-19 vẫn kéo dài này.

Nếu có thời gian thì xem giúp mình có ổn không nhé? Bạn có thể nhận xét video trong Youtube cũng được nha!

LINK VIDEO: https://youtu.be/kQxUIpvplYc

Nếu bận thì lưu lại xem sau, mời bạn đọc bài khác

---------------------------------------
 
 
 
 
Facetime iPhone

Main Menu