Bài tập 7: Làm quen với các Layout trong Android

Để thiết kế giao diện tốt cho Android thì trước tiên các bạn phải biết sử dụng một số Layout cơ bản trong Android:

1) Cách tạo Layout và kết nối Layout vào Activity

2) Cách sử dụng HierarchyViewer 

3) Các Layout cơ bản:

• FrameLayout
• LinearLayout
• TableLayout
• RelativeLayout
• AbsoluteLayout

*** Đồng thời bạn phải biết kết hợp các Layout này lại với nhau để cho ra được giao diện phức tạp như ý muốn.

– Tôi chỉ nêu ra một số đặc điểm, không thể nói hết ở đây. Các bạn sẽ từ từ cập nhập sau khi đã quen với Layout.

– Trước tiên bạn cần biết cách tạo một Layout mới và cách kết nối nó vào Activity như thế nào:

1) Cách tạo Layout và kết nối Layout vào 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 XML File:

– 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:

2) Cách sử dụng HierarchyViewer:

– Như bạn đã biết, một Layout phải được kết nối vào Activity nào đó thông qua hàm setContentView, Android sẽ có cơ chế dịch XML thành Java code:

– Ta có thể dùng HierarchyViewer để hiển thị cấu trúc UI của màn hình hiện tại trên emulator hoặc thiết bị thật:

Bạn vào thư mục SDK của bạn / vào thư mục Tools/ rồi chạy tập tin monitor.bat :

3) Các Layout cơ bản:

a) FrameLayout:

– Là loại Layout cơ bản nhất, đặc điểm của nó là khi gắn các control lên giao diện thì các control này sẽ luôn được “Neo” ở góc trái trên cùng màn hình, nó không cho phép chúng ta thay đổi vị trí của các control theo một Location nào đó.

– Các control đưa vào sau nó sẽ đè lên trên và che khuất control trước đó (trừ khi ta thiết lập transparent cho control sau):

– Bạn xem đoạn cấu trúc XML dưới này:

<?xml version=”1.0″ encoding=”utf-8″?>

<FrameLayout android:id=”@+id/mainlayout” android:layout_height=”fill_parent” android:layout_width=”fill_parent” android:orientation=”vertical” xmlns:android=”http://schemas.android.com/apk/res/android”&gt;

<ImageView android:layout_height=”wrap_content” android:layout_width=”wrap_content” android:padding=”5px” android:src=”@drawable/blue“/>

<ImageView android:layout_height=”wrap_content” android:layout_width=”wrap_content” android:padding=”5px” android:src=”@drawable/red“/>

</FrameLayout>

– Bạn thấy đó, hình màu đỏ và màu xanh luôn được “neo” ở góc trái màn hình. Hình màu đỏ đưa vào sau sẽ đè lên trên hình màu xanh.

Chú ý 2 dòng lệnh bên dưới:

– android:src=”@drawable/blue”

– android:src=”@drawable/red”

Là do ta kéo 2 cái hình tên là blue và red vào thư mục drawable của ứng dụng

b) LinearLayout

– Layout này cho phép sắp xếp các control theo 2 hướng trên giao diện: Hướng từ trái qua phải và hướng từ trên xuống dưới.

– Bạn có thể dùng margin, gravity, weight để hỗ trợ cho việc thiết kế. Ở đây Tôi không có thời gian nhiều nên chỉ nói đặc điểm chính của LinearLayout, các bạn tự tìm hiểu thêm.

– Ta có thể dùng Properties hỗ trợ sẵn trong Eclipse để thiết lập các thuộc tính cho control:

– Ví dụ như để căn lề các control trên giao diện ta dùng layout_gravity:

– hay để căn lề nội dung bên trong của control dùng gravity:

– Bạn cũng phải biết so sánh sự khác biệt giữa Padding và Margin:

– Ví dụ thay đổi Padding (internal spacing – khoảng cách giữa nội dung bên trong so với đường viền của control):

– Ví dụ về đổi Margin (external spacing – khoảng cách giữa control này với control khác):

c) TableLayout

-Cho phép sắp các control theo dạng lưới (dòng và cột)

– TableLayout sẽ xem dòng nào có số lượng control nhiều nhất để xác định rằng nó có bao nhiêu cột (lấy dòng có số lượng control nhiều nhất làm số cột chuẩn).

– Như vậy theo hình trên thì bạn phải nói là TableLayout này có 4 cột, 3 dòng.

– Dùng layout_span để trộn các cột:

– Dùng layout_column để di chuyển vị trí của control đến một cột nào đó trên 1 dòng:

– Dùng stretchColumns để dãn đều các control, các cell (ta thường dùng dấu “*”):

d) RelativeLayout:

– RelativeLayout cho phép sắp xếp các control theo vị trí tương đối giữa các control khác trên giao diện (kể cả control chứa nó). Thường nó dựa vào Id của các control khác để sắp xếp theo vị trí tương đối. Do đó khi làm RelativeLayout bạn phải chú ý là đặt Id control cho chuẩn xác, nếu sau khi Layout xong mà bạn lại đổi Id của các control thì giao diện sẽ bị xáo trộn (do đó nếu đổi ID thì phải đổi luôn các tham chiếu khác sao cho khớp với Id bạn mới đổi).

– Dưới đây là ví dụ về cách sử dụng RelativeLayout (bạn để ý những dòng tô đậm):

– Ta có thể sử dụng công cụ trong Eclipse để thiết kế :

e) AbsoluteLayout:

– Cho phép thiết lập các control giao diện theo vị trí tùy thích:

– Như vậy các Tôi đã giới thiệu sơ qua cách tạo Layout và cách sử dụng một số Layout cụ thể, tùy từng trường hợp mà các bạn ứng dụng vào. Thông thường ứng với mỗi một ứng dụng cụ thể thì bạn phải kết hợp nhiều loại Layout lại với nhau.

– Bạn cần hiểu rõ các loại Layout để giúp ích cho quá trình thiết kế giao diện

– Bài tập sau Tôi sẽ hướng dẫn các bạn cách sử dụng một số control cơ bản và cách viết sự kiến cho Button như thế nào.

Chúc các bạn thành công.