Layouts và Resource cho UI android

Layouts và Resource cho UI android

Chương này mô tả layout giao diện người dùng (UI) của màn hình và các tài nguyên khác mà bạn tạo cho ứng dụng của mình và mã bạn sẽ sử dụng để phản hồi khi người dùng nhấn vào phần tử giao diện người dùng.

Các bài viết liên quan:

Views

UI người dùng bao gồm một hệ thống phân cấp các đối tượng được gọi là các views  – mọi phần tử của màn hình đều là một Khung nhìn. Lớp View đại diện cho khối xây dựng cơ bản cho tất cả các thành phần UI và lớp cơ sở cho các lớp cung cấp các thành phần UI tương tác như nút, hộp kiểm và trường nhập văn bản.

View có một vị trí, được biểu thị bằng một cặp tọa độ bên trái và trên cùng và hai kích thước, được biểu thị bằng chiều rộng và chiều cao. Đơn vị cho vị trí và kích thước là pixel không phụ thuộc vào mật độ (dp).

Hệ thống Android cung cấp hàng trăm lớp con View được xác định trước. Các lớp con View thường được sử dụng được mô tả trong một số bài học bao gồm:

  1. TextView để hiển thị văn bản
  2. EditText để cho phép người dùng nhập và chỉnh sửa văn bản
  3. Button và các phần tử có thể nhấp khác (chẳng hạn như RadioButton, CheckBox và Spinner) để cung cấp hành vi tương tác
  4. ScrollView và RecyclerView để hiển thị các mục có thể cuộn
  5. ImageView để hiển thị hình ảnh
  6. ConstraintLayout và LinearLayout để chứa các Views khác và định vị chúng

Bạn có thể xác định View để xuất hiện trên màn hình và phản hồi khi người dùng nhấn. View cũng có thể được xác định để chấp nhận nhập văn bản hoặc ẩn cho đến khi cần thiết.

Bạn có thể chỉ định phần tử Xem trong tệp tài nguyên layout. Tài nguyên layout được viết bằng XML và được liệt kê trong thư mục layout trong thư mục res trong Project > Android.

ViewGroup

Các phần tử dạng View có thể được nhóm lại bên trong một ViewGroup, hoạt động như một vùng chứa. Mối quan hệ là cha-con, trong đó cha là một ViewGroup và con là một View hoặc một ViewGroup khác. 

Sau đây là các nhóm ViewGroup thường được sử dụng:

ConstraintLayout: Một nhóm đặt các phần tử giao diện người dùng (phần tử View con) bằng cách sử dụng các kết nối ràng buộc với các phần tử khác và với các cạnh layout (View cha).

ScrollView: Một nhóm chứa một phần tử View con khác và cho phép cuộn phần tử View con.

RecyclerView: Một nhóm chứa danh sách các phần tử View khác hoặc các nhóm ViewGroup và cho phép cuộn chúng bằng cách thêm và xóa động các phần tử View khỏi màn hình.

Layout ViewGroup groups

Các phần tử View cho một màn hình được tổ chức theo thứ bậc. Ở gốc của cấu trúc phân cấp này là một ViewGroup chứa layout của toàn bộ màn hình. ViewGroup có thể chứa các phần tử View con hoặc các nhóm ViewGroup khác như thể hiện trong hình sau. 

Layouts và Resource cho UI android

Trong hình trên:

ViewGroup gốc.

Tập hợp đầu tiên của các phần tử View con và các nhóm ViewGroup có cha là gốc.

Một số nhóm ViewGroup được chỉ định làm layout vì chúng tổ chức các phần tử View con theo một cách cụ thể và thường được sử dụng làm ViewGroup gốc. Một số ví dụ về layout là:

ConstraintLayout: Một nhóm các phần tử Xem con sử dụng các ràng buộc, cạnh và hướng dẫn để kiểm soát cách các phần tử được định vị so với các phần tử khác trong layout. ConstraintLayout được thiết kế để giúp bạn dễ dàng nhấp và kéo các phần tử View trong trình chỉnh sửa layout.

LinearLayout: Một nhóm các phần tử View con được định vị và căn chỉnh theo chiều ngang hoặc chiều dọc.

RelativeLayout: Một nhóm các phần tử View con trong đó mỗi phần tử được định vị và căn chỉnh so với các phần tử khác trong ViewGroup. Nói cách khác, vị trí của các phần tử View con có thể được mô tả trong mối quan hệ với nhau hoặc với ViewGroup cha.

TableLayout: Một nhóm các phần tử View con được sắp xếp thành các hàng và cột.

FrameLayout: Một nhóm các phần tử View con trong một ngăn xếp. FrameLayout được thiết kế để chặn một vùng trên màn hình để hiển thị một View. Các phần tử View xem con được vẽ trong một ngăn xếp, với phần tử con được thêm gần đây nhất ở trên cùng. Kích thước của FrameLayout là kích thước của phần tử View con lớn nhất của nó.

GridLayout: Một nhóm đặt các phần tử View con của nó trong một lưới hình chữ nhật có thể cuộn được. Trình bày trực quan về layout

Mẹo: Tìm hiểu thêm về các kiểu layout khác nhau trong Đối tượng layout Chung.

Layouts và Resource cho UI android

Ví dụ đơn giản về LinearLayout với các phần tử Chế độ view con được hiển thị bên dưới dưới dạng sơ đồ của tệp layout (activity_main.xml), cùng với sơ đồ phân cấp (trên cùng bên phải) và ảnh chụp màn hình của layout đã hoàn thành thực tế (dưới cùng bên phải). Khái niệm layout (trái), View phân cấp (phải, trên cùng) và layout hoàn thiện (phải, dưới)

Layouts và Resource cho UI android

Trong hình trên:

LinearLayout, ViewGroup cha, chứa tất cả các phần tử View con theo hướng dọc.

Button(button_toast). Phần tử View con đầu tiên xuất hiện ở trên cùng trong LinearLayout.

TextView (show_count). Phần tử View con thứ hai xuất hiện dưới phần tử View con đầu tiên trong LinearLayout.

Button(button_count). Phần tử View con thứ ba xuất hiện dưới phần tử View con thứ hai trong LinearLayout.

