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

Học lập trình Android. 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 đề cập đến 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à khu vực nội dung ứng dụng.

Thanh tác vụ chính

Xem kiểm soát

Khu vực nội dung

Split Action Bar

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

Học lập trình Android

Hiểu cấu 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 Android GUI tương đương với các thuộc tính được biểu diễn bằng các phương thức.

Xem và xem các nhóm

Hoạt động bao gồm lượt xem. Chế độ xem chỉ là tiện ích xuất hiện trên màn hình. Nó có thể là nút vv 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 bố cục.

Các loại bố cục

Có nhiều loại bố cục. 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

Giao diện tương đối

Bố cục tuyến tính

Học lập trình Android Bố cục tuyến tính tiếp tục đượ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 đơn lẻ hoặc trong một hàng duy nhất. Đây là mã 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 con của nó. Nó có thể được tuyên bố 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

Nhóm TableLayout xem các hàng và cột. Nó có thể được tuyên bố 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 khung nhìn duy nhất. Nó có thể được tuyên bố 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>

Học lập trình Android Ngoài việc hình thành 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 khung nhìn và ViewGroup. Chúng được liệt kê dưới đây

Sr.No	Xem và mô tả
1	layout_width Chỉ định chiều rộng của Chế độ xem hoặc ViewGroup
2	layout_height Chỉ định chiều cao của Chế độ xem hoặc ViewGroup
3	layout_marginTop Chỉ định thêm không gian ở phía trên cùng của Chế độ xem hoặc ViewGroup
4	layout_marginBottom Chỉ định thêm không gian ở phía dưới cùng của Chế độ xem hoặc ViewGroup
5	layout_marginLeft Chỉ định thêm không gian ở phía bên trái của Chế độ xem hoặc ViewGroup
6	layout_marginRight Chỉ định thêm không gian ở bên phải của Chế độ xem hoặc ViewGroup
7	layout_gravity Chỉ định cách Chế độ xem con được định vị
số 8	layout_weight Chỉ định số lượng khoảng trống 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 độc lập với mật độ. 1 dp tương đương với một pixel trên màn hình 160 dpi.
2	sp Pixel độc lập 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 trên màn hình

Mật độ màn hình

Sr.No	Mật độ & DPI
1	Mật độ thấp (ldpi) 120 dpi
2	Mật độ trung bình (mdpi) 160 dpi
3	Mật độ cao (hdpi) 240 dpi
4	Mật độ cực cao (xhdpi) 320 dpi

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

Học lập trình Android Dưới đây là một số nguyên tắc để tạo bố cục hiệu quả.

Tránh làm tổ không cần thiết

Tránh sử dụng quá nhiều lượt xem

Tránh làm tổ sâu