Automatically scrolling to top left corner in Android TouchImageView

Question

I'm using a TouchImageView in my app in which I have an image which is larger than the screensize. When I start the activity that contains my TouchImageView it currently automatically shows the center of my image in the middle of the screen. I have to manually (using a drag gesture) make the top left-corner visibe. However, I would like to have the top-left corner of the image visible in the top left corner of my screen by default.

I tried imgView.setScrollPosition(0,0), but without any result. I also tried setting the scaletype to "matrix", but this zooms out on the image, while I want the image to be shown in it's original size. Scaletypes fitStart and fitEnd are not supported by TouchImageView.

How can I scroll to the top left corner of my TouchImageView?

Here's my XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <com.frankd.wttv.TouchImageView
        android:id="@+id/imageView"
        android:layout_width = "wrap_content"
        android:layout_height ="wrap_content"
        android:scaleType="matrix"/>

</LinearLayout>

And here is how I open the layout and set the image.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.myLayout);

    //set timetable image
    TouchImageView imgView = (TouchImageView)findViewById(R.id.imageView);
    imgView.setImageResource(R.drawable.myImage);
    //TODO: scroll to top left corner of image
}

Frank D. · Accepted Answer · 2015-06-16T14:52:07.123

The cause of the problem is that scrollToPosition(x,y) in TouchImageView doens't use the x and y pixels as input, but instead a number between 0 and 1 that reflects a proportion of the image size.

Also the scrollToPosition(x,y) sets a point of the image in the center of the TouchImageView. So if you call scrollToPosition(0.5,0.5) on the TouchImageView, the center of the image is being displayed at the center of the TouchImageView. We need to calculate which point of the image needs to be placed in the center of the TouchImageView to get it aligned nicely.

I created the function scrollToTopLeft() in TouchImageView.java, which only works if you call it at the end of onMeasure() from within the TouchImageView.java file. If you call it earlier the getWidth() and getHeight() will return 0 as the view hasn't been sized yet.

public void scrollToTopLeft() {
    try {
        float x, y, viewWidth, viewHeight, viewCenterX, viewCenterY, imageWidth, imageHeight;

        //these calls will only work if called after (or at the end of) onMeasure()
        viewWidth = this.getWidth();
        viewHeight = this.getHeight();

        // get center of view
        viewCenterX = viewWidth / 2;
        viewCenterY = viewHeight / 2;

        // get image height and width
        imageWidth = getImageWidth();
        imageHeight = getImageHeight();

        //calculate the x and y pixels that need to be displayed in at the center of the view
        x = viewWidth / imageWidth * viewCenterX;
        y = viewHeight / imageHeight * viewCenterY;

        //calculate the value of the x and y pixels relative to the image
        x = x / imageWidth;
        y = y / imageHeight;

        setScrollPosition(x, y);

    } catch (Exception E) {
        Log.v(TAG, E.toString());
    }
}

Automatically scrolling to top left corner in Android TouchImageView

1 Answers1