Cái Hệ thống phân cấp layout có thể trở nên phức tạp đối với một ứng dụng hiển thị nhiều phần tử View trên màn hình. Điều quan trọng là phải hiểu hệ thống phân cấp, vì nó ảnh hưởng đến việc các phần tử View có hiển thị hay không và chúng được vẽ hiệu quả như thế nào.

Mẹo: Bạn có thể khám phá hệ thống phân cấp layout của ứng dụng bằng Trình xem thứ bậc. Nó hiển thị View dạng cây của hệ thống phân cấp và cho phép bạn phân tích hiệu suất của các phần tử View trên thiết bị hỗ trợ Android. Các vấn đề về hiệu suất được đề cập trong chương tiếp theo.

The layout editor

Bạn xác định layout trong trình chỉnh sửa layout hoặc bằng cách nhập mã XML.

Trình chỉnh sửa layout hiển thị trình bày trực quan của mã XML. Bạn có thể kéo các phần tử View vào ngăn thiết kế hoặc kế hoạch chi tiết và sắp xếp, thay đổi kích thước và chỉ định các thuộc tính cho chúng. Bạn ngay lập tức thấy hiệu quả của những thay đổi bạn thực hiện.

Để sử dụng trình chỉnh sửa layout, hãy bấm đúp vào tệp layout XML (activity_main.xml). Trình chỉnh sửa layout xuất hiện với tab Thiết kế ở dưới cùng được đánh dấu. (Nếu tab Văn bản được tô sáng và bạn thấy mã XML, hãy nhấp vào tab Thiết kế.) Đối với template activity empty, layout như được hiển thị trong hình bên dưới.

Layouts và Resource cho UI android
  1. Tệp layout XML (activity_main.xml).
  2. Các tab Design  và Text . Nhấp vào Design để xem trình chỉnh sửa layout hoặc Text  để xem mã XML.
  3. Palette panel. Palette panel cung cấp danh sách các phần tử và layout giao diện người dùng. Thêm một phần tử hoặc layout vào giao diện người dùng bằng cách kéo nó vào ngăn thiết kế.
  4. Component Tree. Component Tree hiển thị cấu trúc phân cấp layout. Bấm vào một phần tử View hoặc ViewGroup trong ngăn này để chọn nó. Các phần tử dạng xem được tổ chức thành một hệ thống phân cấp dạng cây gồm cha mẹ và con, trong đó con kế thừa các thuộc tính của cha mẹ của nó. Trong hình trên, TextView là con của ConstraintLayout.
  5. Design và blueprint panes. Kéo các phần tử View từ ngăn Bảng màu vào ngăn thiết kế hoặc kế hoạch chi tiết để định vị chúng trong layout. Trong hình trên, layout chỉ hiển thị một phần tử: TextView hiển thị “Hello World”.
  6. Attributes tab. Attributes tab để hiển thị Attributes panel để đặt thuộc tính cho phần tử Dạng xem.

Layout editor toolbars

Layout editor toolbars cung cấp các nút để định cấu hình layout của bạn và thay đổi giao diện của nó. Thanh công cụ trên cùng cho phép bạn định cấu hình giao diện của bản xem trước layout trong trình chỉnh sửa layout: Thanh công cụ trên cùng của trình chỉnh sửa layout

Layouts và Resource cho UI android

Hình trên cho thấy thanh công cụ trên cùng của trình chỉnh sửa layout:

  1. Select Design Surface: Chọn Thiết kế để hiển thị bản xem trước màu của các phần tử giao diện người dùng trong layout của bạn hoặc Bản thiết kế để chỉ hiển thị đường viền của các phần tử. Để xem cả hai ngăn cạnh nhau, hãy chọn Thiết kế + Bản thiết kế.
  2. Orientation in Editor: Chọn Dọc hoặc Ngang để hiển thị bản xem trước theo hướng dọc hoặc ngang. Cài đặt hướng cho phép bạn xem trước các hướng layout mà không cần chạy ứng dụng trên trình giả lập hoặc thiết bị. Để tạo layout thay thế, hãy chọn Tạo biến thể ngang hoặc các biến thể khác.
  3. Device in Editor: Chọn loại thiết bị (điện thoại / máy tính bảng, Android TV hoặc Android Wear).
  4. API Version in Editor: Chọn phiên bản Android sẽ sử dụng để hiển thị bản xem trước.
  5. Theme in Editor: Chọn một chủ đề (chẳng hạn như AppTheme) để áp dụng cho bản xem trước.
  6. Locale in Editor: Chọn ngôn ngữ và khu vực cho bản xem trước. Danh sách này chỉ hiển thị các ngôn ngữ có sẵn trong resource string (xem bài học về bản địa hóa để biết chi tiết về cách thêm ngôn ngữ). Bạn cũng có thể chọn Xem trước là Phải sang Trái để xem layout như thể một ngôn ngữ RTL đã được chọn.

Trình chỉnh sửa layout cũng cung cấp thanh công cụ thứ hai cho phép bạn định cấu hình giao diện của các phần tử giao diện người dùng trong ConstraintLayout và phóng to và thu nhỏ bản xem trước: 

Layouts và Resource cho UI android

Hình trên cho thấy thanh công cụ chỉnh sửa ConstraintLayout:

Show: Chọn Hiển thị Ràng buộc và Hiển thị lề để hiển thị chúng trong bản xem trước hoặc để dừng hiển thị chúng.

Autoconnect: Bật hoặc tắt Tự động kết nối. Với tính năng Tự động kết nối được bật, bạn có thể kéo bất kỳ phần tử nào (chẳng hạn như Nút) vào bất kỳ phần nào của layout để tạo ra các ràng buộc đối với layout mẹ.

Clear All Constraints: Xóa tất cả các ràng buộc trong toàn bộ layout.

Infer Constraints: Tạo các ràng buộc bằng cách suy luận.

Default Margins: Đặt lề mặc định.

Pack: Đóng gói hoặc mở rộng các phần tử đã chọn.

Align: Căn chỉnh các phần tử đã chọn.

Guidelines: Thêm hướng dẫn dọc hoặc ngang.

Zoom controls: Phóng to hoặc thu nhỏ.

Sử dụng ConstraintLayout

Trình chỉnh sửa layout cung cấp nhiều tính năng hơn trong tab Thiết kế khi bạn sử dụng ConstraintLayout, bao gồm các chốt để xác định các ràng buộc.

Ràng buộc là một kết nối hoặc sự liên kết với một phần tử giao diện người dùng khác, với layout parent hoặc với một guideline vô hình. Mỗi ràng buộc xuất hiện dưới dạng một đường kéo dài từ một chốt tròn. Sau khi bạn chọn một phần tử giao diện người dùng trong Component Tree pane hoặc nhấp vào nó trong trình chỉnh sửa layout, phần tử sẽ hiển thị một chốt điều chỉnh kích thước ở mỗi góc và một chốt điều chỉnh hình tròn ở giữa mỗi bên. Các điều khiển ràng buộc và thay đổi kích thước trên View

Layouts và Resource cho UI android

Hình trên cho thấy các điều khiển ràng buộc và thay đổi kích thước trên các phần tử View trong một layout:

Resizing handle.

Constraint line and handle. Trong hình, ràng buộc căn chỉnh bên trái của Nút Toast với bên trái của layout.

Constraint handle không có đường ràng buộc.

Baseline handle. Xử lý đường cơ sở căn chỉnh đường cơ sở văn bản của một phần tử với đường cơ sở văn bản của phần tử khác.

Trong ngăn kế hoạch hoặc thiết kế, các ràng buộc sau xuất hiện trên phần tử TextView:

Constraint handle: Để tạo một ràng buộc, hãy nhấp vào một điều khiển ràng buộc, được hiển thị dưới dạng một vòng tròn ở mỗi bên của một phần tử. Sau đó, kéo vòng tròn đến một chốt ràng buộc khác hoặc đến ranh giới chính. Một đường ngoằn ngoèo thể hiện ràng buộc. 

Layouts và Resource cho UI android

Resizing handle: Bạn có thể kéo các chốt điều khiển thay đổi kích thước hình vuông để thay đổi kích thước phần tử. Trong khi kéo, tay cầm thay đổi thành một góc có góc cạnh. Tay cầm ràng buộc

Layouts và Resource cho UI android

Bạn có thể kéo các chốt điều chỉnh kích thước trên mỗi góc của phần tử giao diện người dùng để thay đổi kích thước, nhưng làm như vậy sẽ gán cứng kích thước chiều rộng và chiều cao, điều bạn nên tránh đối với hầu hết các phần tử vì kích thước được mã hóa cứng không thích ứng với các mật độ màn hình khác nhau.

Ràng buộc một phần tử giao diện người dùng

Để thêm ràng buộc vào một phần tử giao diện người dùng, hãy nhấp vào nút điều khiển hình tròn và kéo một đường tới một phần tử khác hoặc sang một bên của layout, như được hiển thị trong hai hình động bên dưới. Để loại bỏ một ràng buộc khỏi một phần tử, hãy nhấp vào nút điều khiển hình tròn. Xóa và thêm một ràng buộc

Layouts và Resource cho UI android
Layouts và Resource cho UI android

Các ràng buộc bạn xác định trong trình chỉnh sửa layout được tạo dưới dạng các thuộc tính XML, bạn có thể thấy các ràng buộc này trong tab Văn bản như được mô tả trong “Chỉnh sửa trực tiếp XML” trong chương này. Ví dụ: mã XML sau được tạo ràng buộc phần đầu của một phần tử ở phần trên cùng của phần tử cha của nó:

app:layout_constraintTop_toTopOf=”parent”

Sử dụng ràng buộc đường cơ sở

Bạn có thể căn chỉnh một phần tử giao diện người dùng có chứa văn bản, chẳng hạn như TextView hoặc Button, với một phần tử giao diện người dùng khác có chứa văn bản. Ràng buộc đường cơ sở cho phép bạn ràng buộc các phần tử sao cho đường cơ sở của văn bản khớp với nhau. Chọn phần tử giao diện người dùng có văn bản, sau đó di con trỏ của bạn qua phần tử cho đến khi nút giới hạn đường cơ sở xuất hiện bên dưới phần tử.

Layouts và Resource cho UI android

Nhấp vào nút giới hạn đường cơ sở. Tay cầm đường cơ sở xuất hiện, nhấp nháy màu xanh lục như trong hình động. Kéo đường giới hạn đường cơ sở đến đường cơ sở của phần tử giao diện người dùng khác.

Mẹo: Để có hướng dẫn chuyên sâu về cách sử dụng ConstraintLayout, hãy xem Sử dụng ConstraintLayout để thiết kế dạng xem.

Sử dụng Attributes pane

Attributes pane cung cấp quyền truy cập vào tất cả các thuộc tính XML mà bạn có thể gán cho một phần tử giao diện người dùng. Bạn có thể tìm thấy các thuộc tính (được gọi là thuộc tính) chung cho tất cả các dạng xem trong tài liệu lớp Dạng xem.

Để hiển thị Attributes pane, hãy nhấp vào tab Thuộc tính ở phía bên phải của trình chỉnh sửa layout. Ngăn Thuộc tính bao gồm một bảng định cỡ hình vuông được gọi là trình kiểm tra View. Các ký hiệu bên trong trình kiểm tra View đại diện cho cài đặt chiều cao và chiều rộng. 

Layouts và Resource cho UI android

Vertical view size control. Điều khiển kích thước dọc, xuất hiện ở trên cùng và dưới cùng của trình kiểm tra View, chỉ định thuộc tính layout_height. Các góc chỉ ra rằng điều khiển kích thước này được đặt thành wrap_content, có nghĩa là phần tử giao diện người dùng sẽ mở rộng theo chiều dọc khi cần để vừa với nội dung của nó. “8” cho biết mức lề tiêu chuẩn được đặt thành 8 dp.

Horizontal view size control. Điều khiển kích thước ngang, xuất hiện ở bên trái và bên phải của trình kiểm tra View, chỉ định layout_ width. Các góc chỉ ra rằng điều khiển kích thước này được đặt thành wrap_content, có nghĩa là phần tử giao diện người dùng sẽ mở rộng theo chiều ngang khi cần thiết để vừa với nội dung của nó, tối đa là 8 dp.

Attributes . Bấm để đóng ngăn.

Các thuộc tính layout_width và layout_height trong ngăn Attributes thay đổi khi bạn thay đổi các điều khiển kích thước ngang và dọc của trình kiểm tra. Các thuộc tính này có thể nhận một trong ba giá trị cho ConstraintLayout:

Cài đặt match_constraint mở rộng phần tử giao diện người dùng để lấp đầy phần tử gốc của nó theo chiều rộng hoặc chiều cao lên đến một lề, nếu một lề được đặt. Cha mẹ trong trường hợp này là ConstraintLayout.

Cài đặt wrap_content thu nhỏ phần tử giao diện người dùng bằng kích thước của nội dung của nó. Nếu không có nội dung, phần tử sẽ trở nên vô hình.

Để chỉ định một kích thước cố định được điều chỉnh cho kích thước màn hình của thiết bị, hãy đặt một số dp (pixel không phụ thuộc vào mật độ). Ví dụ: 16dp có nghĩa là 16 pixel không phụ thuộc vào mật độ.

Mẹo: Nếu bạn thay đổi thuộc tính layout_width bằng cách sử dụng menu bật lên của nó, thuộc tính layout_width được đặt thành 0 vì không có thứ nguyên được đặt. Cài đặt này giống với match_constraint — phần tử giao diện người dùng có thể mở rộng hết mức có thể để đáp ứng các ràng buộc và cài đặt lề.

Ngăn Thuộc tính cung cấp quyền truy cập vào tất cả các thuộc tính mà bạn có thể gán cho phần tử View. Bạn có thể nhập các giá trị cho từng thuộc tính, chẳng hạn như các thuộc tính android: id, background, textColor và text.

Tạo các biến thể layout cho các hướng và thiết bị

Bạn có thể xem trước layout của ứng dụng theo hướng ngang và với các thiết bị khác nhau mà không cần phải chạy ứng dụng trên trình giả lập hoặc thiết bị.

Để xem trước layout cho một hướng khác, hãy nhấp vào nút Định hướng trong Trình chỉnh sửa Nút Định hướng trong Trình chỉnh sửa ở thanh công cụ trên cùng. Để hiển thị layout theo hướng ngang, hãy chọn Chuyển sang Ngang. Để quay lại hướng dọc, hãy chọn Chuyển sang Chân dung.

Bạn cũng có thể xem trước layout cho các thiết bị khác nhau. Nhấp vào nút Thiết bị trong Trình chỉnh sửa Nút Thiết bị trong Trình chỉnh sửa ở thanh công cụ trên cùng và chọn một thiết bị khác trong trình đơn thả xuống. Ví dụ: chọn Nexus 4, Nexus 5, sau đó chọn Pixel để xem sự khác biệt trong các bản xem trước.

Để tạo một biến thể của layout hoàn toàn cho hướng ngang, để nguyên layout hướng dọc: nhấp vào nút Định hướng trong Trình chỉnh sửa và chọn Tạo Biến thể Phong cảnh. Một cửa sổ trình chỉnh sửa mới sẽ mở ra với tab land / activity_main.xml hiển thị layout cho hướng ngang (ngang). Bạn có thể thay đổi layout này, dành riêng cho hướng ngang, mà không thay đổi hướng dọc (dọc) ban đầu.

Trong ngăn Project > Android, nhìn vào bên trong thư mục res> layout. Bạn thấy rằng Android Studio tự động tạo biến thể cho bạn, được gọi là activity_main.xml (land). Tệp cho biến thể layout trong thư mục layout

Layouts và Resource cho UI android

Để tạo biến thể layout cho màn hình có kích thước máy tính bảng, hãy nhấp vào nút Định hướng trong Orientation in Editor và chọn Create layout x-large Variation. Một cửa sổ trình chỉnh sửa mới mở ra với  xlarge/activity_main.xml hiển thị layout cho một thiết bị có kích thước máy tính bảng. Người chỉnh sửa cũng chọn một thiết bị máy tính bảng, chẳng hạn như Nexus 9 hoặc Nexus 10, để xem trước. Trong ngăn Project > Android, nhìn vào bên trong thư mục res> layout. Bạn thấy rằng Android Studio tự động tạo biến thể cho bạn, được gọi là activity_main.xml (xlarge). Bạn có thể thay đổi layout này, dành riêng cho máy tính bảng, mà không cần thay đổi các layout khác.

Chỉnh sửa trực tiếp XML

Đôi khi, việc chỉnh sửa mã XML trực tiếp nhanh hơn và dễ dàng hơn, đặc biệt là khi sao chép và dán mã cho các dạng xem tương tự.

Để xem và chỉnh sửa mã XML, hãy mở tệp layout XML. Trình chỉnh sửa layout xuất hiện với tab Thiết kế ở dưới cùng được đánh dấu. Bấm vào tab Văn bản để xem mã XML. Phần sau hiển thị mã XML cho một LinearLayout có hai phần tử Nút với một TextView ở giữa:

Layouts và Resource cho UI android

Thuộc tính XML (thuộc tính xem)

View có các thuộc tính xác định vị trí một View xuất hiện trên màn hình, kích thước của nó, cách View liên quan đến các View khác và cách nó phản hồi với đầu vào của người dùng. Khi xác định dạng xem trong XML hoặc trong ngăn Thuộc tính của trình chỉnh sửa layout, các thuộc tính được gọi là thuộc tính.

Ví dụ: trong mô tả XML sau của TextView, android: id, android: layout_width, android: layout_height, android: background, là các thuộc tính XML được dịch tự động thành các thuộc tính TextView:

<TextView

       android: id = “@ + id / show_count”

       android: layout_width = “match_parent”

       android: layout_height = “wrap_content”

       android: background = “@ color / myBackgroundColor”

       android: textStyle = “bold”

       android: text = “@ string / count_initial_value “/>

Các thuộc tính thường có dạng sau:

android:attribute_name=”value

