Effetto di ingrandimento delle immagini in alto trascinabili in Android come pagina dettagliata degli amici QQ

Questa guida condivide il codice specifico per l'effetto di riduzione dell'immagine in alto di Android, fornito per riferimento, il contenuto dettagliato è il seguente

Immagine di esempio

Analisi dell'effetto

1 Scorri verso il basso, l'immagine superiore aumenta di dimensioni man mano che il dito scorre

2 Scorri verso l'alto, muovi continuamente l'immagine verso l'alto fino a quando l'immagine non è visibile

3 Quando l'immagine superiore non è visibile, scorri verso l'alto, scorri la ListView

Pensiero di implementazione

1 Poiché questo View è diviso in due parti superiori e inferiori, disposte verticalmente, può essere implementato ereditando LinearLayout: :: Creare una DragImageView, il View deriva da LinearLayout

public DragImageView(Context context, AttributeSet attrs) {
  super(context, attrs);
  // Predefinito l'orientamento verticale di questo View
  setOrientation(LinearLayout.VERTICAL);
  // Utilizzato per gestire lo scrolling inerziale di questo View
  mScroller = new OverScroller(context);
  mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
  mMaximumVelocity = ViewConfiguration.get(context);
        .getScaledMaximumFlingVelocity();
  mMinimumVelocity = ViewConfiguration.get(context)
        .getScaledMinimumFlingVelocity();
  }

2 Impostazione dell'altezza della vista del contenuto in onMeasure

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  LayoutParams params = (LayoutParams) getChildAt(1).getLayoutParams();
  // L'intestazione può essere nascosta completamente, quindi l'altezza della vista del contenuto è uguale all'altezza del controllo
  params.height = getMeasuredHeight();
}

3 Impostazione dell'attributo ScaleType di ImageView

@Override
protected void onFinishInflate() {
  super.onFinishInflate();
  imageView = (ImageView) getChildAt(0);
  // Con lo scorrimento della dito, l'immagine si ingrandisce continuamente (larghezza e altezza entrambe maggiore o uguale alla dimensione di ImageView) e viene visualizzata al centro:
  // Secondo l'analisi precedente, CENTER_CROP: può essere utilizzato per ingrandire l'immagine in modo equilibrato (mantenendo le proporzioni originali dell'immagine), in modo che le due coordinate (larghezza, altezza) dell'immagine siano entrambe maggiore o uguale alle coordinate della vista corrispondenti (margine interno negativo), l'immagine si trova al centro della vista
  imageView.setScaleType(ScaleType.CENTER_CROP);
  listView = (ListView) getChildAt(1);
}

4 Intercettamento degli eventi

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
  if (ev.getAction() == MotionEvent.ACTION_DOWN) {
    downX = (int) ev.getX();
    downY = (int) ev.getY();
  }
  if (ev.getAction() == MotionEvent.ACTION_MOVE) {
    int currentX = (int) ev.getX();
    int currentY = (int) ev.getY();
    // Assicurarsi che sia una scorrimento verticale
    if (Math.abs(currentY - downY) > Math.abs(currentX - downX)) {
      View childView = listView.getChildAt(listView)
          .getFirstVisiblePosition());
      // Ci sono due casi che richiedono di intercettare:
      // 1 L'immagine non è completamente nascosta
      // 2 L'immagine è completamente nascosta, ma viene scollato verso il basso e la ListView viene scollata alla cima
      if (getScrollY() != imageHeight
          || (getScrollY() == imageHeight && currentY - downY > 0
              && childView != null && childView.getTop() == 0)) {
        initVelocityTrackerIfNotExists();
        mVelocityTracker.addMovement(ev);
        return true;
      }
    }
  }
  if (ev.getAction() == MotionEvent.ACTION_UP) {
    recycleVelocityTracker();
  }
  return super.onInterceptTouchEvent(ev);
}

5 Gestione dell'ACTION_MOVE in onTouchEvent

