Quay lại chọn bài học

1. Frame Layout

Đơn giản là vùng hiển thị 1 nội dung cụ thể nào đó. Nó chứa trong nó 1 thành phần view khác như 1 hình ảnh, 1 nút nhấn, 1 nhãn…
Phần tử con luôn hiển thị ở góc trên trái của FrameLayout và không thể thay đổi được.
Các phần tử “sau” sẽ nằm chồng lên phần tử “trước” (sau, trước theo thứ tự trong tập tin .xml).

2.  Linear Layout

Layout này hay được sử dụng nhất khi làm ứng dụng. Nó đơn giản cho phép ta sắp xếp các phần tử trong nó theo dạng danh sách dọc hoặc ngang. Để chỉ LinearLayout này bố trí theo chiều dọc hay chiều ngang ta sử dụng thuộc tính Android:orientation với các giá trị lần lượt là vertical (ngang) hoặc horizontal (dọc ).
Để các phần tử con nằm trong LinearLayout có độ rộng tương đối so với nhau ta sử dụng thuộc tính Android:layout_weight và thiết lập giá trị là con số tương ứng.
Ví dụ sau tạo một giao diện gồm 4 cột có kích thước bằng nhau và có màu sắc khác nhau:
<LinearLayout 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:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:orientation="horizontal"

    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <TextView

        android:id="@+id/textView5"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:text="column 1"

        android:layout_weight="1"

        android:background="#FFFE52"/>

    <TextView

        android:id="@+id/textView6"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:text="column 2"

        android:layout_weight="1"

        android:background="#FF0052"/>

    <TextView

        android:id="@+id/textView7"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:text="column 3"

        android:layout_weight="1"

        android:background="#FF0000"/>

    <TextView

        android:id="@+id/textView8"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:text="column 4"

        android:layout_weight="1"

        android:background="#FFFF00"/>

    </LinearLayout>

1

Ví dụ tiếp sau đây tạo một giao diện gồm 4 hàng, mỗi hàng là 1 dòng chữ:
<LinearLayout 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:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:orientation="vertical"

    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <TextView

        android:id="@+id/textView1"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:text="column 1"

        android:layout_weight="1"

       />

    <TextView

        android:id="@+id/textView2"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:text="column 2"

        android:layout_weight="1"

       />

    <TextView

        android:id="@+id/textView3"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:text="column 3"

        android:layout_weight="1"

       />

    <TextView

        android:id="@+id/textView4v"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:text="column 4"

        android:layout_weight="1"

       />

    </LinearLayout>

2

Chúng ta cũng có thể lồng LinearLayout này vào LinearLayout khác để tạo ra một giao diện kết hợp phức tạp hơn.
Ví dụ sau sẽ đặt 2 LinearLayout nằm trong 1 LinearLayout khác.
<LinearLayout 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:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:orientation="vertical"

    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<LinearLayout

android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:layout_weight="1">

    <TextView

        android:id="@+id/textView1"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:text="column 1"

        android:layout_weight="1"

       />

    <TextView

        android:id="@+id/textView2"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:text="column 2"

        android:layout_weight="1"

       />

    <TextView

        android:id="@+id/textView3"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:text="column 3"

        android:layout_weight="1"

       />

    <TextView

        android:id="@+id/textView4v"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:text="column 4"

        android:layout_weight="1"

       />

</LinearLayout>

             <LinearLayout

                 android:layout_width="fill_parent"

                 android:layout_weight="1"

                 android:layout_height="wrap_content">

                 <TextView

                     android:id="@+id/textView5"

                     android:layout_width="fill_parent"

                     android:layout_height="fill_parent"

                     android:text="column 1"

                     android:layout_weight="1"

                     android:background="#FFFE52"/>

                 <TextView

                     android:id="@+id/textView6"

                     android:layout_width="fill_parent"

                     android:layout_height="fill_parent"

                     android:text="column 2"

                     android:layout_weight="1"

                     android:background="#FF0052"/>

                 <TextView

                     android:id="@+id/textView7"

                     android:layout_width="fill_parent"

                     android:layout_height="fill_parent"

                     android:text="column 3"

                     android:layout_weight="1"

                     android:background="#FF0000"/>

                 <TextView

                     android:id="@+id/textView8"

                     android:layout_width="fill_parent"

                     android:layout_height="fill_parent"

                     android:text="column 4"

                     android:layout_weight="1"

                     android:background="#FFFF00"/>

             </LinearLayout>

    </LinearLayout>

2ll

-  Một số giải thích cho các thuộc tính của các thành phần trong 3 ví dụ trên:
Thuộc tínhGiải thích
Android:gravityCanh nội dung nằm trong 1 thành phần
Android:layout_widthĐộ rộng của thành phần
Android:layout_heightĐộ cao của thành phần
Android:layout_weightĐộ “rộng” của thành phần so với thành phần khác
fill_parentGiãn rộng bằng thằng chứa nó
wrap_contentCo nhỏ vừa nội dung nó chứa

Về layout_weight, giả sử ta có 2 cột mà muốn cột thứ nhất rộng gấp đôi cột thứ 2 thì ta sẽ thiết lập để giá trị layout_weight của cột thứ nhất lớn gấp đôi của cột thứ 2 (ví dụ cột thứ nhất là 2, cột thứ 2 là 1. Hoặc của cột thứ nhất là 4, của cột thứ 2 là 2).

3.1.3 TableLayout

