Hiển thị thanh ứng dụng trên cùng

Tạo thanh ứng dụng trên cùng để giúp người dùng điều hướng và truy cập vào các chức năng trong ứng dụng của bạn bằng cách sử dụng thành phần kết hợp TopAppBar.

Khả năng tương thích của phiên bản

Phương thức triển khai này yêu cầu bạn phải đặt minSDK của dự án thành API cấp 21 trở lên.

Phần phụ thuộc

Tạo một thành phần kết hợp cho thanh ứng dụng trên cùng

Tạo một thanh ứng dụng trên cùng bằng thành phần kết hợp MediumTopAppBar. Thành phần kết hợp này sẽ thu gọn khi người dùng cuộn xuống khu vực nội dung và mở rộng khi người dùng cuộn trở lại đầu nội dung:

Các điểm chính về mã

  • Scaffold bên ngoài có TopBar được đặt.
  • Một tiêu đề bao gồm một phần tử Text.
  • Một thanh trên cùng với một hành động được xác định.
  • Một thao tác IconButton với lambda onClick để thực hiện thao tác.
  • IconButton chứa Icon có hình ảnh biểu tượng và văn bản mô tả nội dung.
  • Hành vi cuộn cho nội dung bên trong của Scaffold được xác định là enterAlwaysScrollBehavior(). Thao tác này sẽ thu gọn thanh ứng dụng khi người dùng kéo nội dung bên trong lên và mở rộng thanh ứng dụng khi người dùng kéo nội dung bên trong xuống.
  • Ngoài MediumTopBar chứa tiêu đề, bạn cũng có thể sử dụng:
    • TopAppBar: dùng cho các màn hình không yêu cầu nhiều thao tác điều hướng hoặc hành động.
    • CenterAlignedTopAppBar: dùng cho các màn hình có một thao tác chính.Tiêu đề được căn giữa trong thành phần.
    • MediumTopAppBar: dùng cho các màn hình yêu cầu số lượng thao tác và điều hướng vừa phải.
    • LargeTopAppBar: dùng cho các màn hình yêu cầu nhiều thao tác và thao tác điều hướng. Sử dụng khoảng đệm nhiều hơn MediumTopAppBar và đặt tiêu đề bên dưới mọi biểu tượng bổ sung.

Kết quả

Hình 1. Thanh ứng dụng trên cùng có kích thước trung bình.

Các bộ sưu tập chứa hướng dẫn này

Hướng dẫn này là một phần của các bộ sưu tập Hướng dẫn nhanh được tuyển chọn này, bao gồm các mục tiêu phát triển Android rộng hơn:

Tìm hiểu cách sử dụng một nền tảng chuẩn hoá để xây dựng giao diện người dùng phức tạp. Khung này kết hợp các phần khác nhau của giao diện người dùng, mang đến cho ứng dụng một giao diện nhất quán.
Bộ sưu tập hướng dẫn nhanh
Tìm hiểu cách các hàm có khả năng kết hợp giúp bạn dễ dàng tạo các thành phần giao diện người dùng đẹp mắt dựa trên hệ thống thiết kế Material Design.
Bộ sưu tập hướng dẫn nhanh

Bạn có câu hỏi hoặc ý kiến phản hồi

Truy cập vào trang câu hỏi thường gặp để tìm hiểu về các hướng dẫn nhanh hoặc liên hệ với chúng tôi để cho chúng tôi biết suy nghĩ của bạn.
Chuyển đến phần Câu hỏi thường gặp Để lại ý kiến phản hồi