if (ev.getAction() == MotionEvent.ACTION_MOVE) {
    int currentX = (int) ev.getX();
    int currentY = (int) ev.getY();
    int deltyX = currentX - downX;
    int deltyY = currentY - downY;
    if (Math.abs(deltyY) > Math.abs(deltyX)) {
      if (deltyY > 0) {
        if (getScrollY() > 0) {
          if (getScrollY() - deltyY < 0) {
            scrollBy(0, -getScrollY());
            return true;
          }
          // Quando l'immagine non è completamente visibile e viene scollato verso il basso, continuare a rendere visibile l'intera view per far vedere l'immagine
          scrollBy(0, -deltyY);
        }
        // Quando l'immagine è completamente visibile e viene scollato verso il basso, continuare a ingrandire l'altezza dell'immagine (modificando l'altezza di ImageView)
          LayoutParams layoutParams = (LayoutParams) getChildAt(0)
              .getLayoutParams();
          layoutParams.height = layoutParams.height + deltyY / 2;
          getChildAt(0).setLayoutParams(layoutParams);
        }
      }
      // Quando l'immagine è ancora in stato di ingrandimento e viene scrollato verso l'alto, continuare a ridurre continuamente l'altezza dell'immagine per farla diventare più piccola
        if (getChildAt(1).getTop() > imageHeight) {
          LayoutParams layoutParams = (LayoutParams) getChildAt(0)
              .getLayoutParams();
          layoutParams.height = layoutParams.height + deltyY / 2;
          getChildAt(0).setLayoutParams(layoutParams);
        }
        // Quando l'immagine è in stato normale e si scorre verso l'alto, muovere l'intero View per ridurre la visibilità dell'immagine
          if (getScrollY() - deltyY > imageHeight) {
            scrollBy(0, imageHeight - getScrollY());
            return true;
          }
          scrollBy(0, -deltyY);
        }
      }
      downY = currentY;
      downX = currentX;
      return true;
    }
  }

6　onTouchEvent ACTION_UP elaborazione

if (ev.getAction() == MotionEvent.ACTION_UP) {
  // Quando l'immagine è in stato di ingrandimento, rilasciare la mano per far si che l'immagine torni lentamente allo stato originale
  if (getChildAt(1).getTop() > imageHeight) {
    isAnimating = true;
    ValueAnimator valueAnimator = ValueAnimator.ofInt(getChildAt(1)
        .getTop(), imageHeight);
    valueAnimator.setDuration(300);
    valueAnimator.addUpdateListener(new AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        int value = (Integer) animation.getAnimatedValue();
        LayoutParams layoutParams = (LayoutParams) getChildAt(0)
            .getLayoutParams();
        layoutParams.height = value;
        getChildAt(0).setLayoutParams(layoutParams);
      }
    });
    valueAnimator.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        isAnimating = false;
      }
    });
    valueAnimator.start();
  }
  // Quando l'immagine attuale è in stato normale, non completamente nascosta e la velocità di scorrimento quando si rilascia è superiore al valore minimo di scorrimento inerziale, far sì che View generi l'effetto di scorrimento inerziale
  if (getChildAt(1).getTop() == imageHeight
      && getScrollY() != imageHeight) {
    mVelocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);
    int velocityY = (int) mVelocityTracker.getYVelocity();
    if (Math.abs(velocityY) > mMinimumVelocity) {
      fling(-velocityY);
    }
    recycleVelocityTracker();
  }

Conclusione

Qui ci sono principalmente due punti di apprendimento

1 Gestione dello zoom delle immagini, intercettazione degli eventi

2 Scorrimento inerziale di View: principalmente combinato con l'uso di OverScroller

Questo è tutto il contenuto dell'articolo, spero che sia utile per la tua apprendimento, e spero che tutti possano sostenere il tutorial di urla.

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, di proprietà del rispettivo autore. Il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, il sito web non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, invia un'e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, il sito web rimuoverà immediatamente il contenuto sospetto di violazione del copyright.