Thuộc tính_name là tên của thuộc tính. Giá trị là một chuỗi có giá trị cho thuộc tính. Ví dụ:

android: textStyle = “bold”

Nếu giá trị là tài nguyên, chẳng hạn như màu, ký hiệu @ chỉ định loại tài nguyên. Ví dụ:

android: background = “@ color / myBackgroundColor”

Thuộc tính nền được đặt thành tài nguyên màu được xác định là myBackgroundColor, được khai báo là # FFF043. Tài nguyên màu được mô tả trong các thuộc tính liên quan đến Phong cách trong chương này.

Mọi View và ViewGroup đều hỗ trợ nhiều thuộc tính XML của riêng nó:

Một số thuộc tính dành riêng cho một lớp con View. Ví dụ, lớp con TextView hỗ trợ thuộc tính textSize. Bất kỳ phần tử nào mở rộng lớp con TextView đều kế thừa các thuộc tính cụ thể của lớp con này.

Một số thuộc tính chung cho tất cả các phần tử View, vì chúng được kế thừa từ lớp View gốc. Thuộc tính android: id là một ví dụ.

Để biết mô tả về các thuộc tính cụ thể, hãy xem phần tổng quan của tài liệu lớp Xem.

Identifying View

Để xác định duy nhất một View và tham chiếu nó từ mã của bạn, bạn phải cung cấp cho nó một id. Thuộc tính android: id cho phép bạn chỉ định một id duy nhất — một định danh tài nguyên cho một View.

Ví dụ:

android: id = “@ + id / button_count”

Phần @ + id / button_count của thuộc tính tạo ra một id được gọi là button_count cho Nút (một lớp con của View). Bạn sử dụng biểu tượng dấu cộng (+) để cho biết rằng bạn đang tạo một id mới.

Referencing một View

Để tham chiếu đến mã định danh tài nguyên hiện có, hãy bỏ qua biểu tượng dấu cộng (+). Ví dụ: để tham chiếu đến một View theo id của nó trong một thuộc tính khác, chẳng hạn như android: layout_toLeftOf (được mô tả trong phần tiếp theo) để kiểm soát vị trí của một View, bạn sẽ sử dụng:

android: layout_toLeftOf = “@ id / show_count”

Trong thuộc tính ở trên, @ id / show_count đề cập đến View có mã định danh tài nguyên show_count. Thuộc tính định vị phần tử ở “bên trái” View show_count.

Định vị một View

Một số thuộc tính định vị liên quan đến layout là bắt buộc đối với View hoặc ViewGroup và tự động xuất hiện khi bạn thêm View hoặc Nhóm Xem vào layout XML.

Định vị LinearLayout

LinearLayout là bắt buộc để có các thuộc tính này được đặt:

  • android: layout_width
  • android: layout_height
  • android: orientation

Các thuộc tính android: layout_width và android: layout_height có thể nhận một trong ba giá trị:

match_parent mở rộng phần tử giao diện người dùng để lấp đầy phần tử cha của nó theo chiều rộng hoặc chiều cao. Khi LinearLayout là ViewGroup gốc, nó sẽ mở rộng đến kích thước của màn hình thiết bị. Đối với phần tử giao diện người dùng trong ViewGroup gốc, nó sẽ mở rộng đến kích thước của ViewGroup.

wrap_content thu nhỏ phần tử giao diện người dùng bằng kích thước của nội dung của nó. Nếu không có nội dung, phần tử sẽ trở nên vô hình.

Sử dụng một số dp cố định (pixel không phụ thuộc vào mật độ) để chỉ định kích thước cố định, được điều chỉnh cho kích thước màn hình của thiết bị. Ví dụ: 16dp có nghĩa là 16 pixel không phụ thuộc vào mật độ. Các pixel không phụ thuộc vào mật độ và các kích thước khác được mô tả trong “Kích thước” trong chương này.

Android orientation có thể là:

horizontal: Các khung nhìn được sắp xếp từ trái sang phải.

vertical : Các khung nhìn được sắp xếp từ trên xuống dưới.

Các thuộc tính khác liên quan đến layout bao gồm:

android: layout_gravity: Thuộc tính này được sử dụng với một phần tử giao diện người dùng để kiểm soát vị trí sắp xếp của phần tử trong cha của nó. Ví dụ: thuộc tính sau tập trung phần tử giao diện người dùng theo chiều ngang trong ViewGroup chính:

android: layout_gravity = “center_horizontal”

Padding là không gian, được đo bằng pixel không phụ thuộc vào mật độ, giữa các cạnh của phần tử giao diện người dùng và nội dung của phần tử, như thể hiện trong hình bên dưới. 

Layouts và Resource cho UI android

Trong hình trên: (1) Khoảng đệm là khoảng trống giữa các cạnh của TextView (đường nét đứt) và nội dung của TextView (đường liền nét). Khoảng đệm không giống như lề, là khoảng trống từ cạnh của View đến phần cha của nó.

Kích thước của một View bao gồm phần đệm của nó. Sau đây là các thuộc tính đệm thường được sử dụng:

  • android: padding: Đặt đệm của tất cả bốn cạnh.
  • android: paddingTop: Đặt phần đệm của cạnh trên.
  • android: paddingBottom: Đặt phần đệm của cạnh dưới.
  • android: paddingLeft: Đặt phần đệm của cạnh trái.
  • android: paddingRight: Đặt phần đệm của cạnh bên phải.
  • android: paddingStart: Đặt phần đệm của phần bắt đầu View, tính bằng pixel. Được sử dụng thay cho các thuộc tính đệm được liệt kê ở trên, đặc biệt với các View dài và hẹp.
  • android: paddingEnd: Đặt phần đệm của cạnh cuối của View, tính bằng pixel. Được sử dụng cùng với android: paddingStart.

Mẹo: Để xem tất cả các thuộc tính XML cho một LinearLayout, hãy xem phần Tóm tắt của định nghĩa lớp LinearLayout. Các layout gốc khác, chẳng hạn như RelativeLayout và AbsoluteLayout, cũng liệt kê các thuộc tính XML của chúng trong phần Tóm tắt.

Định vị RelativeLayout

