Method to Implement Large Image Scrolling Display in Android Programming

This article illustrates the method of implementing large picture scrolling display in Android programming. Shared with everyone for reference, as follows:

Problem:

I have a large picture, for example, twice the size of the screen in both length and width. The function I want to implement is to first display the picture in the center, as the picture is too large, it can only be displayed in part, and then through dragging, achieve smooth scrolling of the picture (without visible refresh traces).

Just like Google Maps, if you use the mapView control, you can drag the entire map on the screen. However, due to the large amount of map information, if you drag too fast at one time, the screen will temporarily display some refresh痕迹（gray and white grids).

I wanted to use mapView to load existing images, but it was not successful. Later, I also used Srollview control and the most commonly used imageView, but still not successful.

Solution:

After a lot of research, using imageView in combination with onTouch event can solve this problem.

Key code:

The imageView control in the layout file is as follows

<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"
/>

The main code in the Activity file is as follows

@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 - (int) (my - curY));
          mx = curX;
          my = curY;
          break;
        case MotionEvent.ACTION_UP:
          curX = event.getX();
          curY = event.getY();
          switcherView.scrollBy((int) (mx - (int) (my - curY));
          break;
      }
      return true;
    }
  });
}

The implementation effect is as follows:

Original Image:

Effect in Simulator:

Readers who are interested in more about Android-related content can check the special topics of this site: 'Summary of Android Graphics and Image Processing Techniques', 'Android Development入门 and Advanced Tutorial', 'Summary of Android Debugging Techniques and Common Problem Solving Methods', 'Summary of Android Multimedia Operation Techniques (audio, video, recording, etc.)', 'Summary of Android Basic Component Usage', 'Summary of Android View View Techniques', 'Summary of Android Layout Layout Techniques', and 'Summary of Android Widget Usage'.

I hope the content described in this article will be helpful to everyone's Android program design.

Declaration: The content of this article is from the network, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)