Xây dựng giao diện người dùng bằng Layout Editor (Trình chỉnh sửa bố cục)

Layout Editor cho phép bạn nhanh chóng tạo bố cục bằng cách kéo các thành phần trên giao diện người dùng vào một trình chỉnh sửa thiết kế trực quan thay vì viết XML bố cục theo cách thủ công. Trình chỉnh sửa thiết kế giúp bạn xem trước bố cục của mình trên các thiết bị và phiên bản Android khác nhau. Bạn có thể linh động thay đổi kích thước để đảm bảo bố cục hoạt động tốt trên các màn hình với kích thước khác nhau.

Trình chỉnh sửa bố cục đặc biệt hiệu quả khi xây dựng bố cục với ConstraintLayout, một trình quản lý bố cục tương thích với Android 2.3 (API cấp 9) trở lên.

Trang này cung cấp thông tin tổng quan về Trình chỉnh sửa bố cục. Để tìm hiểu thêm về những nguyên tắc cơ bản về bố cục, hãy xem trang Bố cục.

Giới thiệu về Trình chỉnh sửa bố cục

Trình chỉnh sửa bố cục xuất hiện khi bạn mở một tệp bố cục XML.

Trình chỉnh sửa bố cục

Hình 1. Trình chỉnh sửa bố cục

  1. Bảng chế độ xem: Chứa nhiều thành phần hiển thị và nhóm thành phần hiển thị mà bạn có thể kéo vào bố cục của mình.
  2. Cây thành phần: Hiện rõ hệ thống phân cấp của các thành phần trong bố cục của bạn.
  3. Thanh công cụ: Nhấp vào các nút này để điều chỉnh hình dáng bố cục trong trình chỉnh sửa và thay đổi các thuộc tính bố cục.
  4. Trình chỉnh sửa thiết kế: Chỉnh sửa bố cục trong chế độ xem Thiết kế, chế độ xem Bản vẽ hoặc cả hai.
  5. Thuộc tính: Kiểm soát các thuộc tính của thành phần hiển thị đã chọn.
  6. Chế độ xem: Xem bố cục của bạn trong Chế độ Biểu tượng Chế độ Mã, Chế độ Thiết kế Biểu tượng Chế độ Thiết kế hoặc Chế độ Phân chia Biểu tượng Chế độ Phân chia. Chế độ Phân chia hiển thị cả cửa sổ Thiết kế cùng lúc.
  7. Điều khiển thu phóng và xoay: Kiểm soát kích thước và vị trí xem trước trong trình chỉnh sửa.

Khi mở tệp bố cục XML, Trình chỉnh sửa thiết kế sẽ mở theo mặc định, như minh hoạ trong hình 1. Để chỉnh sửa XML của bố cục trong trình chỉnh sửa văn bản, hãy nhấp vào nút Biểu tượng Chế độ Mã ở góc trên cùng bên phải của cửa sổ. Lưu ý rằng các cửa sổ Palette (Bảng chế độ xem), Component Tree (Cây thành phần)Attributes (Thuộc tính) không có sẵn trong khi chỉnh sửa bố cục của bạn trong chế độ xem .

Mẹo: Bạn có thể chuyển đổi giữa trình chỉnh sửa thiết kế và trình chỉnh sửa văn bản bằng cách nhấn vào Alt + Shift + Right/Left arrow (Control + Shift + Right/Left arrow trên máy Mac).

Thay đổi hình dáng xem trước

Các nút trong hàng trên cùng của trình chỉnh sửa thiết kế cho phép bạn định điều chỉnh hình dạng bố cục trong trình chỉnh sửa.

Hình 2. Các nút nhấn trong thanh công cụ Trình chỉnh sửa bố cục điều chỉnh hình dáng bố cục

