Triển khai tính năng phóng to văn bản

Thử cách Compose

Jetpack Compose là bộ công cụ giao diện người dùng được đề xuất cho Android. Tìm hiểu cách sử dụng văn bản trong Compose.

Modifier.magnifier() →

Có trong Android 9 (cấp độ API 28) trở lên, tiện ích kính lúp là một kính lúp ảo hiển thị bản sao phóng to của một View thông qua ngăn lớp phủ lên đại diện cho ống kính. Tính năng này giúp cải thiện trải nghiệm người dùng khi chèn và chọn văn bản. Khi đưa kính lúp đến văn bản, bằng cách phóng đại văn bản trong ngăn theo hướng ngón tay, người dùng có thể định vị chính xác con trỏ hoặc các ô điều khiển lựa chọn.

Hình 1 cho thấy cách kính lúp hỗ trợ việc chọn văn bản. API kính lúp không liên kết với văn bản và bạn có thể dùng tiện ích này trong nhiều trường hợp, chẳng hạn như đọc chữ nhỏ hoặc phóng to các địa danh khó thấy trên bản đồ.

Kính lúp đã được tích hợp với các tiện ích nền tảng như TextView, EditText và WebView. Hỗ trợ thao tác văn bản nhất quán trên các ứng dụng. Tiện ích này đi kèm với một API đơn giản và có thể dùng để phóng to bất kỳ View nào tuỳ thuộc vào ngữ cảnh của ứng dụng.

Sử dụng API

Bạn có thể dùng kính lúp theo lập trình trong một khung hiển thị bất kỳ như sau:

val view: View = findViewById(R.id.view)
val magnifier = Magnifier.Builder(view).build()
magnifier.show(view.width / 2.0f, view.height / 2.0f)

View view = findViewById(R.id.view);
Magnifier magnifier = new Magnifier.Builder(view).build();
magnifier.show(view.getWidth() / 2, view.getHeight() / 2);

Giả sử hệ phân cấp khung hiển thị có bố cục đầu tiên, kính lúp sẽ hiển thị trên màn hình và chứa một vùng nằm giữa toạ độ đã cho trong khung hiển thị. Ngăn này xuất hiện phía trên điểm giữa của nội dung sẽ được sao chép. Kính lúp vẫn tồn tại cho đến khi người dùng đóng lại.

Đoạn mã sau đây cho biết cách thay đổi nền của chế độ xem phóng to:

view.setBackgroundColor(...)

view.setBackgroundColor(...);

Giả sử màu nền có thể nhìn thấy trong kính lúp, thì nội dung của kính lúp đã cũ, vì một vùng của khung hiển thị có nền cũ vẫn hiển thị. Để làm mới nội dung, hãy sử dụng phương thức update() như sau:

view.post { magnifier.update() }

view.post(magnifier::update);

Khi hoàn tất, hãy đóng kính lúp bằng cách gọi phương thức dismiss():

magnifier.dismiss()

magnifier.dismiss();

Phóng to khi người dùng tương tác

Một trường hợp sử dụng phổ biến cho kính lúp là cho phép người dùng phóng to một vùng chế độ xem bằng cách chạm vào vùng đó, như minh hoạ trong hình 2.

Bạn có thể làm điều này bằng cách cập nhật kính lúp theo các sự kiện chạm mà chế độ xem nhận được, như sau:

imageView.setOnTouchListener { v, event ->
  when (event.actionMasked) {
    MotionEvent.ACTION_DOWN, MotionEvent.ACTION_MOVE -> {
      val viewPosition = IntArray(2)
      v.getLocationOnScreen(viewPosition)
      magnifier.show(event.rawX - viewPosition[0], event.rawY - viewPosition[1])
    }
    MotionEvent.ACTION_CANCEL, MotionEvent.ACTION_UP -> {
      magnifier.dismiss()
    }
  }
  true
}

imageView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                // Fall through.
            case MotionEvent.ACTION_MOVE: {
                final int[] viewPosition = new int[2];
                v.getLocationOnScreen(viewPosition);
                magnifier.show(event.getRawX() - viewPosition[0],
                               event.getRawY() - viewPosition[1]);
                break;
            }
            case MotionEvent.ACTION_CANCEL:
                // Fall through.
            case MotionEvent.ACTION_UP: {
                magnifier.dismiss();
            }
        }
        return true;
    }
});

Những cân nhắc khác khi phóng to văn bản

Đối với các tiện ích văn bản nền tảng, bạn cần phải hiểu cách hoạt động cụ thể của kính lúp và bật tính năng phóng to chế độ xem văn bản tuỳ chỉnh theo cách nhất quán trên toàn bộ nền tảng Android. Hãy cân nhắc thực hiện những bước sau:

• Kính lúp sẽ được kích hoạt ngay lập tức khi người dùng tóm lấy phần chèn hoặc ô điều khiển lựa chọn.
• Kính lúp luôn đi theo chiều ngang của ngón tay người dùng một cách trơn tru, trong khi ở chiều dọc, kính lúp được cố định vào chính giữa của dòng văn bản hiện tại.
• Khi di chuyển theo chiều ngang, kính lúp chỉ di chuyển giữa ranh giới bên trái và bên phải của dòng hiện tại. Hơn nữa, khi thao tác chạm của người dùng rời khỏi các ranh giới này và khoảng cách theo chiều ngang giữa vị trí chạm và ranh giới gần nhất lớn hơn một nửa chiều rộng ban đầu của nội dung phóng to, kính lúp sẽ bị loại bỏ vì con trỏ này không còn hiển thị bên trong kính lúp nữa.
• Không thể kích hoạt kính lúp khi phông chữ văn bản quá lớn. Văn bản được coi là quá lớn khi chênh lệch giữa độ sâu (descent) và độ cao (ascent) của phông chữ lớn hơn chiều cao của nội dung vừa với kính lúp. Việc kích hoạt kính lúp trong trường hợp này không làm tăng thêm giá trị.