Tìm hiểu về các Layout trong Android

Bạn muốn tạo nên một ứng dụng tuyệt vời với một giao diện thật đẹp mắt thì cái đầu tiên bạn phải biết về một số Layout cơ bản và các thuộc tính của nó. Đồng thời bạn phải biết kết hợp, lồng ghép các Layout này một cách thật hợp lý để tạo nên một giao diện thật ưng ý nhất. Các layout này định nghĩa cấu trúc cho một giao diện người dùng.

Các loại Layout trong Android

  1. Linear Layout: Là layout sắp xếp các View con trong nó lần lượt theo duy nhất một chiều, ngang hoặc dọc tùy theo giá trị của thuộc tính android:orientation. View này sẽ tạo ra một thanh cuộn (scrollbar) nếu chiều dài của cửa sổ vượt quá chiều dài của màn hình.
  2. Relative Layout: Là Layout hiển thị các View con với các vị trí tương đối. Vị trí của mỗi View có thể được xác định so với các View khác hoặc với thành phần cha của chúng (thông qua id). Bạn có thể sắp xếp View sang bên phải, bên dưới một View khác, giữa màn hình, v.v.. Để định nghĩa vị trí cho mỗi View bạn sử sụng nhiều thuộc tính có sẵn từ RelativeLayout.LayoutParams.
  3. Table Layout: Là layout sắp xếp các View trong các hàng và cột
  4. Absolute Layout: Là layout cho phép bạn chỉ định vị trí chính xác ( tọa độ x / y) của các đối tượng. Absolute layouts  thường ít linh hoạt và khó duy trì hơn các loại layouts khác.
  5. Frame Layout: FrameLayout là một trong những layout hữu ích được cung cấp bởi hệ thống Android, cho phép các đối tượng giao diện người dùng được xếp chồng chéo với nhau.

Tùy và ý muốn và cách bố trí các đối tượng hiển thị mà người code có thể sử dụng và kết hợp các Layout khác nhau. Theo mình thấy thì Linear Layout và Relative Layout là được sử dụng nhiều nhất.

Các thuộc tính của Layout

Mỗi layout có một tập hợp các thuộc tính khác nhau và nó xác định các thuộc tính  của Layout đó. Có vài thuộc tính được sử dụng ở tất cả các layout, dưới đây là các thuộc tính phổ biến và sẽ áp dụng được cho tất cả các layout:

  • android:id – Đây là thuộc tính ID và nó xác định là duy nhất trong layout đó
  • android:layout_width – Xác định chiều rộng cho layout
  • android:layout_height – Xác định chiều cao cho layout
  • android:layout_marginTop – Khoảng không gian bên ngoài phía trên layout.
  • android:layout_marginBottom – Khoảng không gian bên ngoài phía dưới layout
  • android:layout_marginLeft – Khoảng không gian bên ngoài phía bên trái layout
  • android:layout_marginRight – Khoảng không gian bên ngoài phía bên phải layout
  • android:layout_gravity – Xác định vị trí của nó so với các phần tử chứa nó
  • android:layout_weight – Quy định bao nhiêu không gian phụ trong layout phải được phân bổ cho các View.
  • android:layout_x – Quy định các tọa độ x của layout.
  • android:layout_y – Quy định các tọa độ y của layout.
  • android:paddingLeft – Khoảng không gian bên trong phía bên trái layout.
  • android:paddingRight – Khoảng không gian bên trong phía bên phải layout.
  • android:paddingTop – Khoảng không gian bên trong phía trên layout.
  • android:paddingBottom – Khoảng không gian bên trong phía dưới layout.

Các bạn có thể nhìn vào hình dưới đây và mình sẽ giải thích một số thuộc tính có trong hình:

Tìm hiểu các layout trong Android
Tìm hiểu các layout trong Android

Như trong hình thì các bạn thấy mình có 1 Relative Layout và mình chèn vào 1 cái Button, khoảng cách từ layout đến button là 50dp, có nghĩa là layout paddingBottom, paddingLeft, paddingRight, paddingTop  50dp hoặc bạn có thể viết rút gọn luôn là android:padding=”50dp” . Và khoảng cách phía ngoài bên trên layout là 30dp, phía ngoài bên trái là 40dp tương ứng với  layout_marginTop=”30dp”, layout_marginLeft=”40dp”, và còn nhiều thuộc tính khác nữa, mình không thể kể hết được.. các bạn hãy cố gắng tìm hiểu nhé.

Cách tạo một Layout và kết nối Layout với Activity

Khi bạn tạo một Android Project thì thường sẽ có một Activity được chỉ định chạy đầu tiên khi bạn thực thi ứng dụng,  Activity này liên kết với layout đó để hiển thị. Mặc định layout đầu tiên khi bạn tạo một Android Project sẽ là Relative Layout .

Tìm hiểu về layout trong Android
Tìm hiểu về layout trong Android

Mọi Activity muốn được hiển thi thành công trong ứng dụng thì bắt buộc nó phải được khai báo trong AndroidManifest.xml . Trong ứng dụng Demo này MainActivity được khai báo trong này đồng thời  là Activity sẽ khởi động lúc ứng dụng được chạy. Nếu bạn muốn thay đổi thành  Activity thì bạn chỉ cần đổi tên Activity đó vào chỗ mình khoanh đỏ.

Tìm hiểu về layout trong Android
Tìm hiểu về layout trong Android

 

Tạo mới một Layout

Để tạo mới một layout các bạn thực hiện theo các bước sau:  Vào File –> New –> XML –> Layout XML File..

Tạo mới một layout
Tạo mới một layout

Một cửa sổ tùy chọn mới hiện lên các bạn điền tên file layout vào ô Layout File Name  và loại layout vào ô Root Tag (loại layout gồm các loại layout mình đã nói ở đầu bài). Trong hình dưới mình đặt tên cho layout là new_layout và loại layout là LinearLayout , sau khi đã điền xong các bạn bấm Finish.

Tạo layout mới trong Android
Tạo layout mới trong Android

Layout mới đã được tạo thành công.

Layout mới đã được tạo
Layout mới đã được tạo

Còn có một cách khác đổi từ layout này sang layout khác nhanh hơn mà không muốn đổi tên file layout.xml hiện tại, các bạn hãy thực hiện theo các bước sau: Ở đây mình thực hiện luôn trên new_layout vừa tạo, new_layout vừa tạo là LinearLayout , bây giờ mình muốn đổi từ LinearLayout  sang Table Layout  .

Tạo layout mới
Tạo layout mới
  1. Bôi đen từ layout hiện tại LinearLayout  
  2. Gõ tên layout mới Table Layout
Layout mới được tạo thành công
Layout mới được tạo thành công

Vậy là xong Layout mới được tạo thành công, rất nhanh phải không ạ.

Kết nối Layout với Activity

Để layout mới có thể hiển thị khi ứng dụng được chạy bây giờ bạn vào lại MainActivity.java. Sửa lại dòng lệnh setContentView(R.layout.activity_main) thành setContentView(R.layout.new_layout) là xong:

Kết nối Layout với Activity
Kết nối Layout với Activity

Sau khi đã đổi Layout  thành công bạn khởi động chương trình và bạn thấy ứng dụng sẽ chạy cái Layout mới chứ không phải Layout cũ nữa.

Lời kết

Nghe thì có vẻ rắc rồi khó hiểu nhưng các bạn cứ làm nhiều lần là quen thôi, lúc đó thì nhắm mắt cũng làm được luôn. Chúc các bạn thành công, nếu trong quá trình tìm hiểu bạn gặp bất kỳ lỗi nào hay có bất kỳ góp ý hay chia sẻ gì, mong bạn có thể để lại comment bên dưới hoặc gửi mail về [email protected]. Xin cảm ơn!!

Gom Marker trong Android với Google Maps Android API – Google Maps Android Marker Clustering Utility Sử dụng SwipeRefreshLayout trong ứng dụng Android Hướng dẫn tạo Material Dialog Bottom Sheet Android Tạo context menu trong Android – ActionBar ActionMode.CallBack Example Retrofit và Volley thư viện nào tốt hơn Hướng dẫn sử dụng thư viện Volley trong Android Tạo Web Service bằng PHP và MYSQL cho ứng dụng di động – Part 2 Tạo Web Service bằng PHP và MYSQL cho ứng dụng di động – Part 1 Hàm chuyển đổi Timestamp thành Datetime trong Android và JavaScript Design Patterns là gì? Tạo Project Android theo mẫu Design Patterns(Part 2)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to whitelist website on AdBlocker?

How to whitelist website on AdBlocker?

  1. 1 Click on the AdBlock Plus icon on the top right corner of your browser
  2. 2 Click on "Enabled on this site" from the AdBlock Plus option
  3. 3 Refresh the page and start browsing the site