Mengimplementasikan kaca pembesar teks

Coba 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 merepresentasikan lensa. Fitur ini meningkatkan penyisipan teks dan pengalaman pengguna pemilihan. Saat menerapkan kaca pembesar pada teks, pengguna dapat memosisikan kursor atau tuas pemilihan dengan 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. Memungkinkan manipulasi teks yang konsisten di seluruh aplikasi. Widget ini dilengkapi dengan API sederhana dan dapat digunakan untuk memperbesar setiap View, 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 ditampilkan di layar dan berisi area yang berpusat pada koordinat yang diberikan dalam tampilan. Panel akan muncul di atas titik tengah konten yang 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 usang, karena area tampilan dengan latar belakang lama masih ditampilkan. Untuk me-refresh konten, gunakan metode update(), seperti 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 sentuh yang diterima oleh tampilan, seperti 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, jika sentuhan pengguna meninggalkan batas ini dan jarak horizontal antara sentuhan dan batas terdekat lebih besar dari setengah lebar asli konten kaca pembesar, pembesar akan ditutup, karena kursor tidak lagi terlihat di dalam pembesar.
• Kaca pembesar tidak pernah terpicu jika font teks terlalu besar. Teks dianggap terlalu besar jika perbedaan antara penurunan dan penurunan font lebih besar dari tinggi konten yang sesuai di kaca pembesar. Memicu kaca pembesar dalam kasus ini tidak menambah nilai.