Mỗi Activity thường sử dụng một Layout để hiển thị với người dùng. Để ứng dụng thu hút người dùng thì layout luôn là một phần không thể thiếu. Layout chính là phần giao diện, là bộ mặt mà người dùng trực tiếp nhìn vào.
Việc viết layout trong Android không phải là khó vì Android Studio có hỗ trợ kéo thả. Về Layout trong Android thì code5s.com cũng đã có một bài viết nói về vấn đề này, giới thiệu một số thông tin cơ bản về Layout trong Android. Nhưng thiết kế Layout với trải nghiệm tốt, hỗ trợ nhiều kích thước màn hình khác nhau thì lại không phải là dễ.
1. Các loại layout trong Android
Trong Android thì có nhiều loại layout, mỗi loại sẽ có tác dụng riêng. Phần này sẽ giới thiệu với các bạn các loại layout hay được sử dụng nhất khi thiết kế giao diện cho ứng dụng
LinearLayout
LinearLayout có lẽ là loại layout hay được sử dụng nhất vì tính đơn giản của nó. LinearLayout sẽ bố trí các view theo dạng khối và không đè lên nhau. LinearLayout có hai chiều bố trí bố cục là:
- Vertical Orientation – các view bên trong sẽ được sắp xếp theo chiều dọc. Điều này cũng có nghĩa là mỗi view sẽ chiếm 1 hàng.
- Horizontal Orientation – Tương tự nhưng theo chiều ngang. Điều này cũng có nghĩa là mỗi view sẽ chiếm 1 cột.
Nếu bạn chưa hình dung ra thì mình minh họa bằng hình vẽ bên dưới. Tại ví dụ này, LinearLayout được thiết lập là Vertical Orientation.
Do đó Text View, Edit Text, và Button được canh chỉnh theo chiều dọc (từ trên xuống dưới).
RelativeLayout
RelativeLayout là loại layout mà ở đó vị trí các widget (Text Views, Buttons,…) phụ thuộc vào vị trí các widget khác hoặc view cha.
Ví dụ về RelativeLayout như hình bên dưới.
Trong hình trên, nút “Forgot password” phục thuộc vào vị trí của nút ” Login”. Nếu vị trí nút “Login” thay đổi thì nút “Forgot password” cũng thay đổi theo.
Còn với nút “Register a new Account” được căn chỉnh theo view cha, nó luôn nằm ở phía cuối cùng của view cha.
ListView/RecyclerView
Như tên gọi, ListView là layout để hiển thị các view con dưới dạng danh sách. Bản thân widget này được thiết kế theo mô hình MVC. Do đó để xây dựng được danh sách thì ListView cần thêm một Adapter nữa.
Đây là một trong những Layout rất hữu ích và rất hay được sử dụng trong các ứng dụng cần hiển thị dữ liệu có cấu trúc giống nhau như: Đọc báo, quản lý file,…
RecyclerView cũng giống với ListView, nhưng được bổ sung thêm nhiều tính năng hơn.
GridView
GridView là một View Layout ở đó các item (hình ảnh, file, …) được đặt trong một Grid (lưới) như hình dưới đây
Về cơ bản cách xây dựng GridView rất giống với Listview, cũng cần một Adapter để có thể đưa dữ liệu hiển thị trên GridView.
Trên đây là những loại Layout rất cơ bản và hay sử dụng trong ứng dụng Android. Tuy nhiên, như các bạn biết Android là hệ điều hành mở nên các thiết bị Android cũng cực kì đa dạng với đủ các loại kích thước và hình dáng.
Vậy làm thế nào để ứng dụng của chúng ta hiển thị đẹp trên tất cả các loại màn hình đây?
2. Thiết kế giao diện hỗ trợ nhiều loại màn hình trong Android
Như đã đề cập ở phần trên, Android là một hệ điều hành mã nguồn mở được sử dụng với nhiều loại thiết bị khác nhau. Khi đó các nhà phát triển sẽ phải đối mặt với việc ứng dụng sẽ hiển thị trên các màn hình có độ phân giải khác nhau.
Trước khi tìm hiểu chi tiết cách hỗ trợ đa kích thước và độ phân của màn hình. Chúng ta cần biết một số thuật ngữ sau:
– Độ phân giải – Resolution: là số pixel trên màn hình thiết bị. Ví dụ 480×800, …
– Mật độ điểm ảnh – Density(dpi): là số pixel trong một khu vực cụ thể. Thường là số pixel trên mỗi inch. Đây là thước đo chất lượng màn hình.
– Hướng màn hình – Orientation: Là cách màn hình được định hướng. Điện thoại thì chỉ có 2 trường hợp: xoay ngang (Landscape) hoặc dọc (Protrait).
Thiết kế dựa vào kích thước màn hình
Trong Android thì người ta có định nghĩa về kích thước màn hình như sau:
| From (inch) | To (inch) | Android name |
| 2 | 4 | small |
| around 4 | around 4 | normal |
| from around 4 | 7 | large |
| 7 | 10 | xlarge |
Nếu muốn hỗ trợ tất cả các kích thước màn hình này, chúng ta phải ánh xạ android name này vào một cấu trúc thư mục bên trong thư mục res của dự án.
Quy ước được Android sử dụng là thêm tên này vào cuối từ layout. Ví dụ layout-small, layout-normal,…. Vì vậy, bên trong thư mục res chúng ta sẽ có một cấu trúc như thế này:
Khi chạy ứng dụng, với mỗi kích thước màn hình thì layout ở thư mục tương ứng sẽ được hiển thị. Còn nếu không có thư mục layout nào phù hợp mới kích thước màn hình đó thì thư mục layout mặc định sẽ được hiển thị
Như bạn có thể thấy, mỗi thư mục chứa các file layout có tên giống nhau. Điều duy nhất thay đổi là nội dung bên trong các file layout đó
Ví dụ, nếu chúng ta mở file main.xml, trong hai thư mục này, bạn sẽ thấy giá trị margin được thiết kế khác nhau tùy vào kích thước của màn hình
Như vậy là đã xong màn hình dọc. Thế còn màn hình ngang thì sao? Nếu người dùng xoay ngang màn hình thì có thể thiết kế layout dành riêng cho nó không?
Tất nhiên là có thể rồi! bạn làm tương tự như trên và chỉ cần thêm -land vào cuối thư mục layout.
Như vậy là chúng ta có thể hỗ trợ khá nhiều loại màn hình trong Android
Thiết kế dựa vào mật độ điểm ảnh(DPI)
Với các màn hình có kích thước khác nhau thì phân chia thư mục layout như trên. Đồng thời chúng ta cũng cần lưu ý đến trường hợp có cùng kích thước (ví dụ cùng màn hình 5.5 inch) nhưng lại có mật độ điểm ảnh(DPI) khác nhau.
Để giải quyết vấn đề này thì chúng sẽ phân chia thư mục drawable.
Mật độ điểm ảnh sẽ ảnh hưởng trực tiếp lên việc hiển thị các ảnh, icon sử dụng trong ứng dụng. Đó là lý do tại sao chúng ta phải tạo nhiều thư mục drawable
Tương tự, ta có bảng quy ước sau:
| Density | Android name |
| Small | around 120 dpi (ldpi) |
| Normal | around 160 dpi (mdpi) |
| High | around 240 dpi (hdpi) |
| x-High | around 320 dpi (xhdpi) |
Cũng giống như việc phân chia các thư mục layout, các thư mục drawable sẽ có cấu trúc như sau. Vì vậy, chúng ta sẽ có:
