Monday, May 16, 2016

Implement ScaleGestureDetector on individual ImageView


Last example show Implementing ScaleGestureDetector on whole activity screen, to set scale of a ImageView. Now we modify to apply ScaleGestureDetector to individual ImageView, to scale the selected ImageView only.


Remark:
It can be noticed in the video, pinch-to-zoom cannot be detect after sometimes - I don't know why, but tap-and-slide still function as expected.

MainActivity.java
package com.blogspot.android_er.androidscalegesturedetector;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    ImageView myImage1, myImage2;

    private ScaleGestureDetector scaleGestureDetector1, scaleGestureDetector2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        myImage1 = (ImageView)findViewById(R.id.myimage1);
        myImage2 = (ImageView)findViewById(R.id.myimage2);

        scaleGestureDetector1 = new ScaleGestureDetector(
                this, new MySimpleOnScaleGestureListener(myImage1));
        scaleGestureDetector2 = new ScaleGestureDetector(
                this, new MySimpleOnScaleGestureListener(myImage2));

        myImage1.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                scaleGestureDetector1.onTouchEvent(event);
                return true;
            }
        });

        myImage2.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                scaleGestureDetector2.onTouchEvent(event);
                return true;
            }
        });
    }


    private class MySimpleOnScaleGestureListener
            extends ScaleGestureDetector.SimpleOnScaleGestureListener{

        ImageView viewMyImage;

        float factor;

        public MySimpleOnScaleGestureListener(ImageView iv) {
            super();
            viewMyImage = iv;
            factor = 1.0f;
        }

        @Override
        public boolean onScale(ScaleGestureDetector detector) {

            float scaleFactor = detector.getScaleFactor() - 1;
            factor += scaleFactor;
            viewMyImage.setScaleX(factor);
            viewMyImage.setScaleY(factor);
            return true;
            //return super.onScale(detector);
        }
    }
}


activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:orientation="vertical"
    tools:context="com.blogspot.android_er.androidscalegesturedetector.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:background="@android:color/black">
        <ImageView
            android:id="@+id/myimage1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"
            android:background="#A00000"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:background="@android:color/darker_gray">
        <ImageView
            android:id="@+id/myimage2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"
            android:background="#0000A0"/>
    </LinearLayout>

</LinearLayout>


No comments: