RelativeLayout là layout mà nó hiện thị các view con nó chứa ở các vị trí trong mối liên hệ của chúng với nhau (như View con này nằm dưới một View con khác, View con này nằm bên trái một View con khác …), kể cả mối liên hệ của chúng với chính phần tử cha RelativeLayout (như căn thẳng theo cạnh đấy của phần tử cha, nằm giữa phần tử cha, nằm bên trái phần tử cha …).
RelativeLayout là một layout hết sức mạnh mẽ về độ tiện lợi và hiệu quả, nếu giao diện không ở mức quá phức tạp việc chọn RelativeLayout mạng lại hiệu suất còn tốt hơn ConstraintLayout. RelativeLayout dùng khi đơn giản, ConstraintLayout khi giao diện phức tạp.
Khi các View con đưa vào RelativeLayout nếu chưa có thiết lập mối liên hệ qua lại nào với phần tử cha hay với phần tử View con khác thì nó sẽ được định vị ở góc trên – trái của RelativeLayout. Như trường hợp dưới đây cả 3 View con không có thiết lập mối liên hệ nào, nên nó đều định vị ở góc trên / trái và vẽ chồng nên nhau, View con nào xếp sẽ ở lớp trên của màn hình.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="8dp" android:background="#e2e3eb"> <TextView android:id="@+id/view1" android:text="view1" android:gravity="center" android:layout_width="200dp" android:layout_height="50dp" android:background="#e8d33636" /> <TextView android:id="@+id/view2" android:text="view2" android:gravity="center" android:layout_width="50dp" android:layout_height="200dp" android:background="#e71faf15" /> <TextView android:id="@+id/view3" android:text="view3" android:gravity="center" android:layout_width="100dp" android:layout_height="100dp" android:background="#d4a00f8f" /> </RelativeLayout>
Mô tả một vài thuộc tính:
android:layout_alignParentTop
– Nếu “true”, cạnh trên của View sẽ trùng với cạnh trên của thành phần cha.
android:layout_centerVertical
– Nếu “true”, View này sẽ được xếp vào giữa theo chiều dọc của thành phần cha.
android:layout_below
– View sẽ nằm dưới một view khác, và xác định view đó qua id.
android:layout_toRightOf
– View sẽ nẳm bên phải so với một View khác.
Khai báo RelativeLayout
Ví dụ về một Relative Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <EditText android:id="@+id/txtUsername" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="Username" android:inputType="text" /> <EditText android:id="@+id/txtPassword" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/txtUsername" android:hint="Password" android:inputType="textPassword" android:layout_marginBottom="10dp" /> <Button android:id="@+id/btnLogin" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@id/txtPassword" android:layout_centerHorizontal="false" android:layout_centerInParent="false" android:layout_centerVertical="false" android:layout_marginRight="10dp" android:background="#FFD57D" android:text="Login" /> <Button android:id="@+id/btnClear" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="false" android:layout_alignTop="@id/btnLogin" android:layout_toRightOf="@id/btnLogin" android:background="#FF9900" android:text="Clear" /> <!-- btnGoHome position relative to parent layout --> <Button android:id="@+id/btnGoHome" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:background="#319DEA" android:paddingLeft="10dp" android:paddingRight="10dp" android:text="Go to Home Page" android:textColor="#FFFFFF" /> </RelativeLayout>
Với thiết kế này, chúng ta có kết quả như sau:
Bảng danh sách các thuộc tính canh phần tử xuất hiện như thế nào so với các phần tử khác được liệt kê phía sau:
Tên thuộc tính | Mô tả |
---|---|
android:layout_above | Đặt phần tử hiện tại nằm kế sau phần tử có id được chỉ ra |
android:layout_alignBaseline | Đặt phần tử này lên cùng dòng với phần tử có id được chỉ ra |
android:layout_alignBottom | Canh sao cho đáy của phần tử hiện thời trùng với đáy của phần tử có id được chỉ ra |
android:layout_alignLeft | Đặt cạnh trái của phần tử hiện thời trùng với cạnh trái của phần tử có id được chỉ ra |
android:layout_alignParentBottom | Nếu thiết lập là true thì phần tử hiện thời sẽ được canh xuống đáy của phần tử chứa nó |
android:layout_alignParentLeft | Nếu được thiết lập là true thì phần tử hiện thời sẽ canh trái so với phần tử chứa nó |
android:layout_alignParentRight | Nếu được thiết lập là true thì phần tử hiện thời sẽ canh phải so với phần tử chứa nó |
android:layout_alignParentTop | Nếu được thiết lập là true thì phần tử hiện thời sẽ canh lên đỉnh phần tử chứa nó |
android:layout_alignRight | Canh cạnh phải của phần tử hiện thời trùng với cạnh phải của phần tử có id được chỉ ra |
android:layout_alignTop | Canh đỉnh của phần tử hiện thời trùng với đỉnh của phần tử có id được chỉ ra |
android:layout_alignWithParentIfMissing | Nếu thiết lập là true, thì phần tử sẽ được canh theo phần tử chứa nó nếu các thuộc tính canh của phần tử không có |
android:layout_below | Đặt phần tử hiện thời ngay sau phần tử có id được chỉ ra |
android:layout_centerHorizontal | Nếu thiết lập là true thì phần tử hiện thời sẽ được canh giữa theo chiều ngang phần tử chứa nó |
android:layout_centerInParent | Nếu thiết lập là true thì phần tử hiện thời sẽ được canh chính giữa theo chiều phải trái và trên dưới so với phần tử chứa nó |
android:layout_centerVertical | Nếu thiết lập là true thì phần tử hiện thời sẽ được canh chính giữa theo chiều dọc phần tử chứa nó |
android:layout_toLeftOf | Đặt cạnh phải của phần tử hiện thời trùng với cạnh trái của phần tử có id được chỉ ra |
android:layout_toRightOf | Đặt cạnh trái của phần tử hiện thời trùng với cạnh phải của phần tử có id được chỉ ra |
Source code của ví dụ minh họa
Download