Hướng dẫn sử dụng Android UI Layouts
Công ty Vĩnh Cửu tuyển dụng lập trình viên Java

1- Layout là gì?

Android Layout là một class xử lý cách các thành phần giao diện con của nó xuất hiện trên màn hình. Bất cứ thành phần nào đó là một View (hoặc thừa kế từ View) có thể là class con của một Layout. Tất cả các class Layout đều mở rộng từ class ViewGroup (mà kế thừa từ View), do đó bạn cũng có thể tạo một class Layout riêng của mình, bằng cách tạo class mở rộng từ ViewGroup.
  • Hình ảnh dưới đây minh họa sơ đồ thừa kế giữa các thành phần giao diện trong Android.

2- Các loại Layout tiêu chuẩn trong Android

  • Các Layout tiêu chuẩn:
Layout Mô tả
LinearLayout


(Horizontal)

(Vertical)

LinearLayout bố trí tất cả các thành phần con của nó theo một hướng duy nhất, theo chiều dọc hoặc chiều ngang.

RelativeLayout

RelativeLayout là một ViewGroup nó hiển thị các View con của nó theo vị trí có tương đối với nhau.

TableLayout

TableLayout là một view nó nhóm các view con thành các dòng và các cột.

GridLayout

GridLayout sử dụng một mạng lưới các dòng mỏng và vô hạn để tách khu vực bản vẽ của nó thành: các hàng, các cột, và các ô (cell). Nó hỗ trợ cả việc bắc qua (span) các hàng và các cột, mà cùng nhau cho phép một thành phần giao diện để chiếm một phạm vi hình chữ nhật gồm nhiều ô.
FrameLayout

FrameLayout là một đối tượng giữ chỗ ở trên màn hình mà bạn có thể sử dụng để hiển thị một khung nhìn duy nhất.

AbsoluteLayout

AbsoluteLayout làm bạn có thể chỉ định chính xác vị trí của các view con trong nó. Sắp xếp các view con theo đúng tọa độ x,y trong thành phần cha.

  • Các bộ chứa (Container) chuẩn:
Container Description
RadioGroup

 

ListView

 

GridView

 

ExpandableListView

 
ScrollView

 

HorizontalScrollView

 

SearchView

 

TabHost

 

VideoView

 
DialerFilter

 

3- Layout

3.1- RelativeLayout

RelativeLayout là một ViewGroup có hiển thị các View con ở các vị trí tương đối. Vị trí của mỗi View có thể được quy định liên quan đến các View anh em (như bên trái của hoặc bên dưới một View khác) hoặc ở các vị trí tương đối với khu vực cha RelativeLayout (chẳng hạn như sắp xếp ngay phía dưới, bên trái hoặc trung tâm).
RelativeLayout là một tiện ích rất mạnh mẽ cho thiết kế một giao diện người sử dụng vì nó có thể loại bỏ các nhóm View lồng nhau và giữ cho hệ thống phân cấp bố trí của bạn bằng phẳng, đồng thời cải thiện hiệu suất. Nếu bạn sử dụng một vài nhóm LinearLayout lồng nhau, bạn có thể thay thế chúng bằng một RelativeLayout duy nhất.
Hãy xem giao diện dưới đây, và bạn có thể thiết kế nó sử dụng RelativeLayout.
  • SLIDER:

3.2- LinearLayout

LinearLayout là một ViewGroup nó sắp xếp các thành phần con theo một hướng duy nhất, theo chiều dọc hoặc chiều ngang. Bạn có thể chỉ định hướng của nó theo thuộc tính:  android:orientation.
Thuộc tính:
Thuộc tính Mô tả
android:orientation Thuộc tính này quy định hướng sắp xếp của Layout, bạn sử dụng "horizontal" đối với dòng, và "vertical" để sắp xếp theo cột. Mặc định là "horizontal".

Ví dụ:

Chú ý: Nếu phần tử gốc của giao diện không phải là LinearLayout, bạn có thể thay đổi tên thẻ mà không cần phải thay đổi gì khác, như vậy bạn sẽ có một giao diện với phần tử gốc là LinearLayout.
Với các View là con nằm trong LinearLayout có một thuộc tính quan trọng: android:layout_weight.

