Mengimplementasikan kaca pembesar teks

Mencoba cara Compose

Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan teks di Compose.

Modifier.magnifier() →

Tersedia di Android 9 (API level 28) dan yang lebih baru, widget kaca pembesar adalah kaca pembesar virtual yang menampilkan salinan View yang diperbesar melalui panel overlay yang berfungsi sebagai lensa. Fitur ini meningkatkan pengalaman pengguna terkait penyisipan dan pemilihan teks. Saat menerapkan kaca pembesar ke teks, pengguna dapat memosisikan kursor atau tuas pemilihan secara tepat dengan melihat teks yang diperbesar di panel yang mengikuti jari mereka.

Gambar 1 menunjukkan cara kaca pembesar memfasilitasi pemilihan teks. API kaca pembesar tidak terikat dengan teks, dan Anda dapat menggunakan widget ini dalam berbagai kasus penggunaan, seperti membaca teks kecil atau memperbesar nama tempat yang sulit dilihat di peta.

Kaca pembesar sudah terintegrasi dengan widget platform seperti TextView, EditText, dan WebView. Fitur ini memberikan manipulasi teks yang konsisten di seluruh aplikasi. Widget ini dilengkapi dengan API sederhana dan dapat digunakan untuk memperbesar View apa pun, bergantung pada konteks aplikasi Anda.

Penggunaan API

Anda dapat menggunakan kaca pembesar secara terprogram pada tampilan arbitrer sebagai berikut:

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);

Dengan asumsi hierarki tampilan memiliki tata letak pertama, kaca pembesar akan ditampilkan di layar dan berisi area yang berpusat pada koordinat yang diberikan dalam tampilan. Panel akan muncul di atas titik tengah konten yang sedang disalin. Kaca pembesar akan tetap ada tanpa batas waktu hingga pengguna menutupnya.

Cuplikan kode berikut menunjukkan cara mengubah latar belakang tampilan yang diperbesar:

view.setBackgroundColor(...)

view.setBackgroundColor(...);

Dengan asumsi warna latar belakang terlihat di dalam kaca pembesar, konten kaca pembesar akan menjadi tidak aktif, karena area tampilan dengan latar belakang lama masih ditampilkan. Untuk memuat ulang konten, gunakan metode update() sebagai berikut:

view.post { magnifier.update() }

view.post(magnifier::update);

Setelah selesai, tutup kaca pembesar dengan memanggil metode dismiss():

magnifier.dismiss()

magnifier.dismiss();

Memperbesar interaksi pengguna

Kasus penggunaan umum untuk kaca pembesar adalah memungkinkan pengguna memperbesar area tampilan dengan menyentuhnya, seperti yang ditunjukkan pada gambar 2.

Anda dapat melakukannya dengan mengupdate kaca pembesar sesuai dengan peristiwa sentuhan yang diterima oleh tampilan, sebagai berikut:

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;
    }
});

Pertimbangan tambahan saat memperbesar teks

Untuk widget teks platform, penting untuk memahami perilaku kaca pembesar tertentu dan mengaktifkan kaca pembesar untuk tampilan teks kustom Anda secara konsisten di seluruh platform Android. Pertimbangkan hal berikut:

• Kaca pembesar akan langsung dipicu saat pengguna mengambil tuas pemilihan atau penyisipan.
• Kaca pembesar selalu mengikuti jari pengguna secara horizontal dengan lancar, sedangkan secara vertikal berada tetap tengah baris teks saat ini.
• Saat bergerak secara horizontal, kaca pembesar hanya bergerak di antara batas kiri dan kanan baris saat ini. Selain itu, saat sentuhan pengguna meninggalkan batas ini dan jarak horizontal antara sentuhan dan batas terdekat lebih besar dari setengah lebar asli konten kaca pembesar, kaca pembesar akan ditutup, karena kursor tidak lagi terlihat di dalam kaca pembesar.
• Kaca pembesar tidak pernah terpicu jika font teks terlalu besar. Teks dianggap terlalu besar jika perbedaan antara penurunan dan penambahan ukuran font lebih besar dari tinggi konten yang sesuai dengan kaca pembesar. Memicu kaca pembesar dalam hal ini tidak akan memberikan nilai.