Android: Xây dựng một giao diện người dùng đơn giản

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Video hướng dẫn:

Trong bài học này, bạn sẽ sử dụng Trình chỉnh sửa bố cục (Layout Editor) của Studio Android để tạo bố cục gồm một hộp văn bản và một nút. Trong bài học tiếp theo, ta sẽ lập trình để phản ứng lại với nút nhấn bằng cách gửi nội dung của hộp văn bản sang activity khác.

My first app

Hình 1. Ảnh chụp màn hình của bố cục hoàn thiện

Giao diện người dùng cho ứng dụng Android được xây dựng bằng cách sử dụng thứ bậc của các layout (các đối tượng ViewGroup) và các widget (các đối tượng View). Layout là các hộp chứa ẩn dùng để kiểm soát cách các view con được đặt trên màn hình. Widgets là các thành phần UI (User Interface - Giao diện người dùng) chẳng hạn như các nút và hộp văn bản.

view và viewgroup
Hình 2. Minh họa cách thức các đối tượng ViewGroup hình thành các nhánh trong cách bố trí và chứa các đối tượng View

Android cung cấp một file XML cho các lớp ViewGroup và View, vì vậy hầu hết UI của bạn được định nghĩa trong tệp tin XML. Tuy nhiên, thay vì dạy bạn viết file XML, bài học này sẽ chỉ cho bạn cách tạo bố cục sử dụng Trình Biên tập Bố cục của Android Studio, giúp dễ dàng tạo bố cục bằng cách kéo và thả các view.

Mở Trình chỉnh sửa Bố cục


Để bắt đầu, hãy thiết lập không gian làm việc của bạn như sau:

1. Trong cửa sổ Project của Studio Android, mở app > res > layout > activity_main.xml.

2. Để có thêm chỗ cho Trình biên tập Bố cục, hãy ẩn cửa sổ Project bằng cách chọn View > Tool Windows > Project (hoặc nhấp vào Project  bên trái của Android Studio).

Nếu trình biên tập của bạn hiển thị nguồn XML, hãy nhấp vào tab Design ở cuối cửa sổ.

Nhấp Select Design Surface Design Surface và chọn Blueprint.

Nhấp vào Show  Show trong thanh công cụ Bố cục Biên tập và đảm bảo rằng Show Constraints chọn.

Hãy chắc chắn là bạn tắt Autoconnect. Chú giải công cụ trong thanh công cụ nên đọc Turn On Autoconnect autoconnect (vì bây giờ đã tắt).

Nhấp vào Default Margins layout-editor-margin trên thanh công cụ và chọn 16 (bạn vẫn có thể điều chỉnh lề cho mỗi lần xem sau).

Nhấp vào Device in Editor Device in Editor trên thanh công cụ và chọn Pixel XL.

Trình biên tập của bạn bây giờ sẽ trông như thể hiện trong hình 3.

layout editor
Hình 3. Bộ trình bày bố cục hiển thị trong file activity_main.xml

Để biết thêm thông tin, xem phần giới thiệu về Trình biên tập Bố cục của trang Android Studio.

Cửa sổ Component Tree ở phía dưới bên trái cho thấy hệ thống phân cấp của các view. Trong trường hợp này, view gốc là một ConstraintLayout (bố cục ràng buộc), chỉ chứa một đối tượng TextView.

ConstraintLayout là một bố cục xác định vị trí cho mỗi view dựa trên các ràng buộc để bố trí các view và bố cục bên ngoài các view. Bằng cách này, bạn có thể tạo ra cả bố cục đơn giản và phức tạp với một hệ thống phân cấp xem dạng phẳng. Tức là, nó tránh được việc phải bố trí lồng nhau (bố cục bên trong bố cục, như thể hiện trong hình 2), từ đó giảm được thời gian vẽ UI.

constraint example
Hình 4. Minh họa hai view nằm bên trong ConstraintLayout

Ví dụ, bạn có thể khai báo bố cục sau (trong hình 4):

  • Chế độ xem A xuất hiện 16dp từ trên cùng của bố cục gốc.
  • Chế độ xem A xuất hiện ở 16dp từ bên trái của bố cục gốc.
  • Chế độ xem B xuất hiện ở góc phải của chế độ xem 16dp.
  • Xem B được căn giữa phía trên cùng của chế độ xem A.

Trong các phần sau, bạn sẽ xây dựng một bố cục tương tự như vậy.

Thêm một hộp văn bản


constraint textbox
Hình 5. Hộp văn bản bị hạn chế ở trên cùng bên trái của bố cục cha