Tương ứng với các con số trong Hình 2, các nút có sẵn như sau:

  1. Thiết kế và bản vẽ: Chọn hình thức hiển thị bố cục trong trình chỉnh sửa. Chọn Thiết kế để xem bố cục dưới dạng bản xem trước được kết xuất. Chọn Bản vẽ để chỉ xem các đường viền của mỗi thành phần hiển thị. Chọn Thiết kế + Bản vẽ để xem bằng cả hai chế độ xem cạnh nhau. Bạn cũng có thể nhấn B để chuyển đổi giữa các chế độ xem này.
  2. Hướng màn hình và biến thể bố cục: Chọn giữa hướng màn hình ngang và hướng màn hình dọc, hoặc chọn các chế độ màn hình khác mà ứng dụng cung cấp bố cục thay thế (chẳng hạn như chế độ ban đêm). Trình đơn này cũng chứa các lệnh để tạo một biến thể bố cục mới. Bạn cũng có thể nhấn O để thay đổi hướng màn hình.
  3. Loại thiết bị và kích thước thiết bị: Chọn loại thiết bị (điện thoại/máy tính bảng, Android TV, hoặc Wear OS) và cấu hình màn hình (kích thước và mật độ). Bạn có thể chọn từ một số loại thiết bị được định cấu hình sẵn và các định nghĩa AVD của riêng mình; hoặc bạn có thể tạo AVD mới bằng cách chọn Add Device Definition (Thêm định nghĩa thiết bị) từ danh sách. Bạn có thể đổi kích thước thiết bị bằng cách kéo góc dưới cùng bên phải của bố cục. Bạn cũng có thể nhấn D để chuyển đổi trong danh sách thiết bị. Việc kiểm thử bố cục trên các Thiết bị tham chiếu này sẽ giúp đảm bảo rằng ứng dụng của bạn sẽ thực hiện tốt việc chuyển đổi tỉ lệ theo các trạng thái bố cục trên thiết bị thực.

    Hình 3. Trình đơn bộ chọn thiết bị với Thiết bị tham chiếu.

  4. Phiên bản API: Chọn phiên bản Android mà bạn muốn xem trước bố cục.

  5. Chủ đề của ứng dụng: Chọn chủ đề giao diện người dùng áp dụng cho bản xem trước. Xin lưu ý rằng tính năng này chỉ hoạt động với các kiểu bố cục được hỗ trợ. Cho nên nếu có nhiều chủ đề trong danh sách này thì sẽ dẫn đến lỗi.

  6. Ngôn ngữ: Chọn ngôn ngữ trình bày trên các chuỗi giao diện người dùng. Danh sách này chỉ hiển thị các ngôn ngữ có sẵn trong tài nguyên chuỗi của bạn. Nếu muốn biên tập lại bản dịch của bạn, hãy nhấp vào Edit Translation (Biên tập bản dịch) từ trình đơn thả xuống. Để biết thêm thông tin về các hoạt động liên quan đến bản dịch, hãy xem phần Bản địa hoá giao diện người dùng bằng Trình biên tập bản dịch.

Tạo bố cục mới

Khi thêm bố cục mới cho ứng dụng, trước tiên, hãy tạo tệp bố cục mặc định trong thư mục layout/ mặc định của dự án để tệp đó được áp dụng cho tất cả cấu hình thiết bị. Sau khi có bố cục mặc định, bạn có thể tạo các biến thể bố cục cho các cấu hình thiết bị cụ thể, chẳng hạn như đối với màn hình lớn.

Bạn có thể tạo bố cục mới theo một trong những cách sau:

Sử dụng trình đơn chính của Android Studio

  1. Trong cửa sổ Project (Dự án), hãy nhấp vào mô-đun mà bạn muốn thêm bố cục.
  2. Trong trình đơn chính, hãy chọn File > New > XML > Layout XML File (Tệp > Mới > XML > Tệp XML bố cục).
  3. Trong hộp thoại xuất hiện sau đó, hãy cung cấp tên tệp, thẻ bố cục gốc và nhóm tài nguyên mà bố cục sẽ thuộc về.
  4. Nhấp vào Finish (Hoàn tất) để tạo bố cục.

Sử dụng chế độ xem Dự án

  1. Chọn chế độ xem Project (Dự án) từ trong cửa sổ Project (Dự án).
  2. Nhấp chuột phải vào thư mục bố cục mà bạn muốn thêm bố cục.
  3. Trong trình đơn ngữ cảnh xuất hiện, hãy nhấp vào New > Layout Resource File (Mới > Tệp tài nguyên bố cục).