Một Viewgroup hữu ích khác cho layout là RelativeLayout, bạn có thể sử dụng để định vị các phần tử View con so với nhau hoặc với parent. Các thuộc tính bạn có thể sử dụng với RelativeLayout bao gồm:

  • android: layout_toLeftOf: Định vị cạnh phải của View này sang bên trái của View khác (được xác định bằng ID của nó).
  • android: layout_toRightOf: Định vị cạnh trái của View này sang bên phải của View khác (được xác định bằng ID của nó).
  • android: layout_centerHorizontal: Căn giữa View này theo chiều ngang bên trong cha của nó.
  • android: layout_centerVertical: Căn giữa View này theo chiều dọc bên trong gốc của nó.
  • android: layout_alignParentTop: Định vị cạnh trên cùng của View này để khớp với cạnh trên cùng của View chính.
  • android: layout_alignParentBottom: Định vị cạnh dưới cùng của View này để khớp với cạnh dưới cùng của View chính.

Để có danh sách đầy đủ các thuộc tính cho các phần tử lớp con View và View trong một RelativeLayout, hãy xem RelativeLayout.LayoutParams.

Các thuộc tính liên quan đến phong cách

Bạn chỉ định các thuộc tính kiểu để tùy chỉnh giao diện của View. View không có thuộc tính kiểu, chẳng hạn như android: textColor, android: textSize và android: background, sẽ sử dụng các kiểu được xác định trong chủ đề của ứng dụng.

Sau đây là các thuộc tính liên quan đến kiểu được sử dụng trong bài học về cách sử dụng trình chỉnh sửa layout:

  • android: background: Chỉ định màu hoặc tài nguyên có thể vẽ được để sử dụng làm nền.
  • android: text: Chỉ định văn bản để hiển thị trong dạng xem.
  • android: textColor: Chỉ định màu văn bản.
  • android: textSize: Chỉ định kích thước văn bản.
  • android: textStyle: Chỉ định kiểu văn bản, chẳng hạn như in đậm.

Resource files

Tệp tài nguyên là một cách tách các giá trị tĩnh khỏi mã để bạn không phải tự thay đổi mã để thay đổi các giá trị. Bạn có thể lưu trữ tất cả các chuỗi, layout, kích thước, màu sắc, kiểu và văn bản menu một cách riêng biệt trong các tệp tài nguyên.

Các tệp tài nguyên được lưu trữ trong các thư mục nằm trong thư mục res khi xem ngăn Project > Android . Các thư mục này bao gồm:

  • drawable: Đối với hình ảnh và biểu tượng
  • layout: Đối với tệp tài nguyên layout
  • menu: Đối với các món trong menu
  • mipmap: Dành cho bộ sưu tập biểu tượng ứng dụng được tính toán trước, tối ưu hóa được 
  • values: Đối với màu sắc, kích thước, chuỗi và kiểu (thuộc tính chủ đề)

Cú pháp để tham chiếu đến một tài nguyên trong một layout XML như sau:

@package_name: resource_type / resource_name

package_name là tên của gói chứa tài nguyên. Tên gói không bắt buộc khi bạn tham chiếu các tài nguyên được lưu trữ trong thư mục res của dự án của bạn, bởi vì các tài nguyên này từ cùng một gói.

resource_type là lớp con R cho kiểu tài nguyên. Xem Các loại tài nguyên để biết thêm về các loại tài nguyên và cách tham chiếu chúng.

resource_name là tên tệp tài nguyên không có phần mở rộng hoặc giá trị thuộc tính android: name trong phần tử XML.

Ví dụ: câu lệnh layout XML sau đây đặt thuộc tính android: text thành tài nguyên chuỗi:

  • android: text = “@ string / button_label_toast”
  • Không có package_name nào được bao gồm, vì tài nguyên được lưu trữ trong tệp string.xml trong dự án.
  • Resource_type là một chuỗi.
  • Resource_name là button_label_toast.

Một ví dụ khác: câu lệnh layout XML này đặt thuộc tính android: background thành tài nguyên màu và vì tài nguyên được xác định trong dự án (trong tệp color.xml), nên tên_gói không được chỉ định:

android: background = “@ color / colorPrimary”

Trong ví dụ sau, câu lệnh layout XML đặt thuộc tính android: textColor thành tài nguyên màu. Tuy nhiên, tài nguyên không được xác định trong dự án mà do Android cung cấp, vì vậy bạn cần chỉ định package_name, là android, theo sau là dấu hai chấm:

android: textColor = “@ android: color / white”

Mẹo: Để biết thêm về cách truy cập tài nguyên từ mã, hãy xem Truy cập tài nguyên. Đối với các hằng số màu của Android, hãy xem tài nguyên R.color tiêu chuẩn của Android.

Values resource files

Giữ các giá trị như chuỗi và màu trong các tệp tài nguyên riêng biệt giúp bạn dễ dàng quản lý chúng hơn, đặc biệt nếu bạn sử dụng chúng nhiều lần trong layout của mình.

Ví dụ: điều cần thiết là giữ các chuỗi trong một tệp tài nguyên riêng biệt để dịch và bản địa hóa ứng dụng của bạn, để bạn có thể tạo tệp tài nguyên chuỗi cho từng ngôn ngữ mà không cần thay đổi mã của mình. Các tệp tài nguyên cho hình ảnh, màu sắc, kích thước và các thuộc tính khác rất hữu ích để phát triển ứng dụng cho các kích thước và hướng màn hình thiết bị khác nhau.

Strings

Tài nguyên chuỗi nằm trong tệp string.xml (bên trong res> giá trị trong ngăn Dự án> Android). Bạn có thể chỉnh sửa tệp này trực tiếp bằng cách mở tệp trong ngăn trình chỉnh sửa:

<resources>

    <string name = “app_name”> Xin chào bánh mì nướng </string>

    <string name = “button_label_count”> Đếm </string>

    <string name = “button_label_toast”> Bánh mì nướng </string>

    <string name = “count_initial_value”> 0 </string>

</resources>

Tên (ví dụ: button_label_count) là tên tài nguyên bạn sử dụng trong mã XML của mình, như trong thuộc tính sau:

android: text = “@ string / button_label_count”

