单击图像时更改ImageView的大小

Question

I am trying to get a picture, within an ImageView, to increase in size when clicked. I have searched for a number of days, but have not found exactly what I need. At the moment I am using the TouchImageView from MikeOrtiz, and it works in that, when the image is clicked, it zooms in. But I want the image to increase in size, not just to zoom in, and while leaving the rest of the page opaque, the image needs to increase to the size of the screen while retaining its aspect ratio, ie it is a square image, so it should not become a rectangular image.

I have the following XML code:

<LinearLayout
<com.example.TouchImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:layout_marginTop="14dp"
    android:contentDescription="@string/CompanyHeader" 
    android:src="@drawable/entrancex250"/>

</LinearLayout>

I am using the TouchImageView from:

https://github.com/MikeOrtiz/TouchImageView/blob/master/src/com/ortiz/touch/TouchImageView.java

As explained, what this does is to zoom in, but what I need is to make the image itself bigger when clicked, and then back to its normal size when clicked again.

Thanks very much.

Answer 1

   public class TheCompany extends Activity implements OnMenuItemClickListener{

        public static final float screen_width;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.the_company);
            DisplayMetrics metrics = new DisplayMetrics();
            getWindowManager().getDefaultDisplay().getMetrics(metrics);
            screen_width = metrics.widthPixels;

        }

    }

Then in your page do this :

        ImageView imageView = (ImageView) findViewById(R.id.imageView2);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                float scale =  TheCompany.screen_width / view.getWidth();
                if(view.getScaleX() == 1) {
                    view.setScaleY(scale);
                    view.setScaleX(scale);
                }else{
                    view.setScaleY(1);
                    view.setScaleX(1);
                }
            }


        });

Answer 2

If all you need is to increase the size of the ImageView, then you should not use TouchImageView at all, but ImageView instead.

<ImageView
    android:id="@+id/image_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/picture" 
    android:clickable="true" />

and in your java class setonclicklistener on this imageview and inside onclick change the size of the imageview by setting layout params.

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(newWidth, newHeight);
imageView.setLayoutParams(params);

Here newWidth and newHeight are the dimensions to which to which you want set the imageview on click.

Answer 3

Have a look at this great library : PhotoView

It supports zooming and have a tap listener, so you just have to zoom on tap

Answer 4

an alternative can be to use the following code

TouchImageView v = (TouchImageView) getActivity().findViewById("imageView2");
v.setHeight(fill_parent);
v.setWidth(fill_parent);

Answer 5

I wanted to put down what I actually ended up doing thanks to @micnubinub. I put his answer as the correct one as they helped me get to where I needed to be. But the actual code is not in the answer, so I thought to put it here, in case it helps anyone else.

First of all @micnubinub suggested I used dialog to show the image when it gets clicked. So I created a dialog.xml under res/layout as follows:

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:minHeight="910dp"
android:minWidth="910dp"
android:scaleType="fitCenter"
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

Then the Java class that would show the image when clicked is as follows:

    final ImageView imageView = (ImageView) findViewById(R.id.imageView2);
    imageView.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View view) {

    final Dialog dialog = new Dialog(TheCompany.this, R.style.CustomDialog);
    if ((getResources().getConfiguration().screenLayout & 
            Configuration.SCREENLAYOUT_SIZE_MASK) == 
                Configuration.SCREENLAYOUT_SIZE_XLARGE) {
            // on a large screen device ...
        dialog.setContentView(R.layout.dialog_xlarge);}

        else dialog.setContentView(R.layout.dialog);


    ImageView im = (ImageView) dialog.findViewById(R.id.imageView);
    im.setImageResource(R.drawable.entrancex250);
    im.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
    dialog.dismiss();
    }
    });
    dialog.show();
    Window window = dialog.getWindow();
    window.setLayout(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
    }
    }); 
}

I also created a customdialog in Styles as follows:

<style name="CustomDialog" parent="@android:style/Theme.Translucent.NoTitleBar">
<item name="android:windowIsFloating">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowEnterAnimation">@anim/zoom_in</item>
<item name="android:windowExitAnimation">@anim/zoom_out</item>
</style>

This worked really well, thanks again @micnubinub.

The dialog_xlarge is the same as dialog, except with larger height and width.