Sử dụng chế độ xem Android

  1. Chọn chế độ xem Android từ cửa sổ Project (Dự án).
  2. Nhấp chuột phải vào thư mục layout.
  3. Trong trình đơn theo bối cảnh xuất hiện, hãy chọn New > Layout Resource File (Mới > Tệp tài nguyên bố cục).

Sử dụng Resource Manager (Trình quản lý tài nguyên)

  1. Trong Resource Manager (Trình quản lý tài nguyên), hãy chọn thẻ Layout (Bố cục).
  2. Nhấp vào nút +, sau đó nhấp vào Layout Resource File (Tệp tài nguyên bố cục).

Sử dụng các biến thể bố cục để tối ưu hoá cho các màn hình khác nhau

Biến thể bố cục là phiên bản thay thế của một bố cục hiện có được tối ưu hoá cho một kích thước màn hình hoặc hướng màn hình nhất định.

Sử dụng biến thể bố cục được đề xuất

Trong Android Studio có các biến thể bố cục phổ biến mà bạn có thể sử dụng trong dự án. Để sử dụng một biến thể bố cục được đề xuất, hãy làm như sau:

  1. Mở tệp bố cục gốc, nhấp vào biểu tượng Design (Thiết kế) Biểu tượng Chế độ Thiết kế ở góc trên cùng bên phải của cửa sổ.
  2. Nhấp vào Orientation for Preview (Hướng xem trước) (Nút nhấn Hướng xem trước) trên thanh công cụ.
  3. Trong danh sách thả xuống, hãy chọn một biến thể được đề xuất, chẳng hạn như Create Landscape Variant (Tạo biến thể ngang).

Tạo biến thể bố cục của riêng bạn

Nếu muốn tạo biến thể bố cục của riêng mình, hãy làm như sau:

  1. Mở tệp bố cục gốc và nhấp vào biểu tượng Design (Thiết kế) (Biểu tượng Chế độ Thiết kế) ở góc trên cùng bên phải của cửa sổ.
  2. Nhấp vào Orientation for Preview (Hướng xem trước) Nút nhấn Hướng xem trước trên thanh công cụ.
  3. Trong danh sách thả xuống, hãy chọn Tạo khác… (Create Other…).
  4. Trong hộp thoại sẽ xuất hiện, hãy xác định những bộ hạn định tài nguyên cho biến thể đó. Chọn một bộ hạn định từ danh sách Bộ hạn định sẵn có (Available qualifiers), sau đó nhấp vào nút Thêm (Add) Nút Thêm bộ hạn định. Lặp lại bước này để thêm những từ khoá khác nếu cần.
  5. Sau khi đã thêm tất cả các bộ hạn định, hãy nhấp vào OK.

Khi có nhiều biến thể của cùng một bố cục, bạn có thể chuyển đổi giữa các biến thể đó bằng cách nhấp vào Biến thể bố cục (Layout Variants) Nút biến thể bố cục và chọn từ danh sách sẽ xuất hiện.

Để biết thêm thông tin về cách tạo bố cục cho các màn hình khác nhau, hãy xem phần Hỗ trợ các kích thước màn hình khác nhau.

Chuyển đổi thành phần hiển thị hoặc bố cục

Bạn có thể chuyển đổi một thành phần hiển thị sang loại thành phần hiển thị khác và có thể chuyển đổi một bố cục sang một loại bố cục khác.

  1. Nhấp vào nút Thiết kế (Design) ở góc trên cùng bên phải của cửa sổ trình chỉnh sửa.
  2. Trong Cây thành phần (Component Tree), hãy nhấp chuột phải vào thành phần hiển thị hoặc bố cục, rồi nhấp vào Chuyển đổi hiển thị…(Convert view…).
  3. Trong hộp thoại sẽ xuất hiện, hãy chọn loại thành phần hiển thị hoặc bố cục mới, sau đó nhấp vào Áp dụng (Apply).

Chuyển đổi bố cục thành ConstraintLayout

Để cải thiện hiệu năng bố cục, bạn nên chuyển đổi các bố cục cũ thành ConstraintLayout. ConstraintLayout sử dụng hệ thống bố cục dựa trên ràng buộc cho phép bạn tạo hầu hết các bố cục mà không cần bất kỳ nhóm thành phần hiển thị lồng nhau nào.

Để chuyển đổi một bố cục hiện có thành một ConstraintLayout, hãy làm như sau:

  1. Mở một bố cục hiện có trong Android Studio và nhấp vào nút Thiết kế (Design) ở góc trên cùng bên phải của cửa sổ trình chỉnh sửa.
  2. Trong Cây thành phần (Component Tree), hãy nhấp chuột phải vào bố cục đó, sau đó nhấp vào Chuyển đổi your-layout-type thành ConstraintLayout (Convert your-layout-type to ConstraintLayout).

Để tìm hiểu thêm về ConstraintLayout, hãy xem phần Tạo Giao diện người dùng thích ứng với ConstraintLayout.

Tìm các mục trong Bảng chế độ xem

Để tìm kiếm một thành phần hiển thị hoặc nhóm thành phần hiển thị theo tên trong Palette (Bảng chế độ xem), hãy nhấp vào nút Search (Tìm kiếm) Nút tìm kiếm của Bảng chế độ xem ở đầu bảng. Ngoài ra, bạn có thể nhập tên của mục bất cứ khi nào cửa sổ Palette (Bảng chế độ xem) chọn tâm điểm.

Bạn có thể tìm thấy các mục thường dùng trong danh mục Common (Phổ biến)Palette (Bảng chế độ xem). Để thêm một mục vào danh mục này, hãy nhấp chuột phải vào một khung hiển thị hoặc nhóm khung hiển thị trong Palette (Bảng khung hiển thị), sau đó nhấp vào Favorite (Mục yêu thích) trong trình đơn theo bối cảnh.

Mở tài liệu trong Bảng khung hiển thị

Để mở tài liệu tham khảo dành cho nhà phát triển Android của một thành phần hiển thị hoặc nhóm thành phần hiển thị, hãy chọn thành phần giao diện người dùng trong Palette (Bảng chế độ xem) và nhấn vào Shift + F1.

Để xem tài liệu về Nguyên tắc của Material cho một khung hiển thị hoặc nhóm khung hiển thị, hãy nhấp chuột phải vào thành phần trên giao diện người dùng trong Palette (Bảng khung hiển thị) rồi chọn Material Guidelines (Nguyên tắc của Material) trong trình đơn theo bối cảnh. Nếu không có mục cụ thể nào đang sẵn có, thì trang chủ Tài liệu về Nguyên tắc quan trọng sẽ được mở.

Thêm thành phần hiển thị vào bố cục

Để bắt đầu tạo bố cục, bạn chỉ cần kéo các khung hiển thị hoặc nhóm khung hiển thị từ Palette (Bảng khung hiển thị) vào trình chỉnh sửa thiết kế. Khi bạn đặt một khung hiển thị vào bố cục, trình chỉnh sửa thiết kế sẽ hiển thị thông tin về mối quan hệ của khung hiển thị đó với phần còn lại của bố cục.

Nếu đang sử dụng ConstraintLayout, bạn có thể tự động tạo các quy tắc ràng buộc bằng cách sử dụng các tính năng Giới hạn dự đoán và Tự động kết nối (Infer Constraints and Autoconnect).

Chỉnh sửa thuộc tính của thành phần hiển thị

Hình 4. Cửa sổ Thuộc tính (Attributes)

Bạn có thể chỉnh sửa các thuộc tính của thành phần hiển thị từ cửa sổ Thuộc tính (Attributes) ở bên phải của Trình chỉnh sửa bố cục. Cửa sổ này chỉ sử dụng được khi trình chỉnh sửa thiết kế đang mở, vì vậy hãy đảm bảo bạn đang sử dụng chế độ Thiết kế hoặc Phân tách để xem bố cục của mình.

