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

ลองใช้วิธีแบบ Compose
Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีใช้ข้อความในฟีเจอร์ช่วยเขียน

วิดเจ็ตแว่นขยายพร้อมใช้งานใน 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);

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

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

Kotlin

view.setBackgroundColor(...)

Java

view.setBackgroundColor(...);

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

Kotlin

view.post { magnifier.update() }

Java

view.post(magnifier::update);

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

Kotlin

magnifier.dismiss()

Java

magnifier.dismiss();

ขยายการโต้ตอบของผู้ใช้

Use Case ทั่วไปสำหรับแว่นขยายคือการอนุญาตให้ผู้ใช้ขยายพื้นที่มุมมองโดยการแตะ ดังที่แสดงในรูปที่ 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 ลองพิจารณาสิ่งเหล่านี้

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