Bài 5: Các loại layout trong Android

     Để thiết kế thật tốt giao diện trong Android, các bạn phải nắm chắc việc sử dụng các loại Layout cơ bản của nó. Các Layout cơ bản của Android bao gồm:
          +FrameLayout
          +LinearLayout
          +TableLayout
          +RelativeLayout
          +AbsoluteLayout

      Việc nắm vững các loại layout trên là rất cần thiết, và để có thể thiết kế được các giao diện phức tạp, các bạn cần kết hợp đồng thời nhiều loại layout với nhau. Trước tiên chúng ta cần tìm hiểu cách tạo một layout mới và cách kết nối chúng vào Activity.

1.Tạo mới layout và kết nối vào Activity
     Khi bạn tạo mới một Android project, các bạn sẽ thấy một layout mặc định của nó là activity_main.xml. Đó là layout được chỉ định chạy đầu tiên của chương trình. Bạn có thể tạo mới một layout khác và thay thế layout mặc định bằng layout bạn vừa tạo ra.
          +Chuột phải vào thư mục project trong Package Explorer chọn New/Others...
          +Trong cửa sổ mới xuất hiện, mở thư mục Android, và chọn Android XML Layout Files rồi chọn Next.
          +Tại đây bạn có thể chọn loại layout mà bạn muốn tạo, đặt tên và click finish. Ở đây mình sẽ chọn LinearLayout và đặt tên là new_layout. Kéo một vài loại View trong Palette vào cho nó chuyên nghiệp

Như vậy trong thư mục res/layout đã có một layout mới là new_layout.xml. Mở file MainActivity.java ra. (Các bạn nhớ xử lý một project android mới như mình đã hướng dẫn nhé)
>>>Giải quyết vấn đề với Fragment Layout

Sau khi xử lý rắc rối với fragment layout thì trong MainActivity.java sẽ còn lại như sau:

package com.example.hellowolrd;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.os.Build;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }
}

     Các bạn chú ý dòng: setContentView(R.layout.activity_main); Đây chính là dòng đặt activity được khởi tạo đầu tiên khi chạy ứng dụng. Các bạn chỉ cần thay activiti_main bằng tên file xml mới của bạn và chạy thử trên Android emulator. Chắc chắn các bạn sẽ thấy kết quả sẽ là layout mới mà bạn vừa thiết kế. Chúc các bạn may mắn.

2. Các loại layout cơ bản:
      a.Framelayout:
      - Đây là loại Layout cơ bản nhất trong Android. Đặc điểm của layout này là các view khi được đưa vào layout sẽ được "neo giữ" tai góc trái trên cùng của màn hình. Nó sẽ không cho phép chúng ta thay đổi vị trí của các view theo một vị trí nào hết.
      - Khi các bạn đưa các view vào sau sẽ nằm đè lên và che khuất một phần hoặc che khuất hoàn toàn view trước đó. Các bạn tham khảo đoạn code trong android_main.xml nhé:

<FrameLayout 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">
   
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Dòng này ở sau" 
        android:textSize="40sp"
        android:textColor="#008000"/>
   
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Dòng này ở trước "
        android:textSize="30sp"
        android:textColor="#000000"/>

</FrameLayout>

Các bạn lưu ý các dòng code sau và ý nghĩa của chúng:
+ android:layout_width="wrap_content" & android:layout_height="wrap_content" : Dòng này định nghĩa chiều rộng và chiều dài của một View. Ở đây là mình lấy từ TextView. Các bạn có thể hiểu rằng độ rộng và độ dài của TextView này bằng các thành phần bên trong nó (wrap = bao bọc). Ở đây là dòng chữ hiển thị.
+ android:text="Dòng này ở sau" : Hiển thị một chuỗi ký tự ở TextView
+ android:textSize="40sp": Độ lớn của chuỗi ký tự
+ android:textColor="#008000" : Màu sắc của chuỗi ký tự.
Ngoài ra còn rất nhiều thuộc tính của TextView. Khi code, các bạn chỉ cần viết "and" và sử dụng tổ hợp phím Ctrl+space. Sẽ có một loạt các phương thức sẵn có và các bạn có thể sử dụng để gợi ý, làm tăng tốc độ coding.

b. LinearLayout:
- Layout này cho phép sắp xếp các view theo chiều ngang(từ trái sang phải) hoặc chiều dọc (Từ trên xuống dưới).

 <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:orientation="vertical">
  
    <LinearLayout android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Username:" 
            android:textSize="20sp"
            android:textColor="#008000"/>
        <EditText 
            android:id="@+id/edtName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="5"/>
    </LinearLayout>
  
    <LinearLayout android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Password:" 
            android:textSize="20sp"
            android:textColor="#008000"/>
        <EditText 
            android:id="@+id/edtPass"
            android:inputType="textPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="5"/>
    </LinearLayout>

</LinearLayout>

Kết quả:

