Thiết kế giao diện ứng dụng bằng Trình chỉnh sửa giao diện

Cảnh báo: Kể từ phiên bản 3.3, Trình chỉnh sửa giao diện không còn được đưa vào Android Studio nữa.

Android Studio có một trợ lý hình ảnh gọi là Trình chỉnh sửa giao diện, nó giúp bạn:

  • Tạo và sửa đổi giao diện cho ứng dụng của bạn.
  • Điều chỉnh giao diện cho các thuật toán phân loại tài nguyên khác nhau.
  • Trình bày trực quan tác động của việc thay đổi màu sắc lên các thành phần trên giao diện người dùng phổ biến.

Trang này giới thiệu các thao tác cơ bản mà bạn có thể thực hiện với Trình chỉnh sửa giao diện và giải thích cách thực hiện.

Thông tin cơ bản về Trình chỉnh sửa giao diện

Phần này mô tả cách truy cập vào Trình chỉnh sửa giao diện và cách bố cục của trình chỉnh sửa đó.

Truy cập vào Trình chỉnh sửa giao diện

Có hai cách để mở Trình chỉnh sửa giao diện:

  • Từ một tệp XML kiểu mở, chẳng hạn như styles.xml, hãy nhấp vào Mở trình chỉnh sửa ở gần phía trên cùng bên phải của cửa sổ tệp.
  • Từ trình đơn Công cụ, hãy chọn Trình chỉnh sửa giao diện.

Khám phá Trình chỉnh sửa giao diện

Màn hình chính của Trình chỉnh sửa giao diện được chia thành hai phần. Ở bên trái trình chỉnh sửa, bạn sẽ thấy các thành phần trên giao diện người dùng cụ thể (chẳng hạn như thanh ứng dụng hoặc nút lồi) trông như thế nào khi bạn áp dụng giao diện hiện tại cho các thành phần đó. Ở bên phải của trình chỉnh sửa sẽ hiển thị tên của giao diện hiện tại đang được xem trước, mô-đun mà tại đó chủ đề được xác định và các chế độ cài đặt cho tài nguyên giao diện, chẳng hạn nhưGiao diện mẹcolorPrimary. Bạn có thể sửa đổi giao diện thiết kế bằng cách thay đổi các cài đặt tài nguyên này.

Chủ đề và màu sắc

Trình chỉnh sửa giao diện cho phép bạn tạo các giao diện mới, sửa đổi giao diện hiện có và quản lý màu sắc tạo nên các giao diện đó.

Tạo giao diện mới

Để tạo một giao diện, hãy làm theo các bước sau:

  1. Mở trình đơn thả xuống Giao diện ở gần phía trên cùng bên phải của Trình chỉnh sửa giao diện.
  2. Nhấp vào Tạo giao diện mới.
  3. Trong hộp thoại Giao diện mới, hãy nhập tên cho giao diện mới.
  4. Trong danh sách Tên giao diện mẹ, hãy nhấp vào tên chính mà giao diện sẽ kế thừa tài nguyên ban đầu.

Đổi tên giao diện

Để đổi tên cho một giao diện, hãy thực hiện các bước sau:

  1. Mở trình đơn thả xuống Giao diện ở gần phía trên cùng bên phải của Trình chỉnh sửa giao diện.
  2. Nhấp vào Đổi têntheme-name.
  3. Trong hộp thoại Đổi tên, hãy nhập tên mới cho giao diện đó.
  4. (không bắt buộc) Để xem các thay đổi sẽ trông như thế nào, hãy nhấp vào Xem trước.
  5. Để áp dụng các thay đổi, hãy nhấp vào Cấu trúc lại.

Thay đổi tài nguyên màu

Để thay đổi một tài nguyên màu hiện có, chẳng hạn như colorPrimary, hãy làm theo các bước sau:

  1. Trong Trình chỉnh sửa giao diện, hãy nhấp vào hình vuông có màu sắc bên cạnh tên của tài nguyên bạn muốn thay đổi. Hộp thoại Tài nguyên xuất hiện, trong đó hiển thị danh sách các nhóm màu ở bên trái, cùng các chế độ cài đặt và thông tin về màu tài nguyên hiện được chọn ở bên phải.
  2. Đặt màu cho tài nguyên giao diện bằng cách chọn một màu từ bảng điều khiển ở bên trái hoặc xác định màu mới như mô tả dưới đây.

Chọn một màu

Màu sắc được liệt kê ở cột bên trái của hộp thoại Tài nguyên và được sắp xếp thành các nhóm sau.

  • Dự án: Đây là các màu sắc bên trong dự án của bạn. Bạn có thể chỉnh sửa một số màu vì chúng nằm trong nguồn dự án của bạn và một số khác không thể chỉnh sửa vì chúng nằm trong thư viện mà bạn đã đưa vào dự án.
  • android: Đây là các tài nguyên màu thuộc không gian tên Android. Chúng là một phần của khung Android và không thể chỉnh sửa được.
  • Thuộc tính giao diện: Đây là các thuộc tính của giao diện đang được chọn. Những giao diện đó được tham chiếu theo giao diện và có thể thay đổi tùy theo giao diện bạn đã chọn. Bạn không thể chỉnh sửa các thuộc tính giao diện từ trong hộp thoại Tài nguyên.

