텍스트 돋보기 구현

Compose 방법 사용해 보기

Jetpack Compose는 Android에 권장되는 UI 도구 키트입니다. Compose에서 텍스트를 사용하는 방법을 알아보세요.

Modifier.magnifier() →

Android 9 (API 수준 28) 이상에서 사용할 수 있는 돋보기 위젯은 렌즈를 나타내는 오버레이 창을 통해 View의 확대된 사본을 표시하는 가상 돋보기입니다. 이 기능은 텍스트 삽입 및 선택 사용자 환경을 개선합니다. 텍스트에 돋보기를 적용할 때 사용자는 손가락을 따라 창에서 확대된 텍스트를 보고 커서 또는 선택 핸들을 정확하게 배치할 수 있습니다.

그림 1은 돋보기가 텍스트 선택을 용이하게 하는 방법을 보여줍니다. 돋보기 API는 텍스트에 연결되어 있지 않으며 작은 텍스트를 읽거나 지도에서 잘 보이지 않는 장소 이름을 확대하는 등 다양한 사용 사례에 이 위젯을 사용할 수 있습니다.

돋보기는 이미 TextView, EditText, WebView와 같은 플랫폼 위젯과 통합되었습니다. 앱 전체에서 일관된 텍스트 조작을 제공합니다. 이 위젯은 간단한 API와 함께 제공되며 앱의 컨텍스트에 따라 View를 확대하는 데 사용할 수 있습니다.

API 사용

다음과 같이 임의의 뷰에서 프로그래매틱 방식으로 돋보기를 사용할 수 있습니다.

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

뷰 계층 구조에 첫 번째 레이아웃이 있다고 가정하면 돋보기가 화면에 표시되고 뷰 내의 지정된 좌표를 중심으로 하는 영역이 포함됩니다. 복사되는 콘텐츠의 중심점 위에 창이 표시됩니다. 돋보기는 사용자가 닫을 때까지 무기한 유지됩니다.

다음 코드 스니펫은 확대된 뷰의 배경을 변경하는 방법을 보여줍니다.

view.setBackgroundColor(...)

view.setBackgroundColor(...);

배경 색상이 돋보기 내에 표시된다고 가정하면 이전 배경이 있는 뷰 영역이 계속 표시되므로 돋보기의 콘텐츠가 오래된 것입니다. 콘텐츠를 새로고침하려면 다음과 같이 update() 메서드를 사용하세요.

view.post { magnifier.update() }

view.post(magnifier::update);

완료되면 dismiss() 메서드를 호출하여 돋보기를 닫습니다.

magnifier.dismiss()

magnifier.dismiss();

사용자 상호작용 시 확대

돋보기의 일반적인 사용 사례는 그림 2와 같이 사용자가 뷰 영역을 터치하여 확대할 수 있도록 하는 것입니다.

다음과 같이 뷰에서 수신한 터치 이벤트에 따라 돋보기를 업데이트하면 됩니다.

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

텍스트 확대 시 추가 고려사항

플랫폼 텍스트 위젯의 경우 특정 돋보기 동작을 이해하고 Android 플랫폼에서 맞춤 텍스트 뷰의 돋보기를 일관되게 사용 설정하는 것이 중요합니다. 다음을 고려하세요.

• 돋보기는 사용자가 삽입 또는 선택 핸들을 잡으면 즉시 트리거됩니다.
• 돋보기는 항상 사용자의 손가락을 수평으로 부드럽게 따라가고 수직으로는 현재 텍스트 줄의 중앙에 고정됩니다.
• 수평으로 이동할 때 돋보기는 현재 줄의 왼쪽 및 오른쪽 경계 사이에서만 이동합니다. 또한 사용자의 터치가 이러한 경계를 벗어나고 터치와 가장 가까운 경계 사이의 가로 거리가 돋보기 콘텐츠의 원래 너비의 절반보다 크면 돋보기가 닫힙니다. 커서가 더 이상 돋보기 내부에 표시되지 않기 때문입니다.
• 텍스트 글꼴이 너무 크면 돋보기가 트리거되지 않습니다. 글꼴의 하강과 상승 사이의 차이가 돋보기에 맞는 콘텐츠의 높이보다 크면 텍스트가 너무 큰 것으로 간주됩니다. 이 경우 돋보기를 트리거해도 값이 추가되지 않습니다.