Android zoomable/scrollable ImageView with overlays

问题

I would like to display an image (including scroll and zoom functionality). Additionally, I need to add some overlays to the image dynamically. The overlays are in a relationship to the content within the image.

If the user scrolls, the overlays should move too
If the user zooms, the overlays should not be zoomed but hold their relative position to the image

In other words: I'd like to implement a Map with some markers, but I provide my own map material.

My main question is: How could I do this?

What I have tried so far

I tried to implement it within a WebView as it provided the basic zooming and scaling functionality. However, I did not succeed in adding overlays without using Javascript and HTML (what I thought was not a very convenient way of solving the problem)
There are projects (i.e. TouchImageView) which are implementing the scroll/zoom functionality but they make it even harder to add own overlay functionality from my point of view.

Questions

Is there a simple solution or approach to my problem?

What is the right way of adding and moving views at runtime in Android? (Usually, I would use a basic layout and play with the margin - would that be best practice?)

Could somebody point me to the right direction, please.

Min. API Level: 10

回答1:

I would suggest extending the View class and overriding onDraw method. Take a look at the Canvas API.

You'll probably have an onDraw method that looks like :

@Override
public void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.save();
    canvas.translate(mPosX, mPosY); //position of your actual data
    canvas.scale(mScaleFactor, mScaleFactor); // zoom factor
    map.draw(canvas); //you draw your map here
    canvas.restore(); //go back to saved state 
    //for each marker you have, do the same "save - translate - scale - draw" loop        
}

Since you don't need your markers to be zoomable, you'll probably wont need scale step but you need to calculate their position properly.

Depending on your # of objects etc, you may need to have a more optimized way of drawing your markers (e.g. re-drawing only changed rectangular areas). see View.invalidate(Rect)

回答2:

I Think this one can help you

Refer this project Link

it Has a Automatic Scrolling of Image and Zoom a Image When you click On it.

回答3:

Have you tried subclassing View and handling yourself user gestures? It is my first choice for complex behaviours as such. It should look something like this:

In your class extending View you should instantiate the required image and overlays at creation time as Bitmap objects
OnScroll event you will calculate how the image and overlays chould be after such scroll, refresh the Bitmaps and invalidate the current view
Using a GestureDetector, you can handle pinch events and treat zoom in/zoom out events just as scroll events
Remember to always call invalidate after changing your Bitmaps
Draw the bitmaps during the onDraw method

Plenty of material about this individual tasks on StackOverflow, let me know if you need adittional help in any of these.

回答4:

Checkout this example project https://github.com/jzafrilla/AndroidImageHostpot

回答5:

After a long time, I found the exact answer to my solution: TileView

Setting up the map view:

@Override
protected void onCreate( Bundle savedInstanceState ) {
  super.onCreate( savedInstanceState );
  TileView tileView = new TileView( this );
  tileView.setSize( 2000, 3000 );  // the original size of the untiled image
  tileView.addDetailLevel( 1f, "tile-%d-%d.png");
  setContentView( tileView );
}

Adding the marker:

tileView.addMarker( someView, 250, 500, -0.5f, -1.0f );

Code from the documentation.

来源：https://stackoverflow.com/questions/14004424/android-zoomable-scrollable-imageview-with-overlays

标签

android

android-layout

android-webview

android-imageview