Android supports Scroll display of large charts

Problem:

I have a relatively large image, for example, the length and width are twice the size of the screen. The function I want to achieve is to first display the picture in the center, because the picture is too big, obviously only a part can be displayed, then, you can drag the image to achieve smooth scrolling (no trace of scrolling and refreshing can be seen ).

Like google Maps, if mapView is used, you can drag the entire map on the screen. However, because the map has a large amount of information, if one drag is too fast, the screen will display some refresh marks temporarily (gray grids ).

If you want to use mapView to load an existing image, but it is not successful, then the Srollview control and the most commonly used imageView are still not successful.

 

Solution:

After a large amount of information, you can solve the problem by using imageView with onTouch events.

Key code:

The imageView control in the layout file is as follows:

[Html] <span style = "font-size: 16px;"> <ImageView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: id = "@ + id/img"
Android: scaleType = "center"
Android: background = "# fff"
Android: src = "@ drawable/picName"
/>
</Span>
<Span style = "font-size: 16px;"> <ImageView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: id = "@ + id/img"
Android: scaleType = "center"
Android: background = "# fff"
Android: src = "@ drawable/picName"
/>
</Span>

 

The main code in the Activity file is as follows:

 

[Java] <span style = "font-size: 16px;"> @ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
 
SetContentView (R. layout. xml_name_layout );
 
Final ImageView switcherView = (ImageView) this. findViewById (R. id. img );
 
SwitcherView. setOnTouchListener (new View. OnTouchListener (){
 
Public boolean onTouch (View arg0, MotionEvent event ){
 
Float curX, curY;
 
Switch (event. getAction ()){
 
Case MotionEvent. ACTION_DOWN:
Mx = event. getX ();
My = event. getY ();
Break;
Case MotionEvent. ACTION_MOVE:
CurX = event. getX ();
CurY = event. getY ();
SwitcherView. scrollBy (int) (mx-curX), (int) (my-curY ));
Mx = curX;
My = curY;
Break;
Case MotionEvent. ACTION_UP:
CurX = event. getX ();
CurY = event. getY ();
SwitcherView. scrollBy (int) (mx-curX), (int) (my-curY ));
Break;
}
 
Return true;
}
});
 
}
</Span>
<Span style = "font-size: 16px;"> @ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );

SetContentView (R. layout. xml_name_layout );

Final ImageView switcherView = (ImageView) this. findViewById (R. id. img );

SwitcherView. setOnTouchListener (new View. OnTouchListener (){

Public boolean onTouch (View arg0, MotionEvent event ){

Float curX, curY;

Switch (event. getAction ()){

Case MotionEvent. ACTION_DOWN:
Mx = event. getX ();
My = event. getY ();
Break;
Case MotionEvent. ACTION_MOVE:
CurX = event. getX ();
CurY = event. getY ();
SwitcherView. scrollBy (int) (mx-curX), (int) (my-curY ));
Mx = curX;
My = curY;
Break;
Case MotionEvent. ACTION_UP:
CurX = event. getX ();
CurY = event. getY ();
SwitcherView. scrollBy (int) (mx-curX), (int) (my-curY ));
Break;
}

Return true;
}
});

}
</Span>

 

The implementation result is as follows:

Source image
 

 
Effects in simulators
 

 

 



From Peking University-Google Android lab