Lập trình Android

– Giới thiệu Layout

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. 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.

2. 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.

3. 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.

4. Table Layout: Là layout sắp xếp các View trong các hàng và cột

5. 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.

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.

Ở đây chiều rộng và chiều dài là 2 kích thước của Layout/View có thể được tính bằng đơn vị dp (Density-independent Pixels), sp (Scale-independent Pixels), pt (Points = 1/72 inch), px( Pixels), mm (Millimeters) và bằng inch.

Bạn có thể xác định chiều dài và rộng với một số đo nhất định, nhưng thông thường, bạn sẽ dùng một trong những Constant sau đây:

• android:layout_width=wrap_content có nghĩa là View của bạn sẽ có kích thước bằng với nội dung mà nó chứa.
• android:layout_width=fill_parent có nghĩa là View của bạn sẽ có kích thước bằng với View cha của nó.

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

a) Layout mặc định đầu tiên khi bạn tạo một Android Project:

– Khi bạn tạo một Android Project thì mặc nhiên sẽ có một Activity được chỉ định chạy đầu tiên khi bạn thực thi ứng dụng:

– Bạn quan sát hình trên: Khi bạn tạo một ứng dụng Android thì mặc nhiên sẽ tạo luôn một Activity để thực thi đầu tiên khi bạn chạy ứng dụng. Ứng với một Activity thì nó sẽ có 1 Layout đi kèm. Trong hình trên thì MainActivity.java (số 1) sẽ có layout đi kèm là activity_main.xml (số 2 – và bạn nhớ luôn là activity_main này sẽ được tự động tạo ra trong thư mục gen của Android, dựa vào đây để ta kết nối Layout vào Activity).

– Như đã nói ở những bài tập trước: Mọi Activity muốn được triệu gọi thành công trong ứng dụng thì bắt buộc nó phải được khai báo trong AndroidManifest.xml (số 3). Bạn double click vào Manifest và nhìn vào vùng số 4, MainActivity được khai báo trong này đồng thời đăng ký là Activity sẽ khởi động lúc ứng dụng được thực thi (xem vùng Tôi bôi màu xanh phần intent-filter).

– Tiếp theo bạn Double – click vào tập tin MainActivity.java:

– Nhìn vào hàm onCreate, bạn thấy dòng lệnh : setContentView(R.layout.activity_main); chính là dòng lệnh dùng để kết nối Layout vào Activity. Bạn nhớ là activity_main phải được tự động tạo ra trong gen như hình bên dưới:

b) Đổi Layout mặc định bằng một Layout khác bất kỳ:

– Để tạo một Layout mới, bạn click chuột phải vào Project/ chọn New/ chọn Android XMLFile:

– Khi bạn chọn Android XML File thì màn hình bên dưới xuất hiện: Đặt tên cho Layout, chọn kiểu Layout rồi nhấn nút Finish:

– Ở trên Tôi đặt tên là : my_new_layout, sau khi nhấn nút Finish bạn quan sát Package Explorer:

– Bạn thấy Tôi double – click vào layout : my_new_layout và kéo thả một số control vào giao diện như hình bên trên (bạn nhớ là my_new_layout phải được tự động xuất hiện trong gen – bạn tự kiểm tra).

– Bây giờ bạn vào lại MainActivity.java. Sửa lại dòng lệnh setContentView thành:

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

Download ví dụ