Android drag-and-drop instances

Android drag-and-drop instances
The drag function of an image is a useful and commonly used function for processing images. Due to the limitation of the screen size of a mobile phone, it is often impossible to display a large image at a time on the mobile phone, that is
We can only see a part of the image at a time on the mobile phone. Now we can use the drag function of the image to drag the image and view the corresponding part of the image.
The following uses an example to learn how to drag an image:

The instance runs as follows: 1. This initialization interface. 2. For the effect after dragging left 3. For the effect of dragging up

Knowledge point:
In anndroid application development, we often use the scaleType attribute when using ImageView, such:


Android: layout_height = wrap_content
Android: scaleType = matrix
Android: src = @ drawable/s001/>


ScaleType attributes include: matrix fitXY fitStart fitCenter fitEnd center centerCrop centerInside
The differences between them are as follows:
Matrix is drawn using a matrix (from the upper left corner of the matrix Area)
FitXY scales up or down the image to the View size (make sure the image is fully displayed and full of View)
FitStart scales up/down an image to the width of the View, and displays the image in the top part of the View (the image will be completely displayed)
FitCenter scales up/down the image to the width of the View in proportion and center the image (the image is displayed completely)
FitEnd scales up/down the image to the width of the View, and displays the image in the lower part of the View)
Center is centered by the original size of the image. When the image width exceeds the View width, the center part of the screenshot is displayed. If the image width is smaller than the View width, the image is centered.
CenterCrop scales up or down the image size in the center, so that the image height is equal to the View height, so that the image width is equal to or greater than the View width.
CenterInside shows the entire content of the image in the center so that the image is scaled down proportionally or the original size (the image is smaller than the View hour) so that the image width is equal to or less than the View width (the image will be fully displayed)

Create an Android project named DragAndDrop. The directory structure is as follows:

The layout code of activity_layout.xml on the main interface is as follows:

You need to note that our ImageView control method is set to matrix, so that you can easily control the image in the code.
Then, we put an image (larger than the mobile phone screen) in the drawable-mdpi file.
The main Activity code is as follows: MainActivity. java

Package com. shen. draganddrop; import android. app. activity; import android. graphics. matrix; import android. graphics. pointF; import android. OS. bundle; import android. view. menu; import android. view. menuItem; import android. view. motionEvent; import android. view. view; import android. view. view. onTouchListener; import android. widget. imageView; public class MainActivity extends Activity {private ImageView imageView; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); imageView = (ImageView) findViewById (R. id. show_img); imageView. setOnTouchListener (new ImageTouchListener () ;}@ Overridepublic boolean onCreateOptionsMenu (Menu menu) {// Inflate the menu; this adds items to the action bar if it is present. getMenuInflater (). inflate (R. menu. main, menu); return true ;}@ Overridepublic boolean onOptionsItemSelected (MenuItem item) {// Handle action bar item clicks here. the action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml.int id = item. getItemId (); if (id = R. id. action_settings) {return true;} return super. onOptionsItemSelected (item);} private class ImageTouchListener implements OnTouchListener {// declare a coordinate point private PointF startPoint; // declare and instantiate a Matrix to control the image's private Matrix matrix = new Matrix (); // declare and instantiate the current image's Matrixprivate Matrix mCurrentMatrix = new Matrix (); @ Overridepublic boolean onTouch (View v, MotionEvent event) {switch (event. getAction () & MotionEvent. ACTION_MASK) {case MotionEvent. ACTION_DOWN: // obtain the coordinate startPoint = new PointF (event. getX (), event. getY (); // set the Matrix of the current image to the MatrixmCurrentMatrix of the slice. set (imageView. getImageMatrix (); break; case MotionEvent. ACTION_MOVE: // float dx = event. getX ()-startPoint. x; // float dy = event. getY ()-startPoint. y; // set the current matrixmatrix of the Matrix. set (mCurrentMatrix); // indicates the distance between the X and Y axes of the matrix to be moved. postTranslate (dx, dy); break; case MotionEvent. ACTION_UP: break; default: break;} // according to the requirements of Matrix, move the image to a certain position imageView. setImageMatrix (matrix); // return true indicates that we will consume this action, and no further processing of the parent control is required. return true ;}}}

 

The following shows the display effect of the scaleType attribute with the same value:

1. fitXY scales up or down the image to the View size (ensure that the image is fully displayed and full of View)

2. fitStart scales up/down an image to the width of the View, and displays the image in the top part of the View)

3. fitCenter scales up/down the image to the width of the View in proportion and displays the image in the center)

4. fitEnd scales up/down the image to the width of the View, and displays the image in the lower part of the View)

5. center is centered based on the original size of the image. When the image width exceeds the View width, the center part of the screenshot is displayed. If the image width is smaller than the View width, the image is centered.

6. centerCrop scales up or down the image size in the center, so that the image height is equal to the View height, so that the image width is equal to or greater than the View width.

7. centerInside shows the entire content of the image in the center so that the image is scaled down proportionally or the original size (the image is smaller than the View hour) so that the image width is equal to or less than the View width (the image will be fully displayed)

In short, scaletype is categorized into three types: matrix (default), fit-X, and center. Not much about matrix. In the fit-X class, the fitStart, fitCenter, and fitEnd both adapt to the ImgView based on the source image changes as needed, and draw by matrix, but the difference between them is that the benchmark is different. The benchmark of fitStart is the most recent point (that is, the point starting with the matrix method). the benchmark of fitCenter is the middle point (a point that can center an image in the matrix method ), the reference point of fitEnd is the point in the lower right corner (that is, the last point drawn in matrix mode ). In the center class, center, centerCrop, and centerInside are based on the geometric center of the source image and the geometric center of the ImagView, and only images of the ImagView size are drawn, the difference is whether the source image size is different from the drawing target and the method used is different.