Zoomlayout: 확대하려면 두 번 탭하세요.

@natario1

지금은 사용자 지정 Gesture Listener 클래스를 사용하여 이 기능을 직접 구현했습니다. 누군가가 필요하면 여기 내 코드 조각이 있습니다.

private GestureDetector gestureDetector; 
private View.OnTouchListener touchListener;
private ZoomImageView selectedImage;

그런 다음 다음 변수를 초기화합니다.

    gestureDetector = new GestureDetector(mContext, new MyGestureListener());

        touchListener = new View.OnTouchListener() {
            <strong i="11">@Override</strong>
            public boolean onTouch(View v, MotionEvent event) {
                // pass the events to the gesture detector
                // a return value of true means the detector is handling it
                // a return value of false means the detector didn't
                // recognize the event
                selectedImage = (ZoomImageView) v;
                return gestureDetector.onTouchEvent(event);

            }
        };

그런 다음 터치 리스너를 zoomimageview 객체에 할당하십시오.

    ZoomImageView image = layout.findViewById(R.id.imageViewItemImageSlider);
    image.setOnTouchListener(touchListener);

다음은 MyGestureListener 클래스입니다.

    class MyGestureListener extends GestureDetector.SimpleOnGestureListener {

//        <strong i="18">@Override</strong>
//        public boolean onDown(MotionEvent event) {
//            Log.d("TAG","onDown: ");
//
//            // don't return false here or else none of the other
//            // gestures will work
//            return true;
//        }
//
//        <strong i="19">@Override</strong>
//        public boolean onSingleTapConfirmed(MotionEvent e) {
//            Log.i("TAG", "onSingleTapConfirmed: ");
//            return true;
//        }
//
//        <strong i="20">@Override</strong>
//        public void onLongPress(MotionEvent e) {
//            Log.i("TAG", "onLongPress: ");
//        }

        <strong i="21">@Override</strong>
        public boolean onDoubleTap(MotionEvent e) {
            Log.i("TAG", "onDoubleTap: ");
            if((selectedImage.getEngine().getZoom() >= 2.75F)) {
                selectedImage.getEngine().zoomTo(1F, true);
            } else if((selectedImage.getEngine().getZoom() < 1F)) {
                selectedImage.getEngine().zoomTo(1F, true);
            }  else {
                selectedImage.getEngine().zoomBy(2F, true);
            }

            return true;
        }

//        <strong i="22">@Override</strong>
//        public boolean onScroll(MotionEvent e1, MotionEvent e2,
//                                float distanceX, float distanceY) {
//            Log.i("TAG", "onScroll: ");
//            return true;
//        }

//        <strong i="23">@Override</strong>
//        public boolean onFling(MotionEvent event1, MotionEvent event2,
//                               float velocityX, float velocityY) {
//            Log.d("TAG", "onFling: ");
//            return true;
//        }
    }

ZoomImageView의 터치 이벤트와 충돌하여 문제를 생성하므로 처리할 것이 없는 onScroll(MUST) 및 기타 방법(내 경우에는 선택 사항)을 재정의할 때 수행하십시오.

이것이 도움이 되기를 바랍니다.

저는 현재 이벤트가 완료된 화면 중앙에 두 번 탭하는 것에 반응하고 있습니다.

다음을 추가하기만 하면 됩니다.

    private val simpleGestureDetector = GestureDetector(context, object : GestureDetector.SimpleOnGestureListener() {


        //here is the method for double tap


        override fun onDoubleTap(e: MotionEvent): Boolean {

            Log.d("OnDoubleTapListener", "onDoubleTap")
            centerElement(e.x.absoluteValue,e.y.absoluteValue)
            return true
        }

    })

    fun centerElement(clickedX: Float, clickedY: Float) {
        val offsetX = (width.absoluteValue) / 2
        val offsetY = (height.absoluteValue) / 2
        val displacedX = engine.panX.absoluteValue
        val displacedY = engine.panY.absoluteValue
        val x = (displacedX + clickedX / engine.realZoom) - (offsetX / engine.realZoom)
        val y = (displacedY + clickedY / engine.realZoom) - (offsetY / engine.realZoom)
        val desiredX = if (x > 0) -x else 0f
        val desiredY = if (y > 0) -y else 0f
        engine.moveTo(engine.zoom, desiredX, desiredY, true)
    }

이제 올바르게 이동하고 확대/축소하려고 합니다. 작동하게 하려면 풀 리퀘스트를 열 수 있습니다.

@AlvaroFalcon 멋지네요 ! 몇 가지 팁을 드릴 수 있습니다.

• ZoomEngine 에 이미 스크롤 및 플링에 반응하는 제스처 감지기가 있습니다.
• onScale() 내부의 논리를 99% 재사용할 수 있다고 생각합니다. 스케일 제스처의 중심 좌표와 함께 작동하고 확대/축소 요소를 적용합니다. 확대/축소 요소를 직접 할당해야 하지만( zoomIn() 는 1.3을 사용한다고 생각합니다) 거의 동일한 작업입니다.
• 이것은 적어도 두 가지 옵션("없음" 및 "줌")이 있어야 하는 XML 속성( doubleTapBehavior ?)을 통해 구성할 수 있어야 합니다. 이미 lib를 사용하고 있는 사람을 위해 이것을 변경하지 않도록 기본값으로 none을 사용합시다.

