CĂN BẢN
INTENTS
GIAO DIỆN
CÁC KHÁI NIỆM
VÍ DỤ
TÀI LIỆU
HỌC LẬP TRÌNH ANDROID
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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.

test php

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.

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

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

Tìm hiểu về vòng đời của Activity trong Android

Tìm hiểu về vòng đời của Activity trong Android

AlarmManager trong Android

AlarmManager trong Android

Menu trong Android

Menu trong Android

Fragments trong Android

Fragments trong Android

SearchView trong Android

SearchView trong Android

TabLayout trong Android

TabLayout trong Android

ViewStub trong Android

ViewStub trong Android

Image Slider trong Android

Image Slider trong Android

Trình chuyển đổi hình ảnh (Image Switcher) trong Android

Trình chuyển đổi hình ảnh (Image Switcher) trong Android

ScrollView trong Android

ScrollView trong Android

ProgressBar trong Android

ProgressBar trong Android

Đồng hồ Analog và đồng hồ kỹ thuật số trong Android

Đồng hồ Analog và đồng hồ kỹ thuật số trong Android

Cách dùng TimePicker trong Android

Cách dùng TimePicker trong Android

Cách dùng DatePicker trong Android

Cách dùng DatePicker trong Android

Cách dùng SeekBar trong Android

Cách dùng SeekBar trong Android

Cách dùng WebView trong Android

Cách dùng WebView trong Android

Cách dùng RatingBar trong Android

Cách dùng RatingBar trong Android

Cách dùng ListView trong Android

Cách dùng ListView trong Android

AutoCompleteTextView trong Android

AutoCompleteTextView trong Android

Spinner trong Android

Spinner trong Android

Top