Hỗ trợ nội dung có thể điều chỉnh theo kích thước của người dùng

Triển khai cử chỉ chụm để thu phóng nhằm hỗ trợ nội dung có thể mở rộng trong ứng dụng. Đây là phương thức tiêu chuẩn, nhất quán trên nền tảng để cải thiện khả năng hỗ trợ tiếp cận, cho phép người dùng điều chỉnh kích thước văn bản và các phần tử trên giao diện người dùng một cách trực quan cho phù hợp với nhu cầu của họ. Ứng dụng của bạn có thể xác định hành vi điều chỉnh tỷ lệ tuỳ chỉnh với khả năng kiểm soát chi tiết và hành vi theo bối cảnh, mang lại trải nghiệm mà người dùng thường khám phá nhanh hơn so với một tính năng ở cấp hệ thống như phóng to màn hình.

Chọn một chiến lược mở rộng quy mô

Các chiến lược được đề cập trong hướng dẫn này khiến giao diện người dùng sắp xếp lại và tổ chức lại để phù hợp với chiều rộng màn hình. Điều này mang lại lợi ích đáng kể về khả năng hỗ trợ tiếp cận bằng cách loại bỏ nhu cầu xoay ngang và chuyển động "zig-zag" gây khó chịu mà nếu không có thì bạn sẽ phải thực hiện để đọc các dòng văn bản dài.

Đọc thêm: Nghiên cứu xác nhận rằng đối với người dùng có thị lực kém, nội dung được sắp xếp lại dễ đọc và dễ điều hướng hơn đáng kể so với những giao diện yêu cầu thao tác xoay hai chiều. Để biết thêm thông tin, hãy xem bài viết So sánh nội dung có thể thu phóng và nội dung có thể tái cấu trúc trên thiết bị di động.

Điều chỉnh tỷ lệ của tất cả phần tử hoặc chỉ phần tử văn bản

Bảng sau đây minh hoạ hiệu ứng hình ảnh của từng chiến lược mở rộng quy mô.

Đề xuất

Giờ đây, sau khi xem xét những điểm khác biệt về mặt hình ảnh, bảng sau đây sẽ giúp bạn cân nhắc những điểm đánh đổi và chọn chiến lược phù hợp nhất cho nội dung của mình.

Phát hiện cử chỉ thu phóng trong Jetpack Compose

Để hỗ trợ nội dung có thể mở rộng quy mô cho người dùng, trước tiên, bạn phải phát hiện cử chỉ nhiều điểm chạm. Trong Jetpack Compose, bạn có thể thực hiện việc này bằng cách sử dụng Modifier.transformable.

Đối tượng sửa đổi transformable là một API cấp cao cung cấp delta zoomChange kể từ sự kiện cử chỉ gần đây nhất. Điều này giúp đơn giản hoá logic cập nhật trạng thái thành tích luỹ trực tiếp (ví dụ: scale *= zoomChange), khiến nó trở nên lý tưởng cho các chiến lược mở rộng quy mô thích ứng được đề cập trong hướng dẫn này.

Ví dụ về cách triển khai

Các ví dụ sau đây cho thấy cách triển khai các chiến lược điều chỉnh mật độ và điều chỉnh phông chữ.

Chia tỷ lệ mật độ

Phương pháp này điều chỉnh tỷ lệ density cơ bản của một vùng trên giao diện người dùng. Do đó, tất cả các phép đo dựa trên bố cục (bao gồm cả khoảng đệm, khoảng cách và kích thước thành phần) đều được điều chỉnh tỷ lệ, như thể kích thước hoặc độ phân giải màn hình đã thay đổi. Vì kích thước văn bản cũng phụ thuộc vào mật độ, nên kích thước này cũng được điều chỉnh tỷ lệ tương ứng. Chiến lược này sẽ hiệu quả khi bạn muốn mở rộng đồng đều tất cả các phần tử trong một khu vực cụ thể, duy trì nhịp điệu và tỷ lệ hình ảnh tổng thể của giao diện người dùng.

private class DensityScalingState(
    // Note: For accessibility, typical min/max values are ~0.75x and ~3.5x.
    private val minScale: Float = 0.75f,
    private val maxScale: Float = 3.5f,
    private val currentDensity: Density
) {
    val transformableState = TransformableState { zoomChange, _, _ ->
        scaleFactor.floatValue =
            (scaleFactor.floatValue * zoomChange).coerceIn(minScale, maxScale)
    }
    val scaleFactor = mutableFloatStateOf(1f)
    fun scaledDensity(): Density {
        return Density(
            currentDensity.density * scaleFactor.floatValue,
            currentDensity.fontScale
        )
    }
}
ScalableContentSnippets.kt

Tỷ lệ phông chữ

Chiến lược này nhắm đến mục tiêu cụ thể hơn, chỉ sửa đổi hệ số fontScale. Kết quả là chỉ các phần tử văn bản tăng hoặc giảm kích thước, trong khi tất cả các thành phần bố cục khác (chẳng hạn như vùng chứa, khoảng đệm và biểu tượng) vẫn giữ nguyên kích thước cố định. Chiến lược này rất phù hợp để cải thiện khả năng đọc văn bản trong các ứng dụng có nhiều nội dung đọc.

class FontScaleState(
    // Note: For accessibility, typical min/max values are ~0.75x and ~3.5x.
    private val minScale: Float = 0.75f,
    private val maxScale: Float = 3.5f,
    private val currentDensity: Density
) {
    val transformableState = TransformableState { zoomChange, _, _ ->
        scaleFactor.floatValue =
            (scaleFactor.floatValue * zoomChange).coerceIn(minScale, maxScale)
    }
    val scaleFactor = mutableFloatStateOf(1f)
    fun scaledFont(): Density {
        return Density(
            currentDensity.density,
            currentDensity.fontScale * scaleFactor.floatValue
        )
    }
}
ScalableContentSnippets.kt

Giao diện người dùng minh hoạ dùng chung

Đây là thành phần kết hợp DemoCard dùng chung mà cả hai ví dụ trước đều sử dụng để làm nổi bật các hành vi thu phóng khác nhau.

@Composable
private fun DemoCard() {
    Card(
        modifier = Modifier
            .width(360.dp)
            .padding(16.dp),
        shape = RoundedCornerShape(12.dp)
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Text("Demo Card", style = MaterialTheme.typography.headlineMedium)
            var isChecked by remember { mutableStateOf(true) }
            Row(verticalAlignment = Alignment.CenterVertically) {
                Text("Demo Switch", Modifier.weight(1f), style = MaterialTheme.typography.bodyLarge)
                Switch(checked = isChecked, onCheckedChange = { isChecked = it })
            }
            Row(verticalAlignment = Alignment.CenterVertically) {
                Icon(Icons.Filled.Person, "Icon", Modifier.size(32.dp))
                Spacer(Modifier.width(8.dp))
                Text("Demo Icon", style = MaterialTheme.typography.bodyLarge)
            }
            Row(
                Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Box(
                    Modifier
                        .width(100.dp)
                        .weight(1f)
                        .height(80.dp)
                        .background(Color.Blue)
                )
                Box(
                    Modifier
                        .width(100.dp)
                        .weight(1f)
                        .height(80.dp)
                        .background(Color.Red)
                )
            }
            Text(
                "Demo Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit," +
                    " sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                style = MaterialTheme.typography.bodyMedium,
                textAlign = TextAlign.Justify
            )
        }
    }
}
ScalableContentSnippets.kt

Mẹo và điểm cần cân nhắc

Để tạo trải nghiệm chỉn chu và dễ tiếp cận hơn, hãy cân nhắc những đề xuất sau:

• Cân nhắc việc cung cấp các chế độ kiểm soát tỷ lệ không dùng cử chỉ: Một số người dùng có thể gặp khó khăn khi dùng cử chỉ. Để hỗ trợ những người dùng này, hãy cân nhắc việc cung cấp một cách điều chỉnh hoặc đặt lại tỷ lệ thay thế mà không phụ thuộc vào cử chỉ.
• Tạo cho mọi tỷ lệ: Kiểm thử giao diện người dùng dựa trên cả chế độ cài đặt phông chữ hoặc màn hình trên toàn hệ thống và chế độ mở rộng trong ứng dụng. Kiểm tra để đảm bảo bố cục của ứng dụng thích ứng đúng cách mà không bị hỏng, chồng chéo hoặc ẩn nội dung. Tìm hiểu thêm về cách tạo bố cục thích ứng.