Android từ cơ bản cho đến nâng cao - Android Design Fundamentals
White

khoatd92 viết ngày 04/06/2017

Với hơn một triệu ứng dụng có mặt trên Google Play Store thì việc ứng dụng của bạn có một thiết kế thật đẹp, bắt mắt và dễ sử dụng chắc chắn sẽ làm cho ứng dụng của bạn nổi bật hơn so với phần còn lại. Và loạt bài viết này sẽ giúp các bạn có một cái nhìn tổng quan về các quy tắc thiết kế trong Android và làm sao để tối ưu khi thiết kế UI trong Android. Sau đó chúng ta sẽ cùng tìm hiểu về Material Design đã xuất hiện kể từ Android 5.0
alt text

Đầu tiên thì bản thiết kế ứng dụng của bạn nên chạy được trên nhiều loại devices. Nghe có lý phết nhỉ? Vì giờ số kiểu và số lượng devices của Android nó lên tới con số kinh khủng rồi, mình cũng chả biết là bao nhiêu, chỉ biết là rất nhiều, từ tiny watches cho tới phone, tablets, kể cả cars và TV.

alt text

Tất nhiên việc làm cho bản thiết kế ứng dụng của bạn chay được trênnhiều loại devices khác nhau nhưng vẫn giữ được trải nghiệm tuyệt vời theo mong muốn của bạn thì không phải là việc dễ dàng nhỉ. Cơ mà tin vui là Android đã nghĩ đến việc support cho bạn làm việc này kể từ ngày đầu tiên Android ra đời. Android cung cấp cho bạn một loạt công cụ và kỹ thuật cho việc xử lý các thiết bị khác nhau một cách dễ dàng và duyên dáng như áo dài phụ nữ Việt Nam ahihi.

Vậy mục đích của bạn là phải tạo ra ứng dụng chạy được trên nhiều loại devices và điều chỉnh giao diện ứng dụng phụ thuộc vào loại devices đang chạy (ex: điện thoại or tablet). OK vậy đầu tiên chúng ta cần phải hiểu rõ cái gì để tạo ra một thiết kế như mong muốn?

Đầu tiên hãy nói về số lượng pixels trên màn hình điện thoại. Khi bạn mua điện thoại thì bạn thường để ý tới screen resolution của nó đúng hem? Nhưng thực ra nó không thực sự có ích khi design cho Android vì nếu bạn nghĩ về screen của device xét về mặt pixels thì bạn đã bỏ qua một khía cạnh rất quan trọng khác, đó là kích thước vật lý. Nghĩa là nếu bạn có một màn hình với mật độ pixels cao nhưng khả năng tương tác giữa người dùng và ứng dụng của bạn không được đủ tốt do bản thiết kế design của bạn không đủ tốt (button nhỏ, textview nhỏ vì bạn design trên một màn hình có mật độ pixels khác) thì nó cũng không có nghĩa lý gì nhiều.

Hãy quay về quá khứ, thời điểm mà Android ra mắt thì chỉ có một device là T-Mobile G1 thần thánh

alt text

Và vì chỉ có một loại device duy nhất thì nó rất đơn giản cho việc design với resolution (độ phân giải) của device này. Những designers thường chỉ design cho một màn hình duy nhấ. Họ design ra những assets cho một hoặc hai loại flagship devices với pixel sizes là y nhau. Nhưng khi làm vậy thì giao diện sẽ nhìn rất tệ trên những devices có độ phân giải khác. Và rồi họ nhận ra việc tạo ra những assets với số lượng pixel giống nhau cho tất cả devices không giúp ích cho việc scale nên họ cần một hệ thống khác, xử lý assets trên những devices khác nhau để cải thiện UI.
Và thế là khái niệm Density-independent pixels ra đời. Các bạn có thể tìm hiểu rõ thêm ở bài viết này của mình.

alt text

Đối với Density-independent pixels hay còn gọi là dip hay dp thì designer có thể tạo ra các loại assets chuẩn cho các loại màn hình mà không quan trọng về resolution (độ phân giải) hay density (mật độ pixel) của devices. Một dp (density-independent pixel) sẽ tương đương với 1 pixel trên màn hình 160 dpi. Vậy với màn hình 320 dpi thì như thế nào? Họ thường gọi đó là chuẩn 2x, nghĩa là tại màn hình 320 dpi thì 1 dp sẽ tương đương với 2 px. Vì vậy làm việc với dp sẽ giúp bạn giải quyết được một số vấn đề về những devices có cùng pixel resolution nhưng khác space (nghĩa là có thể 1 cái là tablet, 1 cái là điện thoại cơ mà vẫn cũng pixel resolution).

alt text

OK tiếp đến chúng ta hãy xem density-independent pixels (dp) giúp chúng ta dễ thở hơn như thế nào nhé.