Trong ví dụ trên, mình đã sử dụng kết hợp thêm 2 LinearLayout bên trong LinearLayout gốc. Đây chính là cách các bạn kết hợp các loại Layout với nhau để có thể tạo ra một giao diện phức tạp.
Một vài thuộc tính mà các bạn cần lưu ý:
-Trong LinearLayout:
+ android:orientation="vertical": Xác định việc LinearLayout sắp xếp các phần tử trong nó theo chiều nào. Ở đây vertical để định nghĩa sắp xếp theo chiều dọc, còn horizontal là định nghĩa theo chiều ngang
- Trong EditText :
+ Đây là view cho phép người dùng nhập dữ liệu vào (Giống textbox). Các bạn phải định nghĩa id của nó với câu lệnh android:id. Việc định nghĩa id sau này sẽ giúp các bạn lấy các view này ra để thực hiện các công việc trong phần code.
+ android:inputType="textPassword": định nghĩa loại dữ liệu nhập vào. Ở đây là loại dữ liệu password sẽ hiện dấu chấm thay vì các ký tự (che đi cho nó bảo mật). Ngoài ra ở đây cũng có nhiều loại dữ liệu inputType. Các bạn xóa chữ textPassword đi và lại sử dụng tổ hợp phím kỳ diệu Ctrl+space nhé

c. TableLayout
- Là dạng bảng, cho phép các view sắp xếp theo dạng lưới(dòng và cột)
***Chú ý: TableLayout sẽ xem dòng nào có số lượng view nhiều nhất để xác định rằng nó có bao nhiêu cột. Có nghĩa là nó sẽ lấy dòng có số View nhiều nhất là số cột chuẩn

Theo hình trên thì TableLayout sẽ có 3 dòng và 4 cột. Các bạn cần phải chú ý điểm này khi code giao diện với TableLayout nhé.

<TableLayout 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:stretchColumns="*">
   
    <TableRow android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Username:" 
            android:textSize="20sp"
            android:textColor="#008000"/>
        <EditText 
            android:id="@+id/edtName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="5"
            android:layout_span="2"/>
    </TableRow>
   
   <TableRow android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Password:" 
            android:textSize="20sp"
            android:textColor="#008000"/>
        <EditText 
            android:id="@+id/edtPass"
            android:inputType="textPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="5"
            android:layout_span="2"/>
    </TableRow>

   <TableRow android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        
       <Button 
           android:id="@+id/btnOk"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="OK"/>
       <Button 
           android:id="@+id/btnClear"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Clear"/>
       <Button 
           android:id="@+id/btnCancel"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Cancel"/>
       
   </TableRow>
   
</TableLayout>

Kết quả:

Các bạn chú ý một vài câu lệnh sau:
+ android:stretchColumns="*" dùng để dãn đều các cột và các view.
+ android:layout_span="2" trộn số cột với nhau, ở đây là trộn 2 cột. Các bạn thử xóa dòng này đi trong Editext, sẽ thấy nó ngắn lại, chỉ dài đúng bằng kết thúc của nút Clear. Không tin hả, làm thử coi =))

Ngoài ra các bạn dùng layout_column để di chuyển vị trí các view đến một cột nào đó của dòng. Các bạn tự thực hành thêm về thuộc tính này nhé

d.Relative Layout:
- Cho phép sắp xếp các view theo một vị trí trương đối so với các view khác. Thường thì Relative Layout sẽ dựa vào các ID của các view để sắp xếp nên các bạn phải thật sự đặt cẩn thận các ID của layout. Nếu không giao diện sẽ bị xáo trộn hoàn toàn.

<?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="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Name" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:ems="10" >

        <requestFocus />
    </EditText>
    <Button android:id="@+id/btnOk"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText1"
        android:layout_alignParentRight="true"
        android:text="OK"/>
</RelativeLayout>

Kết quả:

e. AbsoluteLayout:
-Cho phép thiết lập các giao diện các control tùy thích.

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Name" 
        android:layout_x="150px"
        android:layout_y="50px"/>
</AbsoluteLayout>

Kết quả:

Thường thì chúng ta sẽ ít sử dụng Layout này bởi lẽ khi bạn đưa ra vị trí kiểu như vậy sẽ khó phù hợp với các loại màn hình với độ lớn và độ phân giải khác nhau

Qua bài học này, các bạn đã hiểu rõ về các loại Layout và cách sử dụng chúng. Mình mong rằng các bạn sẽ tự thực hành nhiều hơn, code nhiều hơn để có thể nhớ và nắm vững kiến thức. Lý thuyết thì khó nhớ nhưng chỉ cần các bạn tự code lại, thực hành lại thì sẽ hiểu ngay. Chớ nên copy code rồi debug ra màn hình emulator rồi tự khâm phục mình giỏi nhé ^^

Chúc các bạn may mắn. Hẹn gặp lại trong các bài tiếp theo

>>>Bài 6: Làm quen với một số kiểu lập trình sự kiện trong android

Pages

Lập trình tương lai

Bài 5: Các loại layout trong Android

No comments:

Post a Comment

Bài đăng phổ biến

Nguyen Huy