Kết hợp với thẻ TableRow để tạo ra các hàng các cột cho layout. Cách sử dụng cũng khá đơn giản. Khi dùng TableLayout, mặc định sẽ tạo ra các đường viền xung quanh các ô. Các ô có thể chứa nội dung là bất kỳ thành phần view nào khác (có thể chứa LinearLayout, FrameLayout hoặc TableLayout cũng được).
Mỗi thẻ TableRow nằm trong thẻ TableLayout tạo ra một hàng. Thẻ này sẽ thực sự sẽ chứa đựng các thành phần viewkhác.
Để xem cách dùng, ta sẽ thử làm ví dụ sau để tạo ra một menu cho ứng dụng bằng TableLayout:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:stretchColumns="1">

    <TableRow>

        <TextView

            android:text="Open…"

            android:padding="3dip"

            android:textSize="20sp"

            android:textColor="#ffca130c"/>

        <TextView

            android:text="Save AS…"

            android:gravity="right"

            android:padding="3dip"

            android:textSize="20sp"

            android:textColor="#ffff2acb"/>

    </TableRow>

    <TableRow>

        <TextView

            android:text="Close…"

            android:padding="3dip"

            android:textSize="20sp"

            android:textColor="#ff252eca"/>

        <TextView

            android:text="More…"

            android:gravity="right"

            android:padding="3dip"

            android:textSize="20sp"

            android:textColor="#ffca130c"/>

    </TableRow>

</TableLayout>

Ta được kết quả hiển thị như sau:
tb_layput 

3.1.4 RelativeLayout

Đây là loại Layout cho phép chúng ta thiết lập mối liên hệ hiển thị giữa các thành phần con với nhau. Nói cách khác, một thành phần con có thể được định vị vị trí của nó so với thành phần chứa nó hoặc các thành phần cạnh nó.
Ví dụ đơn giản sau đây sẽ sử dụng một thuộc tính xml để canh một nút nhấn sang bên phải thành phần đang chứa nó.
Chúng ta có kết quả hiển thị như sau:
rela_layout 
Trong ví dụ đơn giản trên. Chúng ta khai báo 1 RelativeLayout, trong đó đặt 4 thành phần con gồm 1 TextView, 1 EditText, và 2 Button.
<RelativeLayout

        xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

   android:layout_height="fill_parent"

  >

    <TextView

       android:id="@+id/label"

       android:layout_width="fill_parent"

       android:layout_height="wrap_content"

       android:text="Email:"

        android:textSize="20dp"

       />

    <EditText

       android:id="@+id/entry"

       android:layout_width="fill_parent"

       android:layout_height="40dp"

        android:background="#ff4dfff8"

              android:layout_below="@id/label"/>

    <Button

       android:id="@+id/ok"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_below="@id/entry"

       android:layout_alignParentRight="true"

       android:layout_marginLeft="10dip"

       android:text="OK" />

    <Button

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_toLeftOf="@id/ok"

       android:layout_alignTop="@id/ok"

       android:text="Cancel" />

</RelativeLayout>
Ở EditText chúng ta có thiết lập thuộc tính:
Android:layout_below="@id/label"
Thuộc tính này khai báo rằng EditText sẽ xuất hiện kế tiếp sau phần tử có id là label. Ở Button thứ nhất (có nhãn là Ok) chúng ta có thiết lập thuộc các thuộc tính:
Android:layout_below="@id/entry"
Android:layout_alignParentRight="true"
Thuộc tính này làm cho nút OK xuất hiện ngay sau phần tử có id là entry và đồng thời bị kéo sang bên phải của RelativeLayout.

3.1.5 AbsoluteLayout:

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

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/AbsoluteLayout1"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

   >

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_x="22dp"

        android:layout_y="29dp"

        android:text="Button" />

    <Button

        android:id="@+id/button2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_x="235dp"

        android:layout_y="114dp"

        android:text="Button" />

    <Button

        android:id="@+id/button3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_x="39dp"

        android:layout_y="186dp"

        android:text="Button" />

</AbsoluteLayout>

Kết quả đạt được:
abs_layout

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 dưới:
Thuộc tính
Mô tả
Android: id
Thiết lập  ID cho đối tượng.
Android: layout_width
Chiều rộng của đối tượng
Android: layout_height
Chiều cao của đối tượng
Android: layout_marginTop
Không gian thêm ở phía trên cùng để ngăn cách đối tượng với đối tượng khác.
Android: layout_marginBottom
Không gian mở rộng ở phía dưới cùng để ngăn cách đối tượng với đối tượng khác.
Android: layout_marginLeft
Không gian mở rộng ở phía bên trái
Android: layout_marginRight
Không gian mở rộng ở phía bên phải
Android: layout_gravity
Dùng căn chỉnh đối tượng ra giữa
Android: layout_weight
Quy định cụ thể có bao nhiêu không gian thêm trong cách bố trí nên được phân bổ cho các View.
Android: layout_x
Này quy định các x-phối hợp của bố trí.
Android: layout_y
Điều này xác định toạ độ y của bố trí.
Android: paddingLeft
Lớp đệm bên trái điền bố trí.
Android: paddingRight
Lớp đệm bên phải điền cho cách bố trí.
Android: paddingTop
Đệm đầu điền bố trí.
Android: paddingBottom
Lớp đệm phía dưới điền bố trí.
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. 

Quay lại chọn bài học

NHẬN XÉT - BÌNH LUẬN

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.