A few lessons from android ImageView

  • 2020-05-10 18:52:22
  • OfStack

Recently made a picture of the display, encountered some problems, a simple summary
1) it can be done by combining ImageSwicher and ImageView, which will use setFectory ()
Most importantly, if the image size is larger than the screen, it is difficult to implement, so far there is no way to find it

2) the easiest way is to use ImageView, the image directly FIT_CENTER, and android will be automatically adjusted according to the size of the image
Keep the picture in proportion. If the image resolution exceeds the screen, android will automatically adjust to fit the entire image on the screen
When you zoom in, you can zoom in using ImageView's SetFrame () and setScale () methods
To go beyond the screen, the principle is that ImageView zoom in, followed by the image. You can also add various animation.
It goes like this:


Animation animation = AnimationUtils.loadAnimation(Main.this, R.anim.my_scale_action);
imageView.setLayoutParams(new Gallery.LayoutParams(206, 206));
imageView.startAnimation(animation);

Write your own MyImageView class, the code is as follows, you can use it directly

package com.practice.imageviewpic; 
import android.app.Activity;  
import android.content.Context;  
import android.graphics.*;  
import android.graphics.drawable.BitmapDrawable;  
import android.os.Bundle;  
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;  
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.ImageView;  
import android.widget.ImageView.ScaleType;  
import android.widget.LinearLayout;
    // create 1 His own ImageView class   
    class MyImageView extends ImageView {  
        private float scale = 0.1f;  

      // The length between two touch screens   
        private float beforeLenght;  
        private float afterLenght;  

        // The forward and backward coordinates of a single point of movement   
        private float afterX,afterY;  
        private float beforeX,beforeY;  

        public MyImageView(Context context) {  
            super(context);  
        }  
        public MyImageView(Context context, AttributeSet attrs) {  
        this(context, attrs, 0);

        } 
        public MyImageView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
        }
        // Used to set the ImageView The location of the   
        private void setLocation(int x,int y) {  
            this.setFrame(this.getLeft()+x, this.getTop()+y, this.getRight()+x, this.getBottom()+y);  
        }  

          
        /* 
         *  To zoom in and out ImageView 
         *  Because the image is filled ImageView , so it has the effect of zooming in and out of the picture  
         * flag for 0 Is a zoomed in picture for 1 Is less than the picture  
         */  
        public void setScale(float temp,int flag) {  

            if(flag==0) {  
                this.setFrame(this.getLeft()-(int)(temp*this.getWidth()),   
                              this.getTop()-(int)(temp*this.getHeight()),   
                              this.getRight()+(int)(temp*this.getWidth()),   
                              this.getBottom()+(int)(temp*this.getHeight()));     
            }else {  
                this.setFrame(this.getLeft()+(int)(temp*this.getWidth()),   
                              this.getTop()+(int)(temp*this.getHeight()),   
                              this.getRight()-(int)(temp*this.getWidth()),   
                              this.getBottom()-(int)(temp*this.getHeight()));  
            }  
        }  

        // Draw the border         
         @Override  
          protected void onDraw(Canvas canvas) {  
              super.onDraw(canvas);      
              Rect rec=canvas.getClipBounds();  
              rec.left++;
              rec.top++;
              rec.bottom--;  
              rec.right--;  
              Paint paint=new Paint();  
              paint.setColor(Color.RED);  
              paint.setStyle(Paint.Style.STROKE);  
              canvas.drawRect(rec, paint);  
          }  

           
        /*  Let the picture follow the position of the finger touch screen  
         * beforeX , Y Is used to save before 1 Coordinates of position  
         * afterX , Y Is the coordinate used to save the current position  
         *  The difference between them is zero ImageView The increment or decrement of each coordinate  
         */  
        public void moveWithFinger(MotionEvent event) {  

            switch(event.getAction()) {  

            case MotionEvent.ACTION_DOWN:  
            //Log.d(TAG, "down ..");
                beforeX = event.getX();  
                beforeY = event.getY();  
                break;  
            case MotionEvent.ACTION_MOVE:  

            //Log.d(TAG, "move ..");
                afterX = event.getX();  
                afterY = event.getY();  

                this.setLocation((int)(afterX-beforeX),(int)(afterY-beforeY));  

                beforeX = afterX;  
                beforeY = afterY;  
                break;  

            case MotionEvent.ACTION_UP:  
            //Log.d(TAG, "up ..");
                break;  
            }  
        }  

        /* 
         *  Zoom in or out of an image with a multi-touch screen  
         * beforeLenght Before you save it 1 The distance between two points in time  
         * afterLenght Used to save the distance between two points in the current time  
         */  
        public void scaleWithFinger(MotionEvent event) {  
            float moveX = event.getX(1) - event.getX(0);  
            float moveY = event.getY(1) - event.getY(0);  

            switch(event.getAction()) {  
            case MotionEvent.ACTION_DOWN:  
                beforeLenght = (float) Math.sqrt( (moveX*moveX) + (moveY*moveY) );  
                break;  
            case MotionEvent.ACTION_MOVE:  
                // I get the length between the two points   
                afterLenght = (float) Math.sqrt( (moveX*moveX) + (moveY*moveY) );  

                float gapLenght = afterLenght - beforeLenght;  

                if(gapLenght == 0) {  
                    break;  
                }  

                // If the current time is greater than the distance before 1 Time two o 'clock distance, then pass 0 , otherwise 1  
                if(gapLenght>0) {  
                    this.setScale(scale,0);  
                }else {  
                    this.setScale(scale,1);  
                }  

                beforeLenght = afterLenght;  
                break;  
            }  
        }  

   // Here we're going to monitor the screen touch time   
   @Override  
    public boolean onTouchEvent(MotionEvent event) {  

       /* 
        *  Determine if the user has touched the image  
        *  If it's a single touch, call the method that controls the movement of the image  
        *  If it is 2 Touch calls the method that controls the size of the image  
        */  
        if(event.getY() > this.getTop() && event.getY() < this.getBottom()  
                && event.getX() > this.getLeft() && event.getX() < this.getRight()) {  
            if(event.getPointerCount() == 2) {  
            this.scaleWithFinger(event);  
            }else if(event.getPointerCount() == 1) {  
            this.moveWithFinger(event);  
            }             
        }  
        return true;  
    }         

}


Related articles: