Android - Thiết kế giao diện người dùng

Trong chương này, chúng ta sẽ xem xét các thành phần giao diện người dùng khác nhau của màn hình android. Chương này cũng bao gồm các mẹo để thiết kế giao diện người dùng tốt hơn và cũng giải thích cách thiết kế giao diện người dùng.

Thành phần màn hình giao diện người dùng

Giao diện người dùng điển hình của ứng dụng Android bao gồm thanh tác vụ và vùng nội dung ứng dụng.

Thanh hành động chính
Xem điều khiển
Khu vực nội dung
Thanh tác vụ tách

Các thành phần này cũng đã được hiển thị trong hình ảnh bên dưới -

Hiểu các thành phần màn hình

Đơn vị cơ bản của ứng dụng Android là hoạt động. Giao diện người dùng được định nghĩa trong tệp xml. Trong quá trình biên dịch, mỗi phần tử trong XML được biên dịch thành lớp GUI của Android tương đương với các thuộc tính được biểu diễn bằng các phương thức.

View và ViewGroups

Một hoạt động bao gồm các lượt xem. Chế độ xem chỉ là một widget xuất hiện trên màn hình. Nó có thể là nút, v.v. Một hoặc nhiều khung nhìn có thể được nhóm lại với nhau thành một GroupView. Ví dụ về ViewGroup bao gồm các bố cục.

Các loại bố cục

Có nhiều kiểu bố trí. Một số trong số đó được liệt kê dưới đây -

Bố cục tuyến tính
Bố cục tuyệt đối
Bố cục bảng
Bố cục khung hình
Giao diện tương đối

Bố cục tuyến tính

Bố cục tuyến tính được chia thành bố cục ngang và dọc. Nó có nghĩa là nó có thể sắp xếp các khung nhìn trong một cột hoặc trong một hàng. Đây là mã của bố cục tuyến tính (dọc) bao gồm chế độ xem văn bản.

<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   android:orientation=”vertical” >
   
   <TextView
      android:layout_width=”fill_parent”
      android:layout_height=”wrap_content”
      android:text=”@string/hello” />
</LinearLayout>

AbsoluteLayout

AbsoluteLayout cho phép bạn chỉ định vị trí chính xác của các phần tử con của nó. Nó có thể được khai báo như thế này.

<AbsoluteLayout
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
   
   <Button
      android:layout_width=”188dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”126px”
      android:layout_y=”361px” />
</AbsoluteLayout>

TableLayout

TableLayout nhóm các dạng xem thành hàng và cột. Nó có thể được khai báo như thế này.

<TableLayout
   xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_height=”fill_parent”
   android:layout_width=”fill_parent” >
   
   <TableRow>
      <TextView
         android:text=”User Name:”
         android:width =”120dp”
         />
      
      <EditText
         android:id=”@+id/txtUserName”
         android:width=”200dp” />
   </TableRow>
   
</TableLayout>

Giao diện tương đối

RelativeLayout cho phép bạn chỉ định cách các view con được định vị tương đối với nhau. Nó có thể được khai báo như thế này.

<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
</RelativeLayout>

FrameLayout

FrameLayout là một trình giữ chỗ trên màn hình mà bạn có thể sử dụng để hiển thị một chế độ xem duy nhất. Nó có thể được khai báo như thế này.

<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
   android:layout_width=”wrap_content”
   android:layout_height=”wrap_content”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” >
   
   <ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” />
</FrameLayout>

Ngoài các thuộc tính này, còn có các thuộc tính khác phổ biến trong tất cả các dạng xem và Nhóm xem. Chúng được liệt kê dưới đây -

Sr.No	Xem & mô tả
1	layout_width Chỉ định chiều rộng của View hoặc ViewGroup
2	layout_height Chỉ định chiều cao của View hoặc ViewGroup
3	layout_marginTop Chỉ định thêm không gian ở phía trên cùng của View hoặc ViewGroup
4	layout_marginBottom Chỉ định thêm không gian ở phía dưới cùng của View hoặc ViewGroup
5	layout_marginLeft Chỉ định không gian bổ sung ở phía bên trái của View hoặc ViewGroup
6	layout_marginRight Chỉ định thêm không gian ở phía bên phải của View hoặc ViewGroup
7	layout_gravity Chỉ định cách các Chế độ xem con được định vị
số 8	layout_weight Chỉ định lượng không gian thừa trong bố cục sẽ được phân bổ cho Chế độ xem

Đơn vị đo lường

Khi bạn chỉ định kích thước của một phần tử trên giao diện người dùng Android, bạn nên nhớ các đơn vị đo lường sau.

Sr.No	Đơn vị & mô tả
1	dp Pixel không phụ thuộc vào mật độ. 1 dp tương đương với một pixel trên màn hình 160 dpi.
2	sp Pixel không phụ thuộc vào tỷ lệ. Điều này tương tự như dp và được khuyến nghị để chỉ định kích thước phông chữ
3	pt Điểm. Một điểm được xác định là 1/72 inch, dựa trên kích thước màn hình vật lý.
4	px Pixel. Tương ứng với pixel thực tế trên màn hình

Mật độ màn hình

Sr.No	Mật độ & DPI
1	Low density (ldpi) 120 dpi
2	Medium density (mdpi) 160 dpi
3	High density (hdpi) 240 dpi
4	Extra High density (xhdpi) 320 dpi

Tối ưu hóa bố cục

Dưới đây là một số nguyên tắc để tạo bố cục hiệu quả.

Tránh lồng ghép không cần thiết
Tránh sử dụng quá nhiều Lượt xem
Tránh làm tổ sâu