Bài 5. Các Layout cơ bản

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>

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>

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>

-  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:

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 view khá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:

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:

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:

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: