Thực hành 01: Thiết kế giao diện đơn giản

Trong bài học này, bạn sẽ sử dụng trình soạn thảo Android Studio để tạo bố cục (layout) bao gồm một TextBox và một Button. Trong bài học kế tiếp, bạn sẽ làm một ứng dụng để phản hồi việc ấn Button và gửi nội dung nhập trong TextBox tới một Activity khác.

Hình 1. Màn hình giao diện ứng dụng

Giao diện người dụng (UI) cho ứng dụng Android được xây dựng sử dụng cây phân cấp layout (các đối tượng ViewGroup ) và các widget (các đối tượng View). Các layout là các container kiểm soát việc đặt các view con tại các vị trí trên màn hình. Các Widget là các thành phần giao diện ví dụ như các Button và các Textbox.

Hình 2. Minh hoạ các đối tượng ViewGroup tạo thành các nhánh trong layout và chứa các đối tượng View

Android cung cấp từ khoá XML cho các lớp ViewGroup và View, vì vậy hầu hết giao diện người dùng được định nghĩa trọng các file XML. Tuy nhiên thay vì dạy các bạn viết XML, bài học này hướng dẫn bạn cách tạo một layout sử dụng trình soạn thảo Layout của Android Studio (giao diện đồ hoạ) để tạo giao diện người dùng một cách đơn giản bằng việc kéo thả các view.

Bài học yêu cầu bạn sử dụng phiên bản tối thiểu Android Studio 3.0 hoặc cao hơn và bạn đã theo bài học trước.

Mở trình soạn thảo Layout Editor

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

1. Trong Project của Android Studio, mở app > res > layout > activity_main.xml.
2. Để có nhiều không gian cho Layout Editor, ẩn cửa sổ Project bằng  chọn View > Tool Windows > Project (hoặc click Project   ở bên trái của Android Studio).
3. Nếu trình soạn thảo của bạn hiển thị mã nguồn XML, kích vào tab Design ở phía dưới của cửa sổ.
4. Kích Select Design Surface  và chọn Blueprint.
5. Kích Show  trong thanh toolbar Layout Editor và chắc chắn Show Constraints đã được tích.
6. Đảm bảo Autoconnect đang tắt. Chú thích trên thanh toolbar khi di chuột qua nên là Turn On Autoconnect  (bở vì hiện tại nó đăng tắt).
7. Kích Default Margins 8 trên thanh toolbar và chọn 16 (bạn vẫn có thể hiệu chỉnh lề cho mỗi view sau này).
8. Kích Device for Preview  trên thanh toolbar và chọn 5.5, 1440 × 2560, 560dpi (Pixel XL).

Trình soạn thảo của bạn giờ sẽ giống như hình 3.

Hình 3. Layout Editor hiển thị activity_main.xml

Thêm thông tin về Layout Editor xem tại đây.

Cửa sổ Component Tree bên cạnh dưới bên trái hiển thị phân cấp layout của các View. Trong ví dụ này, gốc của View là một ConstraintLayout, chứa duy nhất một đối tượng TextView.

ConstraintLayout là một layout định nghĩa vị trí của mỗi view dựa trên ràng buộc với các view anh em và layout cha. Với cách này, bạn có thể tạo các cả hai loại layout đơn giản và phức tạp với phân cấp view phẳng. Đó là nó tránh sự chồng chéo của các layout lồng lên nhau (một layout trong một layout như hình 2) mà có thể mấy nhiều thời gian yêu cầu vẽ lên giao diện người dùng.

Với ví dụ này, bạn có thể khai báo theo layout này (hình 4):

• View A hiển thị cách đỉnh (top) của layout cha là 16dp.
• View A hiểnthị cách lề trái (left) của layout cha là 16dp.
• View B hiển thị cách lề phải của View A là 16dp.
• View B được căn lề theo đỉnh của View A.

Trong phần này, bạn sẽ xây dựng một layout tương tự như thế này.

Thêm một TextBox

1. Trước tiên, bạn cần bỏ những cái đã tồn tại trong layout. Vì vậy kích TextView trong cửa sổ Component Tree và ấn nút Delete.
2. Trong Palette, kích Text để hiển thị các control Text có sẵn.
3. Kéo Plain Text vào cửa sổ thiết kế và thả nó gần đầu của layout. Đây là một widget EditText cho phép nhập text đơn giản.
4. Kích vào view hoặc control của sổ trong chế độ thiết kế. Bạn sẽ nhìn thấy các hình vuông ở bốn góc của control cho thay đổi kích thước và các vòng tròn bắt trên mỗi cạnh cho điều khiển ràng buộc. Để điều khiển tốt nhất, bạn có thể phóng to (zoom) trên thanh toolbar của Layout Editor.
5. Kích và giữ vòng tròn trên ở cạnh phía trên, và rồi kéo nó tới phía trên của layout và thả chuột. Đây là một ràng buộc, chỉ định view sẽ giữ khoảng cách với đỉnh của layout là 16dp (vì bạn thiết lập mặc định margin là 16dp).
6. Tương tự, tạo ràng buộc từ cạnh trái của view tới cạnh trái của layout..

Kết quả sẽ giống như hình 5.

Thêm một Button

1. Trong Palette, kích Buttons.
2. Ké Button vào cửa sổ thiết kế và thả ở gần cạnh bên phải của layout.
3. Tạo một ràng buộc của cạnh trái của Button tới cạnh bên phải của TextBox.
4. Để ràng buộc các view theo chiều ngang, bạn cần tạo một ràng buộc giữa  đường chuẩn cơ sở của text. Vì vậy kích chuột phải vào Button và rồi chọn Edit Baseline ,mà sẽ xuất hiện trực tiếp phía dưới của control được chọn. Đường chuẩn sẽ xuất hiện ở bên trong của Button. Kích và kéo đường chuẩn này tới đường chuẩn xuất hiện trong TextBox.

Kết quả sẽ giống màn hình số 6.

Chú ý: Bạn cũng có thể tạo căn chỉnh theo chiều ngang sử dụng cạnh phía trên hoặc cạnh phía dưới, nhưng với Button bao gồm cả phần đệm (padding) xung quanh hình ảnh của nó, vì vậy hiển thị trực quan căn lề bị sai nếu bạn làm theo cách đó.

Thay đổi các chuỗi trên giao diện người dùng (UI)

Để xem trước UI, kích Select Design Surface  trên thanh toolbar và chọn Design. Chú ý rằng Chú ý, Khi kéo một TextBox vào UI, text tự điền sẵn là “Name” và Button có nhãn là “Button”. Vì vậy bây giờ bạn sẽ thay đổi những chuỗi này.

1. Mở cửa sổ Project và rồi mở app > res > values > strings.xml. Đây là file quản lý string resources cho phép bạn quản lý tất cả các chuỗi cho UI của bạn. Với việc quản lý các chuỗi ở một nơi duy nhất sẽ giúp dễ dàng tìm kiếm, cập nhật và bản địa hoá (so với việc hard-coding các chuỗi trong layout hoặc trong code).
2. Kích Open editor tại đầu của cửa sổ soạn thảo. Điều này ở cửa sổ Translations Editor, cung cấp giao diện đơn giản cho thêm và sửa đổi các chuỗi mặc định của bạn, và giúp giữ tất cả các chuỗi được dịch sang một ngôn ngữ khác.
3. Kích Add Key  để tạo một chuỗi mới như “chuỗi gợi ý” cho TextBox.

   

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

   1. Trong hộp thoại Add Key, nhập “edit_message” cho tên của key.
   2. Nhập “Enter a message” cho value.
   3. Kích OK.
4. Thêm một key khác với tên “button_send” cùng value là “Send”.

Bây giờ bạn có thể thiết lập các chuỗi cho mỗi view. Rồi quay lại file layout bằng cách kích trên tab  activity_main.xml, và thêm các chuỗi sau:

1. Kích TextBox trên layout và nếu cửa sổ Attributes vẫn chưa hiển thị ở bên phải thì kích Attributes  ở thanh bên phải.
2. Tìm thuộc tính text (hiện tại đang có giá trị “Name”) và xoá giá trị này.
3. Tìm thuộc tính hint và rồi kích Pick a Resource  ở bên phải của ô nhập dữ liệu. Một hộp thoại xuất hiện, kích đúp trên edit_message từ danh sách này.
4. Bây giờ kích Button trên layout, tìm thuộc tính text (hiện tại đang là “Button”), kích Pick a Resource , và chọn button_send.

Làm kích thước TextBox linh hoạt

Để tạo một layout responsive với các kích thước màn hình khác nhau, bây giờ bạn sẽ làm TextBox co giãn để lấp đầy khoảng không gian trống theo chiều ngang (sau khi đã tính toán cho kích thước Button và các lề).

Trước khi bạn tiếp tục, kích nút Show  trên thanh toolbar và chọn Blueprint.

1. Chọn cả 2 view (kích trên một cái, giữ phím Shift và rồi kích trên cái khác) và rồi kích chuột phải, chọn Chain > Create Horizontal Chain. Layout sẽ xuất hiện như Hình 8. Một chain là một ràng buộc hai hướng giữa hai hoặc nhiều view mà cho phép bạn đặt ràng buộc giữa các view.
2. Chọn Button và mở cửa sổ Attributes. Sử dụng màn hình Layout ở đầu cửa sổ Attributes thiết lập lề phải là 16.
3. Bây giờ kích trên TextBox để xem tất cả các thuộc tính của nó. Ở phần màn hình Layout, kích hai lần trên thanh chỉ báo (xem hình 9, phần khoanh tròn 1) để thiết lập ràng buộc là Match Constraints, “Match constraints” có nghĩa là độ rộng của nó sẽ mở rộng theo điều kiện ràng buộc về chiều ngang và các lề. Do đó TextBox được co giãn để chiếm đầy không gian trống theo chiều ngang ( sau khi đã trừ đi độ rộng của Button và các lề).

Bây giờ layout đã làm xong và xuất hiện như Hình 10.

Nếu layout của bạn vẫn không được như mong đợi, kích ở tab Text để kiểm tra file XML của bạn. (Nếu các thuộc tính xuất hiện theo các thứ tự khác nhau, điều đó không phải vấn đề)

Để xem thêm thông tin về tạo ràng buộc cac chain và các thứ khác, bạn có thể làm với  ConstraintLayout, đọc Build a Responsive UI with 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ừ lần chạy trước, bạn chỉ đơn giản kích nút Apply Changes  trên thanh toolbar để cập nhật ứng dụng với layout mới. Hoặc kích Run  để cài và chạy ứng dụng .

Nhưng Button Send vẫn chưa chạy được, để hoàn thiện chương trình này chúng ta sẽ tìm hiểu ở bài học kế tiếp.