Khi bạn chọn một khung hiển thị, cho dù bằng cách nhấp vào khung hiển thị đó trong Component Tree (Cây thành phần) hay trong trình chỉnh sửa thiết kế, cửa sổ Attributes (Thuộc tính) sẽ hiển thị các thông tin sau, như được nêu trong hình 4:

  1. Phần Thuộc tính đã khai báo (Declared Attributes) liệt kê các thuộc tính được chỉ định trong tệp bố cục. Để thêm thuộc tính, hãy nhấp vào nút Thêm (Add) Nút thêm thuộc tính ở góc trên cùng bên phải của phần đó.
  2. Phần Bố cục chứa các tuỳ chọn điều khiển dành cho chiều rộng và chiều cao của thành phần hiển thị được chọn. Nếu thành phần hiển thị đó nằm trong ConstraintLayout, phần này cũng hiển thị các quy tắc hạn chế và liệt kê các quy tắc ràng buộc mà thành phần hiển thị sử dụng. Để biết thêm thông tin về hoạt động của ConstraintLayout, hãy xem bài viết Tạo Giao diện người dùng thích ứng với ConstraintLayout.
  3. Phần Thuộc tính phổ biến (Common Attributes) liệt kê các thuộc tính phổ biến của thành phần hiển thị đã chọn. Để xem tất cả thuộc tính có sẵn, hãy mở rộng phần Tất cả thuộc tính (All Attributes) ở cuối cửa sổ.
  4. Nhấp vào nút Tìm kiếm (Search) để tìm kiếm một thuộc tính cụ thể của thành phần hiển thị.
  5. Các biểu tượng ở bên phải mỗi giá trị thuộc tính cho biết giá trị thuộc tính đó có phải là tham chiếu tài nguyên hay không. Các chỉ báo này là ổn định Biểu tượng chỉ báo ổn định khi giá trị là một tham chiếu tài nguyên và trống Biểu tượng chỉ báo trống khi giá trị được mã hoá cứng. Các chỉ báo này giúp bạn nhanh chóng nhận ra các giá trị được mã hoá cứng. Nhấp vào các chỉ báo (ở trạng thái ổn định hoặc trống) sẽ mở ra cửa sổ Tài nguyên (Resources), nơi bạn có thể chọn tham chiếu tài nguyên cho thuộc tính tương ứng.
  6. Phần được đánh dấu nổi bật màu đỏ xung quanh một giá trị thuộc tính cho biết có lỗi với giá trị đó. Lỗi có thể là mục nhập không hợp lệ đối với thuộc tính xác định bố cục, như được minh hoạ trong phần được đánh dấu nổi bật màu đỏ trong hình 3.

    Phần được đánh dấu nổi bật màu cam cho biết cảnh báo về giá trị đó. Chẳng hạn, một cảnh báo có thể xuất hiện khi bạn sử dụng giá trị được mã hoá cứng ở vị trí tham chiếu tài nguyên dự kiến.

Thêm dữ liệu mẫu vào thành phần hiển thị của bạn

Vì nhiều bố cục Android dựa vào dữ liệu thời gian chạy, nên có thể khó hình dung giao diện của bố cục khi thiết kế ứng dụng. Trong Android Studio 3.2 trở lên, bạn có thể thêm dữ liệu xem trước mẫu vào TextView, ImageView hoặc RecyclerView trong Trình chỉnh sửa bố cục.

Bạn có thể nhấp chuột phải vào một trong các kiểu thành phần hiển thị này và chọn Thiết lập dữ liệu mẫu (Set Sample Data) để hiển thị cửa sổ Thuộc tính thành phần hiển thị trong thời gian thiết kế, như minh hoạ trong hình 5.

Cửa sổ Thuộc tính thành phần hiển thị trong thời gian thiết kế

Hình 5. Cửa sổ Design-time View Attributes (Thuộc tính khung hiển thị thời gian thiết kế)

Trong TextView, bạn có thể chọn trong các danh mục văn bản mẫu. Khi sử dụng văn bản mẫu, Android Studio sẽ điền dữ liệu mẫu đã chọn vào thuộc tính text của TextView. Xin lưu ý rằng bạn chỉ có thể chọn văn bản mẫu thông qua cửa sổ Design-time View Attributes (Thuộc tính khung hiển thị thời gian thiết kế) khi thuộc tính text trống.

