在 Android 中单击时放大图像视图

Question

I am using Picasso for a while now and I'm very satisfied with it. However I'm in need of enlarging an imageview's image which is loaded by Picasso from firebase. The codes below is in an adapter.java which is called inside the MainActivity.java

UserRef = FirebaseDatabase.getInstance().getReference().child("user").child(fromUserID);
        UserRef.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot snapshot) {
                String senderName = snapshot.child("name").getValue().toString();
                String userid = fromUserID;
                if (snapshot.hasChild("avata")){
                 final String receiverImage = snapshot.child("avata").getValue().toString();

                        if (fromUserID.equals(messageSenderId)) {
                            messageViewholder.senderMessageName.setVisibility(View.VISIBLE);
                            messageViewholder.senderImageView.setVisibility(View.VISIBLE);

                            if (fromMessageType.equals("text")) {
                                messageViewholder.senderMessageText.setVisibility(View.VISIBLE);
                                messageViewholder.senderMessageText.setText(messages.getMessage());
                            }else if (fromMessageType.equals("image")) {
                                messageViewholder.senderMessageImage.setVisibility(View.VISIBLE);
                                Picasso.get().load(messages.getMessage()).into(messageViewholder.senderMessageImage);

                            }

Here is the xml

   <ImageView
        android:id="@+id/receiver_message_image"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/receiver_image"
        android:layout_below="@id/receiver_message_name"
        android:layout_marginStart="5dp"
        android:visibility="gone"
        android:adjustViewBounds="true"
        android:layout_marginEnd="20dp" />

Answer 1

You can make use of the ScaleGestureDetector that will allow you to detect a particular gesture event that has occurred. It can also allow you to Zoom in and Zoom out depending on the gesture. In this example, I am using viewBinding to map the XML layout to the Java.

XML Layout

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/symatech_logo"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

Java Code

   public class EnlargeImageViewWhenClicked extends AppCompatActivity {

    EnlargeImageViewBinding enlargeImageViewBinding;
    ScaleGestureDetector scaleGestureDetector;
    float factor = 1.5f;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        enlargeImageViewBinding = EnlargeImageViewBinding.inflate(getLayoutInflater());
        setContentView(enlargeImageViewBinding.getRoot()); // Setting up the view

        scaleGestureDetector = new ScaleGestureDetector(this, new Listerner()); // Creating the ScaleGestureDetector object.
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        scaleGestureDetector.onTouchEvent(event);
        return super.onTouchEvent(event);
    }

    private class Listerner extends ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
        public boolean onScale(ScaleGestureDetector scaleGestureDetector) {
            factor *= scaleGestureDetector.getScaleFactor(); // The scaling factor from the previous scale event being applied to the current event.
            factor = Math.max(0.5f, Math.min(factor, 5.0f));
            enlargeImageViewBinding.imageView.setScaleY(factor);
            enlargeImageViewBinding.imageView.setScaleX(factor);
            return true;
        }
    }
}

Before I Zoom In

After I Zoom In

I sure hope this helps!

Answer 2

Consider subjecting your ImageView(messageViewholder.senderMessageImage) to the onScale function in the ScaleGestureDetector.SimpleOnScaleGestureListener as on the example I gave. Something like this (you might need to edit the code to fit your case. Also don't forget to get the rest of the code ie initializing the ScaleGestureDetector and overriding the onTouchEvent function)

 private class Listerner extends ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
        public boolean onScale(ScaleGestureDetector scaleGestureDetector) {
            factor *= scaleGestureDetector.getScaleFactor(); // The scaling factor from the previous scale event being applied to the current event.
            factor = Math.max(0.5f, Math.min(factor, 5.0f));
            **messageViewholder.senderMessageImage**.setScaleY(factor);
            **messageViewholder.senderMessageImage**.setScaleX(factor);
            return true;
        }
    }