Bài 3 : Làm quen với layout và widget cơ bản trong Android

0

3.1 Các layout cơ bản trong Android

3.1.1 FrameLayout

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

3.1.2 LinearLayout

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>

hinh3.1

Hình 3.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>

hinh3.2

Hình 3.2

Chúng ta cũng có thể lồng LinearLayout nọ vào LinearLayout kia để 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>

hinh3.3

Hình 3.3

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

Android:gravity                   canh 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

  • Một số giải thích cho các giá trị thuộc tính được sử dụng trong 3 ví dụ trên:

 

fill_parent                           Giãn rộng bằng thằng chứa nó

wrap_content                    Co 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 TabLayout, 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:hinh3.4

Hình 3.4

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:

hinh3.5

Hình 3.5

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:

<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:hinh3.6

Hình 3.6

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:

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.

Share.

About Author

Leave A Reply