CĂN BẢN
INTENTS
GIAO DIỆN
CÁC KHÁI NIỆM
VÍ DỤ
TÀI LIỆU
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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 ViewViewGroup. 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 ViewViewGroup.

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.

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 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 ViewViewGroup 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 ViewViewGroup 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 ViewViewGroup để 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.

Thuộc tính Mô tả
android:id Đây là ID nhận diện duy nhất cho View
android:layout_width Đây là độ rộng của Layout
android:layout_height Đây là chiều cao của Layout
android:layout_marginTop Đây là không gian phụ (extra space) trên cạnh trên của Layout
android:layout_marginBottom Đây là extra space trên cạnh dưới của Layout
android:layout_marginLeft Đây là extra space trên cạnh trái của Layout
android:layout_marginRight Đây là extra space trên cạnh phải Layout
android:layout_gravity Xác định cách các view con được đặt tại đâu
android:layout_weight Xác định có bao nhiêu extra space trong Layout nên được cấp phát tới View đó
android:layout_x Xác định tọa độ x của Layout
android:layout_y Xác định tọa độ y của Layout
android:layout_width Đây là độ rộng Layout
android:layout_width Đây là chiều cao Layout
android:paddingLeft Đây là left padding được điền cho Layout
android:paddingRight Đây là right padding được điền cho Layout
android:paddingTop Đây là top padding được điền cho Layout
android:paddingBottom Đây là bottom padding được điền cho Layout

Trong đó, có 2 thuộc tính bắt buộc phải thiết lập cho mỗi phần tử ViewViewGroupwidth 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ử ViewViewGroup bằng cách sử dụng các thuộc tính layout_width layout_height.

Sau đây là ví dụ về thiết lập width height cho các phần tử ViewViewGroup 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 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.

Cùng chuyên mục:

FrameLayout trong Android

FrameLayout trong Android

Trong các UI Layout, FrameLayout là loại Layout đơn giản nhất, xem ngay tại đây

TableLayout trong Android

TableLayout trong Android

Trong bài này chúng ta sẽ tìm hiểu TalbeLayout trong Android

Relative Layout trong Android

Relative Layout trong Android

Trong bài này chúng ta sẽ tìm hiểu RelativeLayout trong Android

LinearLayout trong Android

LinearLayout trong Android

Ở bài trước chúng ta đã tìm hiểu sơ qua về các loại layout trong…

View và ViewGroup trong Android

View và ViewGroup trong Android

Các thành phần cơ bản để xây dựng giao diện người dùng (UI) trong Android…

Intent Filters trong Android

Intent Filters trong Android

Trong bài này chúng ta sẽ tìm hiểu về Intent Filter trong Android

Explicit Intents trong Android

Explicit Intents trong Android

Trong bài này chúng ta sẽ tìm hiểu một loại Intent mới trong Android đó…

Implicit Intents trong Android

Implicit Intents trong Android

Trong bài này chúng ta sẽ tìm hiểu Implicit Intent trong Android

Cấu trúc thư mục Project Android

Cấu trúc thư mục Project Android

Trong bài này chúng ta sẽ tìm hiểu cấu trúc thư mục của một project…

Giới thiệu Intent trong Android

Giới thiệu Intent trong Android

Trong Android, Intent là những tin nhắn không đồng bộ cho phép các component

Fragment trong Android

Fragment trong Android

Trong bài này chúng ta sẽ tìm hiểu một khái niệm mới trong lập trình…

Services trong Android

Services trong Android

Trong bài này chúng ta sẽ tìm hiểu Services trong Android.

Broadcast Receiver trong Android

Broadcast Receiver trong Android

Bài này sẽ tìm hiểu Broadcast Receiver trong Android.

Content Providers trong Android

Content Providers trong Android

Bài này chúng ta sẽ tìm hiểu về content provider trong Android, nó đóng vai…

Activity trong Android

Activity trong Android

Trong Android, Activity biểu thị một màn hình đơn với giao diện người dùng (UI)…

Component trong một ứng dụng Android

Component trong một ứng dụng Android

Tạo trình giả lập Android hoặc Tạo AVD (Thiết bị ảo Android)

Tạo trình giả lập Android hoặc Tạo AVD (Thiết bị ảo Android)

Thiết bị ảo Android (AVD) là một trình giả lập được sử dụng để sao…

Chương trình

Chương trình "Hello World" Android

Bằng cách sử dụng IDE Android Studio (Integrated Development Environment tạm dịch :Môi trường phát…

Cấu trúc hệ điều hành Android

Cấu trúc hệ điều hành Android

Trong bài này chúng ta sẽ tìm hiểu một chút về cấu trúc của hệ…

Cài đặt Android Studio từng bước có hình ảnh minh họa

Cài đặt Android Studio từng bước có hình ảnh minh họa

Trong bài này mình sẽ hướng dẫn các bạn cách download và cài đặt Android…

Top