android:layout_weight

Thuộc tính này gán một giá trị "quan trọng" cho View, nó nói rằng có bao nhiêu không gian mà View này sẽ chiếm trên màn hình. Một giá trị khối lượng (weight) lớn hơn cho phép nó để mở rộng để điền vào bất kỳ không gian còn lại trong View cha. View con có thể chỉ định một giá trị khối lượng, và sau đó bất kỳ không gian còn lại trong ViewGroup sẽ được gán cho các View con theo tỷ lệ khối lượng kê khai của mình. Khối lượng mặc định là 0.
Các thành phần con có khối lượng (weight) sẽ lấp đầy không gian còn lại của LinearLayout theo tỷ lệ khối lượng của nó.
Với LinearLayout (Vertical), các thành phần con có thuộc tính android:width=fill_parent sẽ được lấp đầy chiều ngang của LinearLayout (Vertical).
Các thành phần con cũng có thể được sét đặt giá trị cụ thể cho width, height:
Phân biệt gravitylayout_gravity:
  • android:layout_gravity sét đặt trọng tâm của View hoặc Layout trong thành phần cha của nó.
  • android:gravity sét đặt trọng tâm cho nội dung của View mà nó đang sử dụng (Chẳng hạn text). 

3.3- TableLayout

TableLayout là một ViewGroup nó hiển thị các thành phần con trên các hàng và các cột.
TableLayout đặt vị trí các thành phần con của nó theo hàng và cột. Bộ chứa TableLayout không hiển thị đường biên (border) cho các hàng, các cột, hoặc các ô của nó. Bảng sẽ có nhiều cột nhiều hàng với nhiều ô. Một bảng có thể có các ô trống, nhưng các ô không thể bắc qua (span) nhau theo chiều thẳng đứng, như cách có thể trong HTML.
  • TableRow
Các đối tượng TableRow là các View con của một TableLayout (mỗi TableRow định nghĩa một hàng duy nhất trong bảng). Mỗi hàng có không hoặc nhiều ô, mỗi ô trong số đó được xác định bởi bất kỳ loại View nào. Vì vậy, các ô của một hàng có thể là một vài loại View, như ImageView hoặc TextView. Một ô cũng có thể là một đối tượng ViewGroup (ví dụ, bạn có thể cho một TableLayout khác vào trong 1 ô).

Ví dụ:

Chú ý: Nếu phần tử gốc của giao diện không phải là TableLayout, bạn có thể thay đổi tên thẻ mà không cần phải thay đổi gì khác, như vậy bạn sẽ có một giao diện với phần tử gốc là TableLayout.

TableRow sẽ tự động được tạo ra (nếu dòng đó chưa có) khi bạn kéo thả các View con vào các ô của bảng.
Các ô có thể bắc qua (span) nhau theo chiều ngang, nhưng không thể theo chiều thẳng đứng. Có thể có những ô không chứa View con nào.
Bạn có thể sét đặt kích thước cụ thể cho các View trong ô, nó sẽ làm thay đổi kích thước của ô.
Các view nằm trong các ô bạn có thể sét đặt các thuộc tính android:layout_gravityandroid:gravity, điều này được đã tôi mô tả chi tiết trong LinearLayout.

3.4- GridLayout

GridLayout sử dụng một mạng lưới các dòng mỏng và vô hạn để tách khu vực bản vẽ của nó thành: các hàng, các cột, và các ô (cell). Nó hỗ trợ cả việc bắc qua (span) các hàng và các cột, mà cùng nhau cho phép một thành phần giao diện để chiếm một phạm vi hình chữ nhật gồm nhiều ô.
Kích thước (Size), Căn lề (Margin) và Căn chỉnh/trọng lực (Alignment/Gravity)
Trong GridLayout, việc chỉ định kích thước và căn lề làm giống với LinearLayout. Căn chỉnh/trọng lượng (Alignment/gravity) cũng làm việc giống như trọng lực (gravity) trong LinearLayout và sử dụng chung các hằng số: left, top, right, bottom, center_horizontal, center_vertical, center, fill_horizontal, fill_vertical và fill.
Tính linh hoạt (Flexibility)
Không giống như hầu hết các lưới ở các bộ công cụ khác, GridLayout không liên kết dữ liệu với các hàng hoặc cột. Thay vào đó, tất cả mọi thứ được làm với Aligment (căn chỉnh) và sự linh hoạt được liên kết với các thành phần tự thân của nó.

