RelativeLayout trong Android

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

RelativeLayout là ViewGroup cũng được sử dụng khá nhiều trong android, RelativeLayout được định nghĩa trong xml bởi cặp thẻ đóng mở <RelativeLayout> và thẻ đóng </RelativeLayout>.

<?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">
    
    <!--View child-->
 
</RelativeLayout>

Quy tắc layout

Quy tắc layout của RelativeLayout khá giống như FrameLayout, nhưng có một số điểm đặc biệt là các view có thể xác định bằng vị trí tương đối  (relative) với các view khác thông qua id.

Các vị trí tương đối này như sau:

• android:layout_above="id_name": view hiện tại sẽ nằm phía trên view có thuộc tính id là id_name.
• android:layout_below="id_name": view hiện tại sẽ nằm phía dưới view có thuộc tính id là id_name.
• android:layout_toLeftOf="id_name": view hiện tại sẽ nằm bên trái dưới view có thuộc tính id là id_name.
• android:layout_toRightOf="id_name": view hiện tại sẽ nằm phía bên phải view có thuộc tính id là id_name.

Ví dụ 1: Để hiểu sâu hơn về RelativeLayout.

Ta thấy rằng EditText username nằm dưới TextView username. Và tương tự TextView password nằm dưới Editext username, EditText password sẽ nằm dưới TextView password. Chú ý các dòng chữ đậm: 16, 22, 29

Mã nguồn sẽ như sau:

Ví dụ 2: Xem hình sau:

EditText username sẽ nằm bên phải TextView username
EditText password sẽ nằm bên phải TextView password
TextView password và EditText password sẽ nằm phía dưới TextView username. Chú ý các dòng in đậm: 17, 23, 24. 31, 32

Một số thuộc tính khác thường xuyên sử dụng với RelativeLayout:

• android:layout_alignParentBottom="boolean": Căn dưới phần tử hiện theo phần tử cha nếu set là true.
• android:layout_alignParentTop="boolean": Căn trên phần hiện tại theo phần tử cha nết set là true.
• android:layout_alignParentRight="boolean": Căn phải phần tử hiện tại theo phần tử cha nếu set là true.
• android:layout_alignParentLeft="boolean": Căn trái phần tử hiện tại theo phần tử cha nếu set là true.

Ta có ví dụ sau:

<?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">
 
    <View
        android:background="#2c8291"
        android:layout_width="200dp"
        android:layout_height="200dp"/>
 
</RelativeLayout>

Các bạn hãy thử thêm các thuộc tính trên để xem kết quả như thế nào. Giả sử tôi thêm như sau:

<?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">
 
    <View
        android:layout_alignParentRight="true"
        android:background="#2c8291"
        android:layout_width="200dp"
        android:layout_height="200dp"/>
 
</RelativeLayout>

Kết quả:

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

Ưu điểm

+ Thiết kế được các giao diện phức tạp.

Nhược điểm

+ Thời gian tính toán và layout các view con khá lâu so với FrameLayout.

+ Muốn sử dụng các thuộc tính như  android:layout_above, android:layout_toLeftOf thì phải đặt id cho các view mà view hiện tại xác định vị trí tương đối đối với các view đó.

Download ví dụ