Layout trong Android và cách thiết kế layout hỗ trợ đa màn hình

Mỗi Activity thường sẽ được chỉ định một Layout để hiển thị với người dùng. Để áp dụng lôi kéo người dùng thì Layout luôn là một phần chẳng thể thiếu. Layout chính là phần giao diện, là diện mạo 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ả. Nhưng để Layout được thiết kế với thử nghiệm tốt, hỗ trợ nhiều kích cỡ màn hình thì lại không phải là dễ.

>>>> Xem cụ thể về sử dụng Activity Android

Nội dung này tất cả chúng ta sẽ cùng tìm tòi toàn bộ các Layout trong Android. Khi đã tinh thông bản chất thì việc tạo layout sẽ không đang là vấn đề nữa.

Bài viết gồm 2 phần chính:

  • Layout là gì? Các loại layout trong Android
  • Kinh nghiệm thiết kế layout hỗ trợ nhiều loại kích cỡ màn hình smartphone.

Tất cả chúng ta khởi đầu nhé!

#1. Layout là gì?

Layout là thành phần khái niệm kết cấu giao diện người dùng hay nói cách khác là thành phần quyết định đến giao diện của một màn hình trong áp dụng Android.

Một layout hỗ trợ việc chỉnh sửa các widget (Chẳng hạn: TextView, Button, hay EditText…)  như tất cả chúng ta thấy trong các áp dụng Android.

Toàn thể kết cấu giao diện mà tất cả chúng ta thấy trong áp dụng Android đều được thiết kế trong một layout. Mỗi layout được khái niệm là một file xml và được đặt trong App > res > Layouttrong Android Studio.

Vì sao layout lại trọng yếu

Cũng giống với bất kỳ áp dụng khác, như áp dụng website, áp dụng desktop… Layout chính là thành phần tương tác trực tiếp với người dùng.

Một áp dụng có layout tốt sẽ giúp có thử nghiệm người tốt hơn. Đấy còn chưa việc, layout tổ chức tốt còn khiến cho cải tổ hiệu năng của áp dụng.

Không những thế, áp dụng di động còn phải khắc phục vấn đề hiển thị tốt trên nhiều loại thiết bị có kích cỡ khác nhau. Thành ra, khi bạn có học thức và kinh nghiệm thiết kế layout tốt, áp dụng của các bạn sẽ không gặp phải vấn đề vỡ layout.

#2. Các loại layout trong Android

Trong Android thì có nhiều loại layout, mỗi loại sẽ có công dụng riêng. Để các bạn không bị lạc trong rườm rà đó, mình sẽ tóm lược các loại layout hay được dùng nhất khi thiết kế giao diện cho áp dụng

Xem Thêm  Illustrated guide to SQLX - hoc golang

Layout trong android

#LinearLayout

Linear Layout có vẻ là loại layout hay được dùng nhất vì tính dễ dàng của nó. LinearLayout sẽ sắp đặt các lượt xem theo dạng khối và không đè lên nhau. Linear Layout có hai chiều sắp đặt bố cục là:

  • Vertical Orientation – các lượt xem bên trong sẽ được sắp đặt theo chiều dọc.
  • Horizontal Orientation – Tương đương nhưng theo chiều ngang.

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 chẳng hạn này, LinearLayout được thiết lập là Vertical Orientation.

Vì vậy Text Lượt xem, Edit Text, và Button được căn chỉnh theo chiều dọc( từ trên xuống dưới).

LinearLayout trong Android

#RelativeLayout:

Relative Layout là loại layout mà ở đó địa điểm các widget (Text Views, Buttons,…)  lệ thuộc vào địa điểm các widget khác hoặc lượt xem cha.

Chẳng hạn về RelativeLayout như hình bên dưới.

RelativeLayout trong android

Trong hình trên, nút “Forgot password” phục thuộc vào địa điểm của nút ” Login”. Nếu địa điểm nút “Login” biến đổi thì nút “Forgot password” cũng biến đổi theo.

Còn với nút “Register a new Account” được chỉnh sửa theo lượt xem cha, nó luôn nằm ở phía cuối cùng của lượt xem cha.

  • Giành cho bạn: Chỉ dẫn toàn tập về cách sử dụng Fragment trong Android

#ListView/RecyclerView

Đúng như cái tên, ListView là layout để hiển thị các lượt xem con dưới dạng mục lục. Để xây dựng được mục lục thì ListView cần thêm một Adapter nữa.

List View/RecyclerView

Đây là một trong những Layout rất hữu dụng và rất hay được dùng trong các áp dụng cần hiển thị dữ liệu có kết cấu giống nhau như: Đọc báo, làm chủ file,…

RecyclerView không khác gì với Danh mục Lượt xem, nhưng được bổ sung thêm nhiều chức năng hơn.

sử dụng RecyclerView.

Nếu bạn chưa biết RecyclerView là gì và mong muốn tìm tòi kĩ hơn thì mình tiết lộ là đã có một bài chỉ dẫn khá cụ thể về cách

#GridView

Grid Lượt xem là một Lượt xem Layout ở đó các item (hình ảnh, file,…) được đặt trong một Grid(lưới) như hình dưới đây

GridView android

Về căn bản cách xây dựng GridView rất giống với Listview, cũng nên một Adapter để có thể mang dữ liệu hiển thị trên GridView

Trên đây là những loại Layout rất căn bản và hay sử dụng trong áp dụng Android. Bên cạnh đó, như các bạn biết Android là HĐH 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 cỡ và hình dáng.