Sự linh hoạt của các cột được suy ra từ trọng lực (gravity) của các thành phần bên trong các cột. Nếu mọi thành phần định nghĩa một trọng lực, cột được coi là linh hoạt, nếu không cột được coi là không linh hoạt

Ví dụ:

Chú ý: Nếu phần tử gốc của giao diện không phải là GridLayout, bạn có thể thay đổi tên thẻ mà không cần phải thay đổi gì khác, như vậy bạn sẽ có một giao diện với phần tử gốc là GridLayout.

Các thành phần con xác định vị trí của nó trong lưới theo thuộc tính layout_row & layout_column:
Làm việc với GridLayout, nguyên tắc là bạn cứ đặt các thành phần con liên tiếp nhau, sau đó thay đổi các thuộc tính của nó để đạt được điều mong muốn, tất cả có được nhờ tính linh hoạt của Layout này.
Với GridLayout, nếu cột lưới nào chưa có vật thể chiếm chỗ, chiều rộng của lưới tại đó có giá trị bằng 0. Tương tự vậy nếu dòng lưới nào chưa có vật thể chiếm chỗ chiều cao lưới tại đó bằng 0.

layout_columnWeight

Trong GridLayout thuộc tính layout_columnWeight là khối lượng theo cột (column) của vật thể trong ô, nó có ảnh hưởng tới việc chiếm chỗ theo cột, mặc định giá trị này là 0.

Nếu bạn chỉ định một giá trị khác 0 cho layout_columnWeight bạn cần phải sét đặt giá trị layout_gravity (trọng tâm layout) cho đối tượng, đây là điều bắt buộc, nếu không chỉ định giá trị layout_gravity đối tượng có thể không hiển thị trên lưới:

  • Các giá trị cho layout_gravity trong trường hợp này phải là:
    • left
    • right
    • center_horizontal
    • center
    • fill_horizontal
    • fill

layout_rowSpan

layout_rowWeight

Trong GridLayout thuộc tính layout_rowWeight là khối lượng theo hàng (row) của vật thể trong ô, nó có ảnh hưởng tới không gian chiếm chỗ theo hàng, mặc định giá trị này là 0.

layout_columnSpan

OK, bạn có thể sử dụng GridLayout thiết kế giao diện như hình dưới đây được không?

3.5- FrameLayout

FrameLayout là một đối tượng giữ chỗ ở trên màn hình mà bạn có thể sử dụng để hiển thị một khung nhìn duy nhất.

Ví dụ:

Thiết kế giao diện sau với FrameLayout.
Chuẩn bị một file ảnh:
  • halong.png
Copy và paste file ảnh vào thư mục mipmap.
Kéo thả đối tượng ImageView vào màn hình tại khu vực left+top.
Tương tự kéo thả 2 đối tượng TextView khác vào màn hình:
Sét đặt thuộc tính cho phép ImageView chiếm đầy màn hình.
ImageView:
  • layout_width: fill_parent
  • layout_height: fill_parent
  • src: @mipmap/halong
Thay đổi các thuộc tính cho TextView 1:
TextView 1:
  • layout_width: fill_parent
  • text: Halong Bay, Vietnam
  • layout_gravity:
    • top
    • left
  • layout_marginTop: 100dp
  • padding: 10dp
  • background: #d7cece
Thay đổi các thuộc tính cho TextView 2:
TextView 2:
  • text: Photo by intrepidtravel.com
  • layout_gravity:
    • right
    • bottom
  • activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/imageView"
        android:layout_gravity="top|left"
        android:src="@mipmap/halong" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Halong Bay, Vietnam"
        android:id="@+id/textView"
        android:layout_gravity="top|left|center_vertical"
        android:layout_marginTop="100dp"
        android:background="#d7cece"
        android:padding="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Photo by intrepidtravel.com"
        android:id="@+id/textView2"
        android:layout_gravity="right|bottom" />

</FrameLayout>
Chạy ứng dụng của bạn: