ใช้แว่นขยายข้อความ

ลองใช้วิธีการเขียน
Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีใช้ข้อความในการเขียน
Modifier.magnifier() →

วิดเจ็ตแว่นขยายมีให้ใช้งานใน Android 9 (API ระดับ 28) ขึ้นไป แว่นขยายเสมือนจริงที่แสดงสำเนาแบบขยายของ View ผ่าน หน้าต่างซ้อนทับที่แสดงเลนส์ ฟีเจอร์นี้ช่วยปรับปรุงการแทรกข้อความ และประสบการณ์ของผู้ใช้ เมื่อใช้แว่นขยายกับข้อความ ผู้ใช้สามารถ วางเคอร์เซอร์หรือแฮนเดิลการเลือกอย่างแม่นยำด้วยการดูแบบขยาย ข้อความในแผงที่ตามนิ้วของผู้ใช้

รูปที่ 1 แสดงวิธีที่แว่นขยายช่วยในการเลือกข้อความ API แว่นขยาย ไม่ได้เชื่อมโยงกับข้อความ และคุณสามารถใช้วิดเจ็ตนี้ได้ในหลากหลายกรณีใช้งาน เช่น อ่านข้อความเล็กๆ หรือขยายชื่อสถานที่ซึ่งมองไม่เห็นยากบนแผนที่

วันที่ รูปภาพแสดงลักษณะที่แว่นขยายจะปรากฏขึ้นหลังจากจับแฮนเดิลการเลือกที่ถูกต้อง
รูปที่ 1 ข้อความขยาย เมื่อผู้ใช้ลากส่วนที่เลือกไปทางขวา ที่จับ แว่นขยายจะป๊อปอัปขึ้นมาเพื่อช่วยจัดตำแหน่งที่แม่นยำ

แว่นขยายผสานรวมกับวิดเจ็ตแพลตฟอร์มแล้ว เช่น TextView EditText และ WebView ช่วยให้จัดการข้อความในแอปต่างๆ ได้อย่างสอดคล้องกัน วิดเจ็ตนี้มาพร้อมกับ API แบบง่ายและใช้เพื่อขยาย View ใดก็ได้ ตามบริบทของแอป

การใช้ API

คุณสามารถใช้แว่นขยายแบบเป็นโปรแกรมในมุมมองที่กำหนดเองได้ดังนี้

Kotlin

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

Java

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

สมมติว่าลำดับชั้นของมุมมองมีเลย์เอาต์แบบแรก แว่นขยายจะแสดงใน และมีภูมิภาคที่มีจุดศูนย์กลางอยู่ที่พิกัดภายในมุมมอง แผงจะปรากฏขึ้นเหนือจุดกึ่งกลางของเนื้อหาที่กำลังคัดลอก แว่นขยายจะคงอยู่ตลอดไปจนกว่าผู้ใช้จะปิด

ข้อมูลโค้ดต่อไปนี้จะแสดงวิธีเปลี่ยนพื้นหลังของภาพที่ขยาย มุมมอง:

Kotlin

view.setBackgroundColor(...)

Java

view.setBackgroundColor(...);

สมมติว่าแว่นขยายสามารถมองเห็นสีพื้นหลังได้ เนื้อหาเก่าเกินไป เนื่องจากเป็นส่วนของมุมมองที่มีพื้นหลังเก่าอยู่นิ่งๆ จอแสดงผล ในการรีเฟรชเนื้อหา ให้ใช้ update() ดังนี้

Kotlin

view.post { magnifier.update() }

Java

view.post(magnifier::update);

เมื่อเสร็จแล้ว ให้ปิดแว่นขยายโดยเรียก เมธอด dismiss():

Kotlin

magnifier.dismiss()

Java

magnifier.dismiss();

ขยายเมื่อโต้ตอบกับผู้ใช้

กรณีการใช้งานทั่วไปของแว่นขยายคือการให้ผู้ใช้ขยายพื้นที่การดูตาม แตะอุปกรณ์ ดังที่แสดงในรูปที่ 2

รูปที่ 2 แว่นขยายจะทำตามการแตะของผู้ใช้ ใช่เลย ใช้กับ ViewGroup ที่มี "ImageView" ทางด้านซ้าย และ TextView ทางด้านขวา

โดยอัปเดตแว่นขยายตามกิจกรรมการสัมผัสที่ได้รับ ตามมุมมอง ดังนี้

Kotlin

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
}

Java

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

ข้อควรพิจารณาเพิ่มเติมเมื่อขยายข้อความ

สําหรับวิดเจ็ตข้อความของแพลตฟอร์ม คุณต้องทําความเข้าใจแว่นขยายบางอย่าง ลักษณะการทำงาน และเพื่อเปิดใช้แว่นขยายสำหรับมุมมองข้อความที่กำหนดเองอย่างสม่ำเสมอ สำหรับแพลตฟอร์ม Android ลองพิจารณาสิ่งเหล่านี้

  • จะมีการทริกเกอร์แว่นขยายทันทีเมื่อผู้ใช้จับสิ่งที่แทรกเข้ามาหรือ แฮนเดิลการเลือก
  • แว่นขยายจะเลื่อนตามนิ้วของผู้ใช้ในแนวนอนเสมอ ขณะที่ จะมีตำแหน่งอยู่ตรงกึ่งกลางของบรรทัดข้อความปัจจุบันในแนวตั้ง
  • เมื่อเลื่อนในแนวนอน แว่นขยายจะสลับไปมาระหว่างด้านซ้ายกับ ขอบเขตด้านขวาของเส้นปัจจุบัน นอกจากนี้ เมื่อการแตะของผู้ใช้ออก ขอบเขตเหล่านี้และระยะห่างในแนวนอนระหว่างการสัมผัสกับพื้นที่ที่ใกล้ที่สุด ขอบเขตใหญ่กว่าครึ่งหนึ่งของความกว้างเดิมของเนื้อหาแว่นขยาย แว่นขยายปิดอยู่ เนื่องจากเคอร์เซอร์มองไม่เห็นด้านในอีกต่อไป แว่นขยาย
  • แว่นขยายจะไม่เริ่มทำงานเมื่อแบบอักษรข้อความมีขนาดใหญ่เกินไป ข้อความคือ ถือว่าใหญ่เกินไปเมื่อความแตกต่างระหว่างระดับล่างของแบบอักษรกับ ความสูงมากกว่าความสูงของเนื้อหาที่พอดีกับแว่นขยาย การทริกเกอร์แว่นขยายในกรณีนี้ไม่ได้เพิ่มค่าใดๆ