Giá trị chuỗi của tên này là từ (Đếm) nằm trong các thẻ <string> </string>. (Bạn không sử dụng dấu ngoặc kép trừ khi dấu ngoặc kép là một phần của chuỗi value.)

Trích xuất chuỗi vào tài nguyên

Bạn cũng nên trích xuất các chuỗi được mã hóa cứng trong tệp layout XML thành tài nguyên chuỗi. Trích xuất tài nguyên chuỗi

Layouts và Resource cho UI android

Để trích xuất một chuỗi được mã hóa cứng trong một layout XML, hãy làm theo các bước sau, như thể hiện trong hình trên:

  • Nhấp vào chuỗi được code cưng và nhấn Alt-Enter trong Windows hoặc Option-Return trong Mac OS X.
  • Chọn Trích xuất tài nguyên chuỗi.
  • Chỉnh sửa tên Tài nguyên cho giá trị chuỗi.

Sau đó, bạn có thể sử dụng tên tài nguyên trong mã XML của mình. Sử dụng biểu thức “@ string / resource_name” (bao gồm cả dấu ngoặc kép) để tham chiếu đến tài nguyên chuỗi:

android: text = “@ string / button_label_count”

Colors

Tài nguyên màu nằm trong tệp color.xml (bên trong res> giá trị trong ngăn Dự án> Android). Bạn có thể chỉnh sửa tệp này trực tiếp trong ngăn trình chỉnh sửa:

<resources>

    <color name = “colorPrimary”> # 3F51B5 </color>

    <color name = “colorPrimaryDark”> # 303F9F </color>

    <color name = “colorAccent”> # FF4081 </color>

    <color name = “myBackgroundColor”> # FFF043 </color>

</resources>

Tên (ví dụ: colorPrimary) là tên tài nguyên bạn sử dụng trong mã XML của mình:

android: textColor = “@ color / colorPrimary”