Thành phần hiển thị văn bản với dữ liệu mẫu

Hình 6. TextView với dữ liệu mẫu

Trong một ImageView, bạn có thể chọn giữa các hình ảnh mẫu khác nhau. Khi bạn chọn một hình ảnh mẫu, Android Studio sẽ điền thuộc tính tools:src của ImageView (hoặc tools:srcCompat nếu sử dụng Thư viện hỗ trợ).

Thành phần hiển thị hình ảnh với dữ liệu mẫu

Hình 7. ImageView với dữ liệu mẫu

Trong một RecyclerView, bạn có thể chọn trong một bộ gồm các biểu mẫu chứa hình ảnh và văn bản mẫu. Khi sử dụng các biểu mẫu này, Android Studio sẽ thêm một tệp vào thư mục res/layout. Tệp này là recycler_view_item.xml, chứa bố cục dành cho dữ liệu mẫu. Android Studio cũng thêm siêu dữ liệu vào RecyclerView để hiển thị chính xác dữ liệu mẫu.

Thành phần hiển thị tái sinh với dữ liệu mẫu

Hình 8. RecyclerView với dữ liệu mẫu

Hiển thị lỗi và cảnh báo về bố cục

Trình chỉnh sửa bố cục sẽ thông báo cho bạn mọi vấn đề về bố cục bên cạnh thành phần hiển thị tương ứng trong Cây thành phần bằng cách sử dụng biểu tượng dấu chấm than trong vòng tròn màu đỏ Biểu tượng dấu chấm than trong vòng tròn màu đỏ báo lỗi bố cục để báo lỗi hoặc biểu tượng dấu chấm than trong tam giác màu cam Biểu tượng dấu chấm than trong hình tam giác màu cam thể hiện cảnh báo về bố cục để cảnh báo. Nhấp vào biểu tượng để xem thêm chi tiết.

Để xem tất cả các vấn đề đã biết trong cửa sổ bên dưới trình chỉnh sửa, hãy nhấp vào Hiển thị cảnh báo và lỗi (Show Warnings and Errors) (Biểu tượng dấu chấm than trong vòng tròn màu đỏ báo lỗi bố cục hoặc Biểu tượng dấu chấm than trong hình tam giác màu cam thể hiện cảnh báo về bố cục) trên thanh công cụ.

Tải xuống và áp dụng phông chữ cho văn bản

Khi sử dụng Android 8.0 (API cấp 26) hoặc Thư viện hỗ trợ Android 26.0.0 trở lên, bạn có thể lựa chọn trong số hàng trăm phông chữ bằng cách làm theo những bước sau:

  1. Trong Trình chỉnh sửa bố cục, hãy nhấp vào nút Thiết kế (Design) Biểu tượng Chế độ Thiết kế để xem bố cục của bạn trong trình chỉnh sửa thiết kế.
  2. Nhấp vào thành phần hiển thị văn bản.
  3. Trong cửa sổ Thuộc tính (Attributes), hãy mở rộng textAppearance, sau đó mở rộng hộp fontFamily.
  4. Di chuyển xuống cuối danh sách và nhấp vào Phông chữ khác (More Fonts) để mở hộp thoại Tài nguyên (Resources).
  5. Trong hộp thoại Tài nguyên, hãy chọn phông chữ bằng cách duyệt qua danh sách hoặc bằng cách nhập vào thanh tìm kiếm ở trên cùng. Nếu chọn một phông chữ trong mục Downloadable (Có thể tải xuống), bạn có thể nhấp vào Create downloadable font (Tạo phông chữ có thể tải xuống) để tải phông chữ ở thời gian chạy dưới dạng phông chữ có thể tải xuống hoặc nhấp vào Add font to project (Thêm phông chữ vào dự án) để đóng gói tệp phông chữ TTF trong APK của bạn. Xin lưu ý rằng các phông chữ trong Android là do hệ thống Android cung cấp. Do đó, bạn không cần tải xuống hoặc đóng gói các phông chữ này trong APK.
  6. Nhấp OK để hoàn tất.