Xác định màu mới

    Hình 1. Trình chỉnh sửa màu

  1. Từ trình đơn thả xuống ở phía trên cùng bên phải của hộp thoại Tài nguyên, hãy nhấp vào Thêm tài nguyên mới > Giá trị màu mới. Hộp thoại Tài nguyên hiển thị một ngăn chỉnh sửa bên phải với trường Tên trống để bạn có thể nhập tên cho màu tuỳ chỉnh.
  2. Tạo màu tuỳ chỉnh như sau. Các bước tương ứng với chú thích trong hình 1.
    1. Nhập tên cho giá trị màu mới của bạn vào trường Tên để trống. Tên không được chứa dấu cách hoặc ký tự đặc biệt. Có thể sử dụng dấu gạch dưới và số.
    2. Thang màu, trường Màu tùy chỉnh và công cụ chọn màu:
      • Trên thang màu, hãy nhấp vào màu bạn muốn. Màu sắc sẽ hiển thị trong trường Màu tuỳ chỉnh.
      • Bạn có thể dùng công cụ chọn màu ở bên trái của trường Màu tùy chỉnh để chọn màu. Nhấp vào công cụ chọn màu , sau đó nhấp vào mục hiển thị ở bất kỳ vị trí nào trên màn hình máy tính. Màu trong trường Màu tùy chỉnh sẽ thay đổi thành màu bạn đã chọn.
    3. Ngay bên dưới trường Màu tuỳ chỉnh, hãy sử dụng các trường có thể chỉnh sửa và trình đơn thả xuống ở bên trái để chỉ định RGB, HSB hoặc màu ARGB theo giá trị số. Thuộc tính HEX tương đương với màu sắc của bạn hiển thị trong trường có thể chỉnh sửa ở ngoài cùng bên phải.
    4. Để đặt độ mờ và màu sắc, hãy di chuyển thanh trượt bên dưới thang màu.
    5. Chọn một trong các ô màu đã xác định sẵn. Màu sắc hiển thị trong trường Màu tùy chỉnh và tên sẽ thay đổi thành tên của màu bạn đã chọn.
  3. Nhấp vào OK để lưu chế độ cài đặt của bạn. Hộp thoại Tài nguyên đóng lại và đưa bạn trở lại Trình chỉnh sửa giao diện.

Sửa đổi màu

Bạn có thể sửa đổi bất kỳ màu có thể chỉnh sửa nào. Nếu một màu có thể chỉnh sửa, bạn sẽ thấy màu có thể chỉnh sửa, màu sắc, độ mờ, trường tên và trường cấu hình thiết bị. Hãy xem phần Chọn màu nếu bạn muốn biết lý do một số trường có thể chỉnh sửa được còn một số trường khác thì không.

  1. Điều chỉnh các chế độ cài đặt.
  2. Nhấp vào OK.

So khớp màu của chất liệu

Nếu đã xác định hoặc sửa đổi màu tuỳ chỉnh của dự án, bạn có thể đảm bảo màu đó phù hợp với màu bảng chất liệu gần nhất bằng cách nhấp vào MÀU CHẤT LIỆU GẦN NHẤT nằm bên cạnh Màu tuỳ chỉnh. Android Studio thay đổi giá trị về độ mờ và màu của màu sắc mà bạn đã chọn thành màu cho chất liệu giống nhất, đồng thời thay thế Màu tùy chỉnh bằng tên của màu sắc trong bảng màu chất liệu.

Lưu ý: Tính năng MÀU CHẤT LIỆU GẦN NHẤT chỉ hiển thị khi màu không phải là màu chất liệu.

Xem danh sách trạng thái và màu

Trình chỉnh sửa giao diện cho phép bạn xem trước các màu được liên kết với các trạng thái khác nhau. Để thực hiện việc này, hãy mở hộp thoại Tài nguyên bằng cách nhấp vào hình vuông màu đặt ở bên cạnh tên của tài nguyên danh sách trạng thái có thể chỉnh sửa. Hộp thoại Tài nguyên hiển thị một danh sách các trạng thái, chẳng hạn như Đã chọn và giá trị màu được liên kết với trạng thái đó. Nhấp vào màu cho một trạng thái để chọn một giá trị màu khác.

Để kiểm soát hoàn toàn các trạng thái tốt hơn, bạn có thể trực tiếp xem và chỉnh sửa các thuộc tính của trạng thái trong tệp XML xác định các trạng thái đó. Để biết thêm thông tin, hãy xem tài liệu về loại ColorStateList.

Cấu hình dành riêng cho thiết bị

Khi một màu trở nên có thể chỉnh sửa, bạn có thể chọn cấu hình dành riêng cho thiết bị để ứng dụng của bạn hỗ trợ. Để thực hiện, hãy làm theo các bước sau:

  1. Mở hộp thoại Tài nguyên. Để biết thông tin về cách mở hộp thoại Tài nguyên, hãy xem phần Thay đổi tài nguyên màu.
  2. Chọn màu Dự án, sau đó ở cuối ngăn bên phải, hãy nhấp để mở rộng Cấu hình thiết bị, phần này hiển thị nhóm tài nguyên và tên của tệp XML chứa tài nguyên và danh sách các thư mục cụ thể theo cấu hình để đặt tệp đó vào.
  3. Nếu cần, hãy thay đổi tên tệp XML.
  4. Chọn hộp bên cạnh các thư mục tương ứng với các cấu hình dành riêng cho thiết bị mà bạn muốn hỗ trợ. Bất kỳ cấu hình nào mà bạn không chỉ định thư mục sẽ mặc định sử dụng thư mục values.

Để biết thêm thông tin về mối quan hệ giữa tên và cấu hình thư mục, hãy xem Hỗ trợ nhiều màn hình. Để biết thêm thông tin về các tên thư mục được hỗ trợ, hãy xem Cung cấp Tài nguyên.