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
- 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.
- 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.
- Table Layout: Là layout sắp xếp các View trong các hàng và cột
- 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.
- 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:
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 .
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ạ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..
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.
Layout mới đã được tạo thành công.
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 .
- Bôi đen từ layout hiện tại LinearLayout
- Gõ tên layout mới Table Layout
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:
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!!
