UI Layout trong Android

Trong bài này chúng ta sẽ tìm hiểu về UI Layout trong Android, đây đây là một component rất quan trọng trong việc xây dựng giao diện cho các ứng dụng Android.

UI Layout trong Android là bố cục giao diện người dùng, và cũng là thành phần quan trọng trong ứng dụng Android được tạo nên từ lớp View, với lớp con là ViewGroup. UI Layout trong Android chiếm một hình chữ nhật trên màn hình, chịu trách nhiệm cho việc vẽ và xử lý sự kiện.

1. Giới thiệu về UI Layout trong Android

Trong Android, Layout được sử dụng để xác định giao diện người dùng (UI) cho một ứng dụng hoặc activity và nó bao gồm các phần tử của UI sẽ xuất hiện ở giao diện người dùng.

Giao diện người dùng trong ứng dụng được tạo ra bởi các đối tượng View và ViewGroup. Thông thường, các ứng dụng Android sẽ chứa một hoặc nhiều activity và mỗi activity là một màn hình của ứng dụng. Các activity sẽ chứa nhiều UI component và các UI component đó là các instance của lớp con View và ViewGroup.

View là một lớp cơ sở của tất cả các UI component trong Android và nó được sử dụng để tạo ra các UI component tương tác với người dùng như TextView, EditText, Checkbox, Radio Button, v.v. và nó chịu trách nhiệm vẽ và xử lý sự kiện.

Bài viết này được đăng tại [free tuts .net]

ViewGroup là một lớp con của View và nó sẽ hoạt động như một lớp cơ sở cho layouts và layouts parameters. ViewGroup sẽ cung cấp một bộ chứa (container) vô hình để chứa các View hoặc ViewGroup khác và để xác định các thuộc tính layout.

Trong Android, ta có thể xác định một layout theo hai cách, đó là:

• Khai báo các phần tử của UI trong XML
• Khởi tạo các phần tử layout trong runtime.

Framwork của Android sẽ cho phép chúng ta sử dụng một hoặc cả hai phương pháp này để xác định giao diện người dùng của ứng dụng.

2. Khai báo các phần tử của UI trong XML

Trong Android, chúng ta có thể tạo layout giống như tạo trang web trong HTML bằng cách sử dụng View và ViewGroup mặc định trong file XML. file layout chỉ được chứa một phần tử gốc (root element), là một View hoặc ViewGroup. Khi chúng ta xác định phần tử gốc, sau đó chúng ta có thể thêm các đối tượng layout hoặc widget bổ sung dưới dạng phần tử con để xây dựng cấu trúc phân cấp View nhằm xác định layout.

Sau đây là ví dụ về xác định layout trong file XML ( activity_main.xml ) bằng cách sử dụng LinearLayout để chứa một TextView, một EditText và một Button.

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/fstTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter Name"
         />
    <EditText
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10">
    </EditText>
    <Button
        android:id="@+id/getName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Get Name" />
</LinearLayout>

Chúng ta cần tạo các file layout trong thư mục project / res / layout , khi đó thì các file layout mới biên dịch đúng.

Load file XML layout từ activity

Khi ứng dụng được biên dịch, mỗi file XML layout sẽ thành một view resource. Khi chúng ta hoàn thành việc tạo layout, chúng ta cần tải XML layout resource từ phần code bằng cách dùng phương thức callback onCreate() như dưới đây

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

Theo code ở trên, chúng ta đang tải layout bằng phương thức setContentView với tham số là R.layout.layout_file_name. Ở đây, tên file xml là activity_main.xml, vì vậy chúng ta đã sử dụng
R.layout.activity_main.

Nói chung, trong khi khởi chạy activity, phương thức callback onCreate () sẽ được gọi bởi framework của Android để tải layout cần thiết.

3. Khởi tạo các phần tử layout trong runtime

Nếu chúng ta muốn khởi tạo các phần tử layout trong runtime, chúng ta cần tạo tùy chỉnh các đối tượng View và ViewGroup bằng cách lập trình với java code.

Sau đây là ví dụ về cách tạo layout bằng cách sử dụng LinearLayout để chứa một TextView, một EditText và một Button trong activity bằng cách lập trình với java code.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TextView textView1 = new TextView(this);
        textView1.setText("Name:");
        EditText editText1 = new EditText(this);
        editText1.setText("Enter Name");
        Button button1 = new Button(this);
        button1.setText("Add Name");
        LinearLayout linearLayout = new LinearLayout(this);
        linearLayout.addView(textView1);
        linearLayout.addView(editText1);
        linearLayout.addView(button1);
        setContentView(linearLayout);
    }
}

4. Thuộc tính của layout trong Android

Trong Android, chúng ta có các loại thuộc tính khác nhau có sẵn cho các đối tượng View và ViewGroup để xác định tính thị giác của layout.

Sau đây là một số thuộc tính layout phổ biến được sử dụng trong ứng dụng Android.

Trong đó, có 2 thuộc tính bắt buộc phải thiết lập cho mỗi phần tử View và ViewGroup là width và height.

Width và Height

Khi chúng ta xác định một layout sử dụng file XML chúng ta cần phải thiết lập chiều rộng ( width ) và chiều cao ( height ) cho mỗi phần tử View và ViewGroup bằng cách sử dụng các thuộc tính layout_width và layout_height.

Sau đây là ví dụ về thiết lập width và height cho các phần tử View và ViewGroup trong file XML layout.

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/fstTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter Name" />
</LinearLayout>

Theo ví dụ trên, chúng ta đã sử dụng các giá trị khác nhau để thiết lập layout_width và layout_height, đó là :

• match_parent
• wrap_content

Nếu thiết lập giá trị match_parent thì View hoặc ViewGroup sẽ điều chỉnh trùng khớp với chiều rộng hoặc chiều cao của phần tử cha.

Nếu thiết lập giá trị wrap_content thì View hoặc ViewGroup sẽ điều chỉnh chiều rộng hoặc chiều cao của nó dựa trên nội dung bên trong.

5. Các loại Layout trong Android

chúng ta có các loại layout khác nhau có sẵn trong Android để triển khai giao diện người dùng cho các ứng dụng với các thiết kế khác nhau dựa trên yêu cầu .

Sau đây là các loại layout thường được sử dụng trong các ứng dụng:

• Linear Layout
• Relative Layout
• Frame Layout
• Table Layout
• Web View
• List View
• Grid View

Linear Layout

Trong Android, LinearLayout là một ViewGroup mà căn chỉnh các view con theo một hướng nào đó: chiều dọc hay chiều ngang dựa vào thuộc tính android:orientation.

Relative Layout

Trong Android, RelativeLayout là một ViewGroup mà các view con được sắp xếp dựa vào ID của view con khác.

Frame Layout

Trong Android, FrameLayout là một ViewGroup thuộc loại layout đơn giản, các View con chứa bên trong xếp chồng lên nhau và được định vị bằng thuộc tính layout_gravity.

Table Layout

Trong Android, TableLayout là một ViewGroup mà nhóm tất cả các view vào trong các hàng và các cột.

Web View

Trong Android, WebView là một trình duyệt được sử dụng để hiển thị các trang web như là một phần của activity layout.

List View

Trong Android, ListView là một ViewGroup, hiển thị các item theo một danh sách có thể cuộn được theo chiều thẳng đứng.

Grid View

Trong Android, GridView là một ViewGroup mà hiển thị các item theo dạng hình lưới và có thể cuộn được theo chiều ngang và chiều dọc.