1. Trước tiên, bạn cần phải loại bỏ những gì đã có trong bố cục. Vì vậy, hãy nhấp vào TextView trong cửa sổ Component Tree, và sau đó bấm Delete.

2. Trong Palette, nhấp vào Text để hiển thị các điều khiển văn bản khả dụng.

3. Kéo Plain Text vào trình soạn thảo thiết kế và thả nó gần đầu bố cục. Đây là một widget EditText cho phép nhập văn bản thuần.

4. Nhấp vào chế độ xem trong trình chỉnh sửa thiết kế. Bây giờ bạn có thể nhìn thấy các thanh điều chỉnh thay đổi ở mỗi góc (hình vuông), và các ràng buộc ràng buộc ở mỗi bên (vòng tròn). Để kiểm soát tốt hơn, bạn có thể phóng to trên trình soạn thảo bằng cách sử dụng các nút trong thanh công cụ Bố cục Biên tập.

5. Nhấp và giữ các neo ở phía trên, và sau đó kéo nó lên cho đến khi nó chạm phần trên của layout và thả ra. Đó là một ràng buộc - nó chỉ rõ view là 16dp từ phía trên của bố cục (bởi vì bạn đặt lề mặc định là 16dp).

6. Tương tự, tạo một ràng buộc từ phía bên trái của khung nhìn tới phía bên trái của bố cục.

Kết quả sẽ giống như ảnh chụp màn hình trong hình 5.

Thêm một nút


constraint button
Hình 6. Nút được ràng buộc ở phía bên phải của hộp văn bản và đường cơ sở của nó

1. Trong Palette, nhấp vào Widgets.

2. Kéo Button vào trình thiết kế và thả nó gần phía bên phải.

3. Tạo một ràng buộc từ phía bên trái của nút sang bên phải hộp văn bản.

4. Để ràng buộc các view theo phương ngang, bạn cần phải tạo ra một ràng buộc giữa các đường cơ sở văn bản. Vì vậy, hãy nhấp vào nút, sau đó nhấp vào Edit Baseline layout-editor-action-baseline , xuất hiện trong trình soạn thảo thiết kế trực tiếp bên dưới chế độ xem được chọn. Các neo đường cơ sở xuất hiện bên trong nút. Nhấp và giữ trên neo này và sau đó kéo nó đến neo đường cơ sở xuất hiện trong hộp văn bản.

Kết quả trông giống như ảnh chụp màn hình trong hình 6.

Lưu ý: Bạn cũng có thể tạo một liên kết ngang bằng cách sử dụng các cạnh trên cùng hoặc dưới cùng, nhưng nút bao gồm khoảng đệm xung quanh hình ảnh của nó, do đó sự sắp xếp trực quan là sai nếu bạn căn chỉnh các chế độ xem theo cách đó.

Thay đổi chuỗi giao diện người dùng


Để xem trước giao diện người dùng, hãy nhấp vào Select Design Surface Design Surface trên thanh công cụ và chọn Design. Lưu ý rằng nhập văn bản được điền sẵn với "Tên" và nút được gắn nhãn "Nút". Vì vậy, bây giờ bạn sẽ thay đổi những dây.

1. Mở cửa sổ Project  và sau đó mở app > res > values > strings.xml.

Đây là tệp tài nguyên chuỗi, nơi bạn cần chỉ định tất cả chuỗi giao diện người dùng của mình. Làm như vậy cho phép bạn quản lý tất cả các chuỗi giao diện người dùng ở một nơi, nó giúp dễ tìm, cập nhật dễ dàng hơn (so với các chuỗi mã hóa cứng trong bố cục hoặc mã ứng dụng của bạn).

2. Nhấp vào Open editor ở đầu cửa sổ trình soạn thảo. Thao tác này sẽ mở Trình biên tập Dịch ngôn ngữ, cung cấp một giao diện đơn giản để thêm và chỉnh sửa chuỗi mặc định của bạn và giúp giữ tất cả các chuỗi được dịch của bạn được tổ chức.

​​​​​​add string
Hình 7. Hộp thoại để thêm một chuỗi mới

3. Nhấp vào Add Key add-sign-green-icon để tạo chuỗi mới làm "văn bản gợi ý" cho hộp văn bản.

  1. Mục Key nhập "edit_message".
  2. Mục Default Value nhập "Enter a message".
  3. Nhấp OK.

4. Thêm khóa khác có tên "button_send" với giá trị là "Gửi".

Bây giờ bạn có thể thiết lập các chuỗi cho mỗi lần xem. Vì vậy, quay trở lại tệp bố cục bằng cách nhấp vào activity_main.xml trong thanh tab và thêm các chuỗi như sau:

1. Nhấp vào hộp văn bản trong bố cục và, nếu cửa sổ Attributes chưa hiển thị bên phải, hãy nhấp vào Attributes window-properties trên thanh bên phải.

2. Xác định vị trí thuộc tính text (hiện được đặt là "Name") và xóa giá trị.

3. Xác định vị trí thuộc tính hint và sau đó nhấp vào Pick a Resource pick-resource ở bên phải hộp văn bản. Trong hộp thoại xuất hiện, nhấp đúp vào edit_message từ danh sách.

4. Bây giờ hãy nhấp vào nút trong bố cục, tìm thuộc tính text, nhấp vào Pick a Resource pick-resource , và sau đó chọn button_send.

Làm cho kích thước hộp văn bản linh hoạt


Để tạo bố cục đáp ứng các kích cỡ màn hình khác nhau, bây giờ bạn sẽ làm cho hộp văn bản căng ra để lấp đầy khoảng trống còn lại (sau khi tính toán nút và lề).

Trước khi bạn tiếp tục, hãy nhấp vào Show Design Surface trên thanh công cụ và chọn Blueprint.

1. Chọn cả hai view (nhấp vào một view, giữ phím Shift, và nhấn chọn nốt view kia), và sau đó nhấp chuột phải vào khung nhìn và chọn Chain > Create Horizontal Chain. Bố cục sẽ xuất hiện như thể hiện trong hình 8.

create_horizontal_chain_2x
Hình 8. Kết quả của việc chọn Create Horizontal Chain

Một kết nối là một ràng buộc hai chiều giữa hai hay nhiều view cho phép bạn đặt các view đã được nối với nhau một cách chuẩn xác.

2. Chọn nút và mở cửa sổ Attributes. Sử dụng thanh kiểm tra chế độ xem ở bên trên cửa sổ Attributes , đặt lề bên phải là 16.

3. Bây giờ hãy nhấp vào hộp văn bản để xem các thuộc tính của nó. Nhấp vào chỉ số độ rộng hai lần để thiết lập thành Match Constraints, như thể hiện bằng chú thích 1 trong hình 9.

properties-margin_2x
Hình 9. Nhấn để thay đổi chiều rộng thành Match Constraints

"Match Constraints - Các ràng buộc đối sánh" có nghĩa là chiều rộng mở rộng để đáp ứng các định nghĩa về các ràng buộc và lề ngang. Do đó, hộp văn bản trải dài để lấp đầy không gian theo chiều ngang (sau khi tính toán cho nút và tất cả các lề).

Bây giờ bố cục đã được thực hiện và sẽ xuất hiện như thể hiện trong hình 10.

constraint-chain_2x
Hình 10. Hộp văn bản bây giờ trải dài để lấp đầy không gian còn lại

Nếu dường như bố cục của bạn không xuất hiện như mong đợi, hãy nhấp vào bên dưới để xem XML của bạn trông như thế nào và so sánh nó với những gì bạn thấy trong tab Text. (Nếu thuộc tính của bạn xuất hiện theo thứ tự khác nhau là đạt).

Bố cục XML sau khi thiết kế:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">
  
  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/my_first_app"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintVertical_bias="0.141"
    android:textSize="36sp"
    android:textStyle="bold"
    android:textColor="#4CAF50"/>
  
  <EditText
    android:layout_width="242dp"
    android:layout_height="45dp"
    android:inputType="textPersonName"
    android:ems="10"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    android:layout_marginLeft="28dp"
    android:layout_marginTop="224dp"
    android:layout_marginStart="28dp"
    android:id="@+id/editTextMessage"
    android:hint="@string/enter_a_message"
    android:autofillHints=""/>
  
  <Button
    android:text="@string/send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginTop="224dp"
    android:id="@+id/buttonSend"
    android:layout_marginEnd="28dp"
    android:layout_marginRight="28dp"
    app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Chạy ứng dụng


Nếu ứng dụng của bạn đã được cài đặt trên thiết bị từ bài học trước, bạn chỉ cần nhấp vào Apply Changes  trong thanh công cụ để cập nhật ứng dụng thành bố cục mới. Hoặc nhấp vào Run Nút Run trong Android để cài đặt và chạy ứng dụng.

Nút vẫn không làm gì? Để bắt đầu một hoạt động khác khi nhấn nút, bạn hãy tiếp tục bài học kế tiếp.

» Tiếp: Kích hoạt một activity khác
« Trước: Tạo project Android đầu tiên
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!