Tìm hiểu về RelativeLayout trong Android

Khi nhắc đến UI Layout trong Android không thể không nói đến RelativeLayout. Vậy RelativeLayout trong Android là gì? Có mấy cách khai báo RelativeLayout trong Android? Sử dụng RelativeLayout như thế nào?

Tìm hiểu về RelativeLayout trong Android

Bây giờ tôi cùng các bạn sẽ trả lời lần lượt các câu hỏi được đặt ra ở trên.

1. RelativeLayout trong Android là gì?

RelativeLayout trong Android là một view group, các view con được sắp xếp tùy ý dựa vào id của view con nào đó. Các view con được sắp xếp theo view con trước đó dựa vào thuộc tính android:layout_below=”id_view_con”.    Ngoài ra còn căn chỉnh theo RelativeLayout (bên dưới, bên trái, bên phải) bởi thuộc tính android:layout_alignParentBottom=”true”.

2. Cách khái báo RelativeLayout trong Android

RelativeLayout trong Android được khi báo như sau.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
//todo
</RelativeLayout>

3. Các thuộc tính của Relative Layout trong Android

Một số thuộc tính quan trọng cần nắm về RelativeLayout.

Thuộc tính Mô tả
android:id ID là duy nhất để nhận diện Layout
android:gravity Đặt nội dung của view, trên cả hai trục X và Y. Giá trị có thể là trên cùng, dưới cùng, bên trái, bên phải, giữa, center_vertical, center_horizontal, v.v.
android:ignoreGravity Loại bỏ View con để nó không bị ảnh hưởng bởi gravity

Theo mặc định các view con được vẽ ở phía trên cùng bên trái của Layout. Vì vậy cần xác định vị trí của mỗi view bằng cách sử dụng các thuộc tính có sẵn từ RelativeLayout.LayoutParams như dưới đây.

Thuộc tính Mô tả
android:layout_above Cạnh dưới của view này ở trên view ID đã cho và phải là một tham chiếu tới resource khác, có dạng “@[+][package:]type:name”.
android:layout_alignBottom Cạnh dưới của view này khớp với cạnh dưới cùng của view ID đã cho và phải là một tham chiếu tới resource khác, có dạng “@ [+] [package:] type: name”.
android:layout_alignLeft Cạnh trái của view này khớp với cạnh trái của view ID đã cho và phải là một tham chiếu tới resource khác, có dạng “@ [+] [package:] type: name”
android:layout_alignParentBottom Nếu true thì cạnh dưới của view con này khớp với cạnh dưới của view cha và ngược lại.
android:layout_alignParentLeft Nếu true thì cạnh trái của view con này khớp với cạnh trái của view cha và ngược lại.
android:layout_alignParentRight Nếu true thì cạnh phải của view con này khớp với cạnh phải của view cha và ngược lại.
android:layout_alignParentTop Nếu true thì cạnh trên của view con này khớp với cạnh trên của view cha và ngược lại.
android:layout_alignRight Cạnh phải của view này khớp với cạnh phải của view ID đã cho và phải là tham chiếu đến resource khác, có dạng “@ [+] [package:] type: name”.
android:layout_alignTop Cạnh trên của view này khớp với cạnh trên của view ID đã cho và phải là tham chiếu đến resource khác, có dạng “@ [+] [package:] type: name”.
android:layout_below Cạnh trên của view này dưới view ID đã cho và phải là một tham chiếu tới resource khác, có dạng “@[+][package:]type:name”.
android:layout_centerHorizontal Nếu true thì căn chỉnh giữa view con này theo chiều ngang bên trong view cha của nó và ngược lại thì không.
android:layout_centerInParent Nếu true căn giữa view con này theo chiều ngang và dọc bên trong view cha của nó và ngược lại thì không.
android:layout_centerVertical Nếu true căn giữa view con này theo chiều dọc bên trong view cha của nó và ngược lại thì không.

Để có cái nhìn thực tế về RelativeLayout, mời các bạn đến với ví dụ sau đây.

4. Ví dụ sử dụng RelativeLayout trong Android

Đến với ví dụ sử dụng RelativeLayout tôi thiết kế giao diện đăng nhập như bên dưới. Các bạn có thể download source code ngay bên dưới đây.

Sau đây là 5 bước chuẩn để thực hiện quá trình tạo Project sử dụng RelativeLayout trong Android.

Với ví dụ sử dụng RelativeLayout trong Android tôi sẽ thiết kế giao diện đăng nhập như sau.

Tìm hiểu về RelativeLayout trong Android

Cấu trúc project ví dụ sử dụng RelativeLayout.

Tìm hiểu về RelativeLayout trong Android

Nội dung file relative_layout_activity.xml

<?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="wrap_content">

    <EditText android:id="@+id/inputEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/email"
       />

    <Button android:id="@+id/btnLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/inputEmail"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="10px"
        android:text="@string/btn_login" />

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/btnLogin"
         android:layout_alignTop="@id/btnLogin"
        android:text="@string/btn_cancel" />

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="@string/btn_register"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

Kết quả sau khi chạy ví dụ RelativeLayout trong Android

Tìm hiểu về RelativeLayout trong Android

Lời kết: Sau khi đã tìm hiểu về RelativeLayout trong Android các bạn cần nắm khái niệm UI Layout trong Android, UI Layout là gì?. Ngoài ra các bạn có thể xem thêm các nội dung khác trong chuyên mục lập trình Android được chia sẻ với Team Việt Dev.

Xem thêm các layout khác tại đây.

Sử dụng Linear Layout trong Android

Đang cập nhật…

(Tác giả: Team Việt Dev)

Bình luận