Home » Lập trình » Học Android » Bài 4. Tìm hiểu các Layout trong Android.

Bài 4. Tìm hiểu các Layout trong Android.

Trong bài này chúng ta cùng đi tìm hiểu vể Layout trong Android. Sự khác nhau giữa chúng.

[Total: 0    Average: 0/5]

Bài trước(Bài 3) chúng ta đã thiết lập máy ảo cho Android và tạo project đầu tiên, các bạn có thể xem lại Tạo project android đầu tiên.

Trong bài này chúng ta cùng đi tìm hiểu vể Layout trong Android. Sự khác nhau giữa chúng.

Android gồm 6 Layout:

1. Linear Layout

2. Relative Layout

3. Table Layout

4. Grid View

5. Tab Layout

6. List View

Android cho phép tạo layout bằng XML(chúng ta vẫn có thể tạo bằng java). Tất cả các layout được nằm trong thư mục /res/layout Vâng bây giờ chúng ta sẽ đi vào cụ thể từng Layout:

– Linear Layout Linear layout bố trí theo chiều ngang hoặc dọc và từ trên xuống dưới. Với thuộc tính vertical(theo chiều dọc) và Hoizontally(theo chiều ngang) đây là 2 giá trị của thuộc tính andoroid:orientation Vd:

<LinearLayout android:orientation="vertical"> .... </LinearLayout> <LinearLayout android:orientation="hoizontally"> .... </LinearLayout>

Và đây là hình minh họa.Bây giờ chúng ta hãy tạo 1 project để làm về LinearLayout nhé: Ta tạo 1 project bằng cách click vào File -> New -> Android Project Trong thư mục res/layout ta tạo 1 file linear_layout.xml bằng cách click res/layout -> chuột phải -> New -> Android XML File Mở file vừa tạo và thêm code này nhé:

<?xml version="1.0" encoding="utf-8"?>
 <!-- Parent linear layout with vertical orientation -->
 <LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
 android:text="Email:" android:padding="5dip"/> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content"
 android:layout_marginBottom="10dip"/> <Button android:layout_width="fill_parent" android:layout_height="wrap_content"
 android:text="Login"/> <!-- Child linear layout with horizontal orientation -->
 <LinearLayout android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal" android:background="#2a2a2a"
 android:layout_marginTop="25dip"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
 android:text="Home" android:padding="15dip" android:layout_weight="1"
 android:gravity="center"/> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
 android:text="About" android:padding="15dip" android:layout_weight="1"
 android:gravity="center"/> </LinearLayout> </LinearLayout>

Trong file AndroidLayoutsActivity ta đổi từ R.layout.main thành R.layout. linear_layout.xml

package com.example.androidlayouts;
 import android.app.Activity;
 import android.os.Bundle; public class AndroidLayoutsActivity extends Activity { @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.linear_layout);
 }
 }

Chúng ta chạy ứng dụng nào. Click chuột phải vào project-Run As-> Android Appliaction Kết quả:

– Relative Layout

Relative Layout iển thị các View con với các vị trí tương đối. Vị trí của mỗi View có thể được xác định so với các View khác hoặc với thành phần cha của chúng (thông qua id). Bạn có thể sắp xếp View sang bên phải, bên dưới một View khác, giữa màn hình

Chúng ta sẽ làm 1 ví dụ về 1 form đăng nhập:

<Button android:id="@+id/btnLogin" ..></Button> <Button android:layout_toRightOf="@id/btnLogin"
 android:layout_alignTop="@id/btnLogin" ..></Button>

Tương tự như Linear Layout ta vào thư mục res/layout tạo 1 file xml có tên:relative_layout.xml

và thêm gõ code này nhé:

<?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"> <TextView android:id="@+id/label" android:layout_width="fill_parent"
 android:layout_height="wrap_content" android:text="Email" /> <EditText android:id="@+id/inputEmail" android:layout_width="fill_parent"
 android:layout_height="wrap_content" android:layout_below="@id/label" /> <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="Login" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
 android:layout_toRightOf="@id/btnLogin"
 android:layout_alignTop="@id/btnLogin" android:text="Cancel" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
 android:layout_alignParentBottom="true" android:text="Register new Account"
 android:layout_centerHorizontal="true"/>
 </RelativeLayout>

Để khi chạy nó hiển thị trên màn hình chính thì ta phải set cho nó thuộc tính này: setContentView(R.layout.relative_layout);

Và ta chạy project thôi nào:

 Table Layout:

TableLayout thể hiện các View dưới dạng lưới. Bạn có sử dụng thẻ <TableRow> để tạo ra các hàng, các cột trong layout. Các ô được tạo có thể chứa các View và layout khác.

Tương tự như 2 layout trên ta cũng tạo 1 ví dụ về Table layout, ta tạo 1 file xml có tên: table_layout.xml

Code của file đó:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:shrinkColumns="*" android:stretchColumns="*" android:background="#ffffff"> <!-- Row 1 with single column -->
 <TableRow android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="center_horizontal"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content"
 android:textSize="18dp" android:text="Row 1" android:layout_span="3"
 android:padding="18dip" android:background="#b0b0b0"
 android:textColor="#000"/> </TableRow> <!-- Row 2 with 3 columns -->
 <TableRow android:id="@+id/tableRow1" android:layout_height="wrap_content" android:layout_width="match_parent"> <TextView android:id="@+id/TextView04" android:text="Row 2 column 1"
 android:layout_weight="1" android:background="#dcdcdc"
 android:textColor="#000000"
 android:padding="20dip" android:gravity="center"/> <TextView android:id="@+id/TextView04" android:text="Row 2 column 2"
 android:layout_weight="1" android:background="#d3d3d3"
 android:textColor="#000000"
 android:padding="20dip" android:gravity="center"/>
 <TextView android:id="@+id/TextView04" android:text="Row 2 column 3"
 android:layout_weight="1" android:background="#cac9c9"
 android:textColor="#000000"
 android:padding="20dip" android:gravity="center"/>
 </TableRow> <!-- Row 3 with 2 columns -->
 <TableRow android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="center_horizontal"> <TextView android:id="@+id/TextView04" android:text="Row 3 column 1"
 android:layout_weight="1" android:background="#b0b0b0"
 android:textColor="#000000"
 android:padding="20dip" android:gravity="center"/> <TextView android:id="@+id/TextView04" android:text="Row 3 column 2"
 android:layout_weight="1" android:background="#a09f9f"
 android:textColor="#000000"
 android:padding="20dip" android:gravity="center"/> </TableRow> </TableLayout>

Và ta đổi tên file trong main: setContentView(R.layout.table_layout);

Khi Run ta sẽ được kết quả như sau:

Chúc các bạn học tốt!!! bài 5 tôi sẽ cùng các bạn tìm hiểu vể việc từ 1 activity này sang 1 activity khác, mời các bạn đón đọc.

 

Aboutquyenpro

Nguyễn Văn Quyền, rất vui được làm quen với các bạn!

Leave a Reply

Your email address will not be published. Required fields are marked *

*