Thay vì design cho tất cả các loại màn hình với chuẩn dpi khác nhau như 311 dpi, 442 dpi etc thì Android đã giúp chúng ta groups các devices đó lại với nhau và mỗi device sẽ được đặt theo các groups đã được định nghĩa sẵn theo mật độ pixel. Ví dụ device 311 dpi sẽ ở trong group 320 dpi hay còn gọi là XHDPI và device 442 dpi sẽ được chạy theo chuẩn của group 480 dpi hay còn gọi là XXHDPI. Mặc dù chúng ta có thể làm việc với các chuẩn màn hình có mật độ pixel cực thấp như 120 dpi hoặc cực cao như 640 dpi nhưng điều đó thực sự không cần thiết. Chúng ta chỉ nên quan tâm tới bốn loại ở giữa là 160 dpi, 240 dpi, 320 dpi và 480 dpi. Các nhóm này còn giúp cho bạn kiểm soát và tự động scale các assets của bạn ví dụ như icons. Và vì thế bạn không cần phải tạo cả trăm versions của một icon cho hàng trăm màn hình khác nhau mà bạn chỉ cần tạo cho 4 groups màn hình nói trên.

alt text

Tiếp đến mình sẽ nói qua về icon bằng cách lấy một ví dụ, giả sử bạn chạy một ứng dụng rất cũ trên một device mới như S8 (ước mơ của mình :(( e có một khát khao) thì thỉnh thoảng bạn sẽ thấy một số icon bị hơi mờ đúng không?

alt text

Là vì app sử dụng asset có độ phân giải thấp (low-resolution) cho màn hình lớn hoặc sử dụng chung cho tất cả các loại màn hình. Và cách dễ nhất để improve là cung cấp cho nó một asset với độ phân giải cao hơn (high-resolution).

alt text

Nhìn đệp hơn nhỉ?

OK lời khuyên ở đây là gì? Đó là bạn nên cung cấp nhiều loại assets cho tất cả các loại group nói trên nhưng mà nếu bí bách quá thì bạn cũng có thể cung cấp assets cho loại màn hình XHDPI hoặc XXHDPI cũng được, và để Android tự động scale down nó xuống. Nó không khuyến khích cơ mà nếu bí quá thì hãy cố gắng cung cấp assets cho loại màn hình có độ phân giải lớn nhất và để Android tự scale. Nhưng cách tốt nhất vẫn là cung cấp từng assets cho từng loại group màn hình nói trên, vì sao ư?

alt text

Vì sẽ có risks khi để Android tự động scale. Nó sẽ ảnh hưởng một chút tới performance khi Android phải giúp bạn scale. Thực ra thuật toán của Android để scale down rất là good nhưng không phải hoàn hảo. Nó thực sự là không tốt khi bạn scale từ màn hình có độ phân giải lớn nhất xuống màn hình có độ phân giải nhỏ nhất. Nhưng tin tốt là có rất nhiều tools có thể giúp bạn tự động tạo ra các loại assets cho các group nói trên. Ví dụ một tool để tạo icon trong Android Asset Studio nè .
Vậy tạm ổn cho việc làm rõ khi nào cần cung cấp nhiều loại assets rồi nha.

Sau khi có được nhiều loại assets cho nhiều loại màn hình thì bỏ vào đâu nhỉ? Hãy nhìn một chút vào res tree folders của Android nhé.
alt text
Như đã trình bày phía trên thì bạn có thể thấy HDPI = 240 dpi, MDPI = 160 dpi, XHDPI = 320 dpi, XXHDPI = 480 dpi.
Mình sẽ đi vào từng folder drawable nhé.
Đầu tiên là folder drawable, thường chúng ta sẽ đặt những file XML ở đây. Tiếp đến là folder drawable-nodpi, nơi chúng ta nên đặt những resource mà không nên được scale theo mật độ điểm ảnh (density) ở đây như background image.

Ngoài ra, bạn có thể tạo các folder như layout-w600dp và đặt những layout file phục vụ cho màn hình có độ rộng là 600dp, ngoài ra bạn có thể tạo thêm các styles.xml file cho riêng Android version nào đó như Lollipop chẳng hạn (values-v21/styles.xml). À nếu bạn muốn tạo các resource phụ thuộc vào vị trí địa lý như Nhật Bản, Hàn Quốc thì bạn cũng có thể hoàn toàn tạo ra các folder drawable khác như drawable-mdpi-ja
alt text
Tạm thời dừng ở đây đã nha. Mình sẽ cố gắng viết tiếp phần sau sớm nhất. Mong được mọi người góp ý chia sẻ để bài viết được hoàn thiện hơn, cũng như mình được học hỏi thêm.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

khoatd92

6 bài viết.
50 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
28 7
Hi các bạn, cơ bản là hiện giờ mình đang làm trong một dự án sử dụng WebRTC và mình muốn chia sẻ với mọi nguời những gì mình biết và chúng ta có th...
khoatd92 viết hơn 2 năm trước
28 7
White
23 5
Xin chào các bạn, thân là một lập trình viên Android, mình đã gặp khá nhiều trường hợp(kể cả mình) không đào sâu nghiên cứu chi tiết các thành phần...
khoatd92 viết hơn 2 năm trước
23 5
White
12 6
Tiếp tục serial về WebRTC. (Link) Hôm nay mình sẽ giới thiệu về cơ chế hoạt động của WebRTC. Cần những gì để tạo được một application WebRTC. Như ...
khoatd92 viết hơn 2 năm trước
12 6
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
50 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!