Giá trị màu của tên này là giá trị màu thập lục phân (# 3F51B5) nằm trong thẻ <color> </color>. Giá trị thập lục phân chỉ định các giá trị đỏ, lục và lam (RGB). Giá trị luôn bắt đầu bằng ký tự pound (#), theo sau là thông tin Alpha-Red-Green-Blue. Ví dụ: giá trị thập lục phân cho màu đen là # 000000, trong khi giá trị thập lục phân cho biến thể của màu xanh da trời là # 559fe3. Giá trị màu cơ bản được liệt kê trong tài liệu Lớp màu.

Màu colorPrimary là một trong những màu cơ bản được xác định trước và được sử dụng cho thanh ứng dụng. Ví dụ: trong một ứng dụng sản xuất, bạn có thể tùy chỉnh điều này để phù hợp với thương hiệu của mình. Sử dụng màu cơ bản cho các phần tử giao diện người dùng khác sẽ tạo ra một giao diện người dùng đồng nhất.

Mẹo: Để biết thông số kỹ thuật về Material Design cho các màu Android, hãy xem Kiểu và Sử dụng Chủ đề Material. Để biết các giá trị thập lục phân màu phổ biến, hãy xem Mã màu hệ lục phân màu. Đối với các hằng số màu của Android, hãy xem tài nguyên R.color tiêu chuẩn của Android.

Bạn có thể thấy một khối nhỏ lựa chọn màu ở lề trái bên cạnh phần khai báo tài nguyên màu trong Colors.xml và cả ở lề trái bên cạnh thuộc tính sử dụng tên tài nguyên trong tệp XML layout. Các khối màu trong tệp tài nguyên

Layouts và Resource cho UI android

Mẹo: Để xem màu trong cửa sổ bật lên, hãy bật tính năng Tài liệu tự động tải lên. Preferences > Editor > General > Code Completion, và chọn tùy chọn “Autopopup documentation in (ms)”. Sau đó, bạn có thể di con trỏ qua tên tài nguyên màu để xem màu.

Dimensions

Để quản lý tài nguyên dễ dàng hơn, bạn nên tách các thứ nguyên khỏi mã của mình, đặc biệt nếu bạn cần điều chỉnh layout của mình cho các thiết bị có mật độ màn hình khác nhau. Giữ các thứ nguyên tách biệt với mã cũng giúp bạn dễ dàng định kích thước nhất quán cho các phần tử giao diện người dùng và thay đổi kích thước của nhiều phần tử bằng cách thay đổi tài nguyên một thứ nguyên.

Tài nguyên thứ nguyên nằm trong tệp mens.xml (bên trong res> giá trị trong ngăn Dự án> Android). Thực tế, tệp mens.xml có thể là một thư mục chứa nhiều hơn một tệp mens.xml — một tệp cho mỗi độ phân giải màn hình thiết bị. Bạn có thể chỉnh sửa trực tiếp từng tệp mens.xml:

<resources>

    <dimen name = “activity_horizontal_margin”> 16dp </dimen>

    <dimen name = “activity_vertical_margin”> 16dp </dimen>

    <dimen name = “my_view_width”> 300dp </dimen>

    <dimen name = “count_text_size”> 200sp </dimen>

    <dimen name = “counter_height”> 300dp </dimen>

</resources>

Tên (ví dụ: activity_horizontal_margin) là tên tài nguyên bạn sử dụng trong mã XML:

android: paddingLeft = “@ dimen / activity_horizontal_margin”

Giá trị của tên này là phép đo (16dp) nằm trong các thẻ <dimen> </dimen>.

Bạn có thể trích xuất các thứ nguyên theo cách tương tự như chuỗi:

  1. Nhấp vào thứ nguyên được mã hóa cứng và nhấn Alt-Enter trong Windows hoặc nhấn Option-Return trong Mac OS X.
  2. Chọn Trích xuất tài nguyên thứ nguyên.
  3. Chỉnh sửa tên Tài nguyên cho giá trị thứ nguyên.

Pixel không phụ thuộc vào mật độ (dp) không phụ thuộc vào độ phân giải của màn hình. Ví dụ: 10px (10 pixel cố định) trông nhỏ hơn rất nhiều trên màn hình có độ phân giải cao hơn, nhưng Android chia tỷ lệ 10dp (10 pixel độc lập với thiết bị) để trông phù hợp trên các màn hình có độ phân giải khác nhau. Kích thước văn bản cũng có thể được đặt để trông phù hợp trên các màn hình có độ phân giải khác nhau bằng cách sử dụng kích thước pixel (sp) được chia tỷ lệ.

Mẹo: Để biết thêm thông tin về các đơn vị dp và sp, hãy xem Hỗ trợ các mật độ khác nhau.

Styles

Kiểu là một tài nguyên chỉ định các thuộc tính chung như chiều cao, phần đệm, màu phông chữ, cỡ chữ, màu nền. Kiểu dành cho các thuộc tính sửa đổi giao diện của View.

Kiểu được xác định trong tệp styles.xml (bên trong res > values trong ngăn Project > Android). Bạn có thể chỉnh sửa tệp này trực tiếp. Phong cách được đề cập trong chương sau, cùng với Đặc điểm thiết kế vật liệu.

Các tệp tài nguyên khác

Android Studio xác định các tài nguyên khác được đề cập trong các chương khác:

Hình ảnh và biểu tượng: Thư mục có thể vẽ cung cấp tài nguyên biểu tượng và hình ảnh. Nếu ứng dụng của bạn không có thư mục có thể vẽ, bạn có thể tạo thủ công nó bên trong thư mục res. Để biết thêm thông tin về tài nguyên có thể vẽ, hãy xem Tài nguyên có thể vẽ trong phần Tài nguyên ứng dụng của Hướng dẫn dành cho nhà phát triển Android.

Optimized icons: Thư mục mipmap thường chứa các bộ sưu tập biểu tượng ứng dụng được tính toán trước, được tối ưu hóa được Trình khởi chạy sử dụng. Mở rộng thư mục để xem các phiên bản của biểu tượng được lưu trữ dưới dạng tài nguyên cho các mật độ màn hình khác nhau.

Menu: Bạn có thể sử dụng tệp tài nguyên XML để xác định các mục menu và lưu trữ chúng trong dự án của bạn trong thư mục menu. Thực đơn được mô tả trong chương sau.

View clicks

Sự kiện nhấp chuột xảy ra khi người dùng chạm hoặc nhấp vào View có thể nhấp, chẳng hạn như Nút, ImageButton, ImageView hoặc FloatingActionButton. Khi một sự kiện như vậy xảy ra, mã của bạn sẽ thực hiện một hành động. Để làm cho mẫu này hoạt động, bạn phải:

Viết một phương thức Java thực hiện hành động cụ thể mà bạn muốn ứng dụng thực hiện khi sự kiện này xảy ra. Phương thức này thường được gọi là trình xử lý sự kiện.

Liên kết phương thức xử lý sự kiện này với Dạng xem, để phương thức thực thi khi sự kiện xảy ra.

onClick attribute

Android Studio cung cấp lối tắt để thiết lập View có thể nhấp và để liên kết trình xử lý sự kiện với View: sử dụng thuộc tính android: onClick trong layout XML.

Ví dụ: thuộc tính XML sau đặt một Nút có thể nhấp được và đặt showToast () làm trình xử lý sự kiện:

<Button

    android: id = “@ + id / button_toast”

    android: onClick = “showToast”

/>

Khi người dùng nhấn vào Button button_toast, thuộc tính android: onClick của nút sẽ gọi phương thức showToast (). Để hoạt động với thuộc tính android: onClick, phương thức showToast () phải là public và trả về void. Để biết View được gọi là phương thức nào, phương thức showToast () phải yêu cầu một tham số view.

Android Studio cung cấp lối tắt để tạo sơ khai trình xử lý sự kiện (trình giữ chỗ cho một phương thức mà bạn có thể điền vào sau này) trong mã cho Hoạt động được liên kết với layout XML. Làm theo các bước sau:

  • Bên trong tệp layout XML (chẳng hạn như activity_main.xml), hãy nhấp vào tên phương thức trong câu lệnh thuộc tính android: onClick (showToast trong đoạn mã XML ở trên).
  • Nhấn Alt-Enter trong Windows hoặc Option-Return trong Mac OS X và chọn Tạo trình xử lý sự kiện onClick.
  • Chọn Hoạt động được liên kết với tệp layout (chẳng hạn như MainActivity) và bấm OK. Android Studio tạo một sơ đồ phương thức giữ chỗ trong MainActivity.java như được hiển thị bên dưới.

public void showToast (View View) {

        // Làm gì đó để đáp lại cú nhấp vào nút.

}

View update

Để cập nhật View, ví dụ như để thay thế văn bản trong View văn bản, mã của bạn trước tiên phải khởi tạo một đối tượng từ View. Sau đó, mã của bạn có thể cập nhật đối tượng, đối tượng này sẽ cập nhật màn hình.

Để tham chiếu đến View trong mã của bạn, hãy sử dụng phương thức findViewById () của lớp View, phương thức này tìm kiếm View dựa trên id tài nguyên. Ví dụ: câu lệnh sau đặt mShowCount là TextView trong layout với id tài nguyên show_count:

mShowCount = (TextView) findViewById (R.id.show_count);

Từ thời điểm này, mã của bạn có thể sử dụng mShowCount để đại diện cho TextView, để khi bạn cập nhật mShowCount, TextView sẽ được cập nhật.

Ví dụ: khi nút sau với thuộc tính android: onClick được nhấn, onClick sẽ gọi phương thức countUp ():

android: onClick = “countUp”

Bạn có thể triển khai countUp () để tăng số lượng, chuyển đổi số lượng thành một chuỗi và đặt chuỗi làm văn bản cho đối tượng mShowCount:

public void countUp (View view) {

        mCount ++;

        if (mShowCount! = null)

            mShowCount.setText (Integer.toString (mCount));

}

Vì bạn đã liên kết mShowCount với TextView để hiển thị số lượng, phương thức mShowCount.setText () sẽ cập nhật TextView trên màn hình.

Quý khách có thể tham khảo hơn ở các dịch vụ do websitehcm.com cung cấp như: dịch vụ seo, dịch vụ viết content , dịch vụ chăm sóc website, dịch vụ thiết kế website 

Leave a Reply