Bộ chọn giúp người dùng chọn và đặt dữ liệu cụ thể.
Bộ chọn
Bạn nên dùng bộ chọn để cho phép người dùng chọn trong số vô hạn mục.
Theo mặc định, các mục sẽ được lặp lại vô hạn ở cả hai hướng. Hãy cân nhắc tắt hành vi này nếu thứ tự trong danh sách là quan trọng hoặc cho phép người dùng truy cập vào phần tử đầu tiên và cuối cùng bằng cách vuốt nhanh.
Phân tích
Giải phẫu
A. Cột không hoạt động
B. Dấu hai chấm
C. Cột bộ chọn
D. Nội dung hàng đầu
E. Nội dung ở giữa
F. Nội dung ở cuối
Chiều rộng và chiều cao
Nhóm bộ chọn lấp đầy chiều cao và chiều rộng hiện có. Có bốn kiểu bố cục cho các cột bộ chọn. Mỗi bố cục được căn giữa và lấp đầy chiều cao hiện có. Chiều rộng cột được xác định theo chiều rộng cần thiết để phù hợp với số chữ số cần thiết trong phông chữ. Bộ chọn ngày là một trường hợp ngoại lệ, theo chiều ngang, công cụ này sẽ lấp đầy màn hình và tràn ra khỏi cạnh.
Ví dụ: các số sẽ có chiều rộng là '00', sau đó đặt chiều rộng. Ví dụ: đối với các trường văn bản, đối với trường tháng, sẽ được xác định dưới dạng chiều rộng của "MMM" (là chữ cái rộng nhất trong bảng chữ cái Latinh). Do đó, chiều rộng và chiều cao (là chiều cao dòng của kiểu được sử dụng) sẽ bị ảnh hưởng bởi phông chữ được sử dụng.
Các mục trong bộ chọn có kích thước khác nhau trên điểm ngắt.
Cách sử dụng
Xem các ví dụ sau về Bộ chọn ngày và giờ
Để triển khai bộ chọn ngày và giờ được tạo sẵn, hãy xem Thư viện Horologist trên GitHub.
Nếu bạn muốn tạo ra một trải nghiệm tương tự, trong đó người dùng chọn một giá trị gồm nhiều phần trên nhiều bộ chọn, hãy sử dụng thành phần PickerGroup tích hợp sẵn. Đối tượng này sử dụng một đối tượng điều phối tiêu điểm để gán tiêu điểm cho đúng phần tử Bộ chọn.
Bố cục thích ứng (Adaptive Layouts)
Bộ chọn thời gian 24 giờ
Bộ chọn thời gian 12 giờ
Bộ chọn ngày
Hành vi thích ứng
Tăng cỡ chữ
Sau khi vượt qua Điểm ngắt 225+, cỡ chữ của phần tử Bộ chọn sẽ thay đổi. Bản sao trên cùng và dưới cùng trong cột cuộn từng phần sẽ điều chỉnh (A), cũng như bản sao giữa. Dưới đây là một số ví dụ:
Bố cục hai cột
Dưới điểm ngắt 225 dp
Phông chữ: Hiển thị 2
Điểm ngắt trên 225 dp
Phông chữ: Hiển thị 1
Bố cục 3 cột
Dưới điểm ngắt 225 dp
Phông chữ: Hiển thị 3
Trên điểm ngắt 225 dp
Phông chữ: Hiển thị 2
Tăng kích thước chuyển màu
Độ dốc trên cột Bộ chọn được xác định theo độ cao theo không gian hiện có. Cả độ dốc trên cùng và dưới cùng được đặt ở một phần ba (33%) chiều cao hiện có. Điều này có nghĩa là ở mỗi kích thước màn hình hiện có, độ dốc sẽ điều chỉnh theo tỷ lệ. Vị trí độc lập với bố cục cột.
Dưới điểm ngắt 225 dp
Kích thước: 33% chiều cao cột
Trên điểm ngắt 225 dp
Kích thước: 33% chiều cao cột
Tăng khoảng cách cột
Khoảng cách cột sẽ vượt quá Điểm ngắt 225+, bắt đầu từ 2 dp hoặc 4 dp và tăng lên 6 dp. Điều này phụ thuộc vào bố cục bạn đã chọn; bố cục 2 hoặc 3 cột
Bố cục hai cột
Dưới điểm ngắt 225 dp
Khoảng cách cột 4 dp
Trên điểm ngắt 225 dp
Khoảng cách cột 6 dp
Bố cục 3 cột
Dưới điểm ngắt 225 dp
Khoảng cách cột 2 dp
Trên điểm ngắt 225 dp
Khoảng cách cột 6 dp