@natario1 멋지다! 시간나면 해봐야지...

저는 현재 확대/축소 레이아웃을 확장하는 클래스로 프로젝트에서 작업 중이므로 거기에 논리를 추가합니다.
나는 그것을 사용하여 동시에 움직임과 함께 확대/축소를 시도하고 있지만 현재로서는 운이 없습니다.

팁 감사합니다!

moveTo() 메서드에 작업을 추가할 수 있습니까? 끝나면 호출하는 방식이 더 유연해서 여러 일을 할 수 있을 것 같아요.

음, moveTo, zoomBy, zoomTo 등...

다음과 같을 수 있습니다.

moveTo(zoom, x, y, action : ()->Unit={})

@AlvaroFalcon Kotlin에서는 그렇게 할 것이지만 이것은 여전히 ​​순수한 Java입니다. 하지만 앞으로 Kotlin으로 이동할 것입니다. 현재로서는 누구나 액세스할 수 있는 onIdle() 이 있습니다.

@AlvaroFalcon 줌과 팬을 동시에 달성할 수 있었습니까? 코드를 공유하시겠습니까?

더블 탭과 핀치 투 줌을 모두 구현했습니다. 작동 솔루션의 핵심은 탭/더블 탭 제스처 감지기를 확대/축소 레이아웃 내부의 콘텐츠 보기에 연결하고 클릭 가능한 자식이 true로 설정되도록 확대/축소 레이아웃을 구성하는 것입니다. 그런 다음 콘텐츠 보기의 onTouchEvent에서 true를 반환하여 터치 이벤트를 사용하고 제스처 감지기로 전달합니다. 이렇게 하면 핀치, 확대/축소 및 두 번 탭이 동시에 작동합니다. 두 번 탭하여 확대하는 것은 문제가 되지 않습니다.

그러나 두 번 탭한 영역으로 확대/축소를 시도했는데 ZoomEngine.moveTo 가 구현된 방식을 감안할 때 확대/축소 및 팬의 동시 보간이 올바르게 작동하지 않고 이미지가 다른 경로를 따라 이동하여 도달합니다. 대상 줌 및 팬. 시각적으로 보기에 좋지는 않지만 무슨 일이 일어나고 있는지 알 수 없습니다. 보간 알고리즘은 애니메이션의 일부가 아니라 실제 확대/축소가 무엇인지에 따라 실제 팬을 다르게 계산해야 한다고 생각합니다.

두 번 탭한 영역 확대

네, 그게 바로 제가 하려고 했던 것입니다. @natario1을 수행하는 방법에 대한 제안 사항이 있습니까?

안녕하세요 @mman

또한 사용자가 화면을 탭할 때 자동으로 확대/축소되는 방식과 종료 위치를 향해 소용돌이치는 형태로 확대되는 애니메이션을 구현했습니다.

우리가 이 애니메이션을 제어할 수 있다면 매우 좋을 것입니다. 당신이나 다른 사람들이 그것에 대해 어떻게 할 것인지 제안할 수 있습니까?

미리 감사드립니다 :)

나는 더러운 해킹으로 그것을 할 수 있었다. 핀치가 일어나고 있다고 생각하도록 줌 엔진을 속이고 있습니다.

class ReflectionHelper {
    <strong i="6">@Nullable</strong>
    static ScaleGestureDetector.OnScaleGestureListener getScaleDetectorListenerUsingReflection(ZoomEngine zoomEngine) {
        try {
            Field mScaleDetector = zoomEngine.getClass().getDeclaredField("mScaleDetector");
            mScaleDetector.setAccessible(true);
            ScaleGestureDetector detector = (ScaleGestureDetector) mScaleDetector.get(zoomEngine);
            Field mListener = detector.getClass().getDeclaredField("mListener");
            mListener.setAccessible(true);
            return (ScaleGestureDetector.OnScaleGestureListener) mListener.get(detector);
        } catch (Exception e) {
            return null;
        }
    }
}

private fun simulatePinch(fromScale: Float, toScale: Float, focusX: Float, focusY: Float) {
    class MockDetector(var mockScaleFactor: Float, var mockFocusX: Float, var mockFocusY: Float) : ScaleGestureDetector(context, null) {
        override fun getScaleFactor() = mockScaleFactor
        override fun getFocusX() = mockFocusX
        override fun getFocusY() = mockFocusY
    }

    val mockDetector = MockDetector(fromScale, focusX, focusY)
    ValueAnimator.ofFloat(fromScale, toScale).apply {
        addUpdateListener { animation ->
            mockDetector.mockScaleFactor = animation.animatedValue as Float
            zoomEngineScaleListener?.onScale(mockDetector)
        }
        doOnEnd { zoomEngineScaleListener?.onScaleEnd(mockDetector) }
        start()
    }
}

안녕,

노력해 주셔서 감사합니다! :)

그것은 확실히 그것을 달성하는 약간의 해킹 방법처럼 보입니다. 그러나 나는 우리가 지금 당장은 매우 생생한 애니메이션으로 살기로 결정할 것이라고 생각합니다.

감사 해요,
니콜라이

안녕,

더블 탭에서 확대/축소 + 패닝을 수행하는 방법에 대한 소식이 있습니까?

감사 해요,
크리스토프