Vậy làm sao để áp dụng của các bạn hiển thị đẹp trên toàn bộ các loại màn hình đây?

Xem Thêm  Cách bắt đầu với API Google Maps - cách sử dụng api google maps

Và hiện giờ mình sẽ chia sẻ phương thức để tạo giao diện có thể hiển thị đẹp trên nhiều loại kích cỡ màn hình khác nhau. Bạn hãy đọc tiếp!

#3. Thiết kế giao diện hỗ trợ đa màn hình trong Android

Như mình đã nêu vấn đề ở trên, Android là một HĐH mở với đủ loại thiết bị khác nhau. Khi đó các nhà lớn mạnh sẽ phải đương đầu với việc áp dụng sẽ hiển thị trên các màn hình  độ sắc nét khác nhau.

Có thể bạn đã đọc một số chỉ dẫn và ebook xem qua rồi mà vẫn rồi mà vẫn không tinh thông cách làm. Chính vì như vậy mình quyết định viết các bài chỉ dẫn này để giúp các bạn có thể tự tin thiết kế áp dụng với thử nghiệm tốt nhất trên nhiều loại màn hình.

Trước khi tìm tòi cụ thể cách hỗ trợ đa kích cỡ và độ phân của màn hình. Tất cả chúng ta cần biết một số thuật ngữ sau:

– Độ sắc nét – Resolution: là số pixel trên màn hình thiết bị. Chẳng hạn 480×800,…
– Mật độ điểm ảnh – Density(dpi): là số pixel trong một khu vực rõ ràng và 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. Smartphone thì chỉ có 2 trường hợp: xoay ngang (Landscape) hoặc dọc (Protrait).

#Thiết kế dựa trên kích cỡ màn hình

Trong Android thì người ta có khái niệm về kích cỡ màn hình  như sau:

tim-hieu-cac-loai-layout-trong-android-6

Nếu mong muốn hỗ trợ toàn bộ các kích cỡ màn hình này, tất cả chúng ta phải ánh xạ  android name này vào một kết cấu 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. Chẳng hạn layout-small, layout-normal,…. Chính vì thế, bên trong thư mục res tất cả chúng ta sẽ có một kết cấu như vậy này:

Thiết kế giao diện hỗ trợ đa màn hình trong Android

Khi chạy áp dụng, với mỗi kích cỡ màn hình thì layout ở thư mục tương ứng sẽ được hiển thị. Nếu không có thư mục layout nào thích hợp mới kích cỡ màn hình đó thì thư mục layout mặc định sẽ được hiển thị

Thiết kế giao diện hỗ trợ đa màn hình trong Android

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 biến đổi là bài viết bên trong các file layout đó

Xem Thêm  1000 C ++ MCQ (Câu hỏi nhiều lựa chọn) - câu hỏi đố c ++ có câu trả lời

Chẳng hạn, nếu tất cả 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 theo kích cỡ của màn hình

tim-hieu-cac-loai-layout-trong-android-8

Như thế 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 giành riêng cho nó không?

Đương nhiên là có thể rồi! bạn làm cũng giống như trên và chỉ cần thêm -land vào cuối thư mục layout.

Thiết kế giao diện hỗ trợ đa màn hình trong Android

Như thế là tất cả chúng ta có thể hỗ trợ hơi nhiều loại màn hình trong Android  rồi đấy!!.

Mình đoán bạn sẽ đang tự, với layout cho màn hình ngang thì cần biến đổi gì trong code không? Đương nhiên là khác rồi, màn hình dọc với ngang rõ ràng và cụ thể khác nhau mà ^^.

Như bên dưới là một cách khắc phục của mình cho hai kiểu màn hình dọc và ngang:

Thiết kế giao diện hỗ trợ đa màn hình trong Android

Thiết kế giao diện hỗ trợ đa màn hình trong Android

#Thiết kế dựa trên mật độ điểm ảnh(DPI)

Với các màn hình có kích cỡ khác nhau thì phân tách thư mục layout như trên. Song song tất cả chúng ta cũng nên cảnh báo đến trường hợp có cùng kích cỡ (chẳng hạn cùng màn hình 5.5 inch) nhưng lại có mật độ điểm ảnh(DPI) khác nhau.

Để khắc phục vấn đề này thì chúng sẽ phân tách thư mục drawable.

Mật độ điểm ảnh sẽ tác động trực tiếp lên việc hiển thị các ảnh, icon sử dụng trong áp dụng. Này là nguyên nhân vì sao tất cả chúng ta phải tạo nhiều thư mục drawable

Tương đương, ta có bảng quy ước sau:

tim-hieu-cac-loai-layout-trong-android-7

Cũng giống với việc phân tách các thư mục layout, các thư mục drawable sẽ có kết cấu như sau. Chính vì thế, tất cả chúng ta sẽ có:

mật độ điểm ảnh(DPI)

Kết luận

Như thế là tất cả chúng ta sẽ giải quyết tìm tòi layout trong android. Cũng như cách thiết kế layout để áp dụng có thể hiển thị tốt trên nhiều màn hình khác nhau.

Việc thiết kế layout trong Android luôn là một giai đoạn cần nhiều thời gian và tỉ mỉ. Nhưng thành tích nhận được sẽ cực kì ngọt ngào.

Nội dung kế tiếp trong khóa tự học lập trình android trong 24 giờ sẽ liên quan đến mạch máu của áp dụng. Đó chính là Intent – dụng cụ connect các thành phần áp dụng.

Các bạn đón đọc và đừng quên phản hồi để lại quan điểm nhé

Viết một bình luận