Android - Animiere eine Ansicht topMargin/bottomMargin/etc in LinearLayout oder RelativeLayout

Question

Ich versuche ein Menü zu erstellen, das von unten nach oben gleitet. Es beginnt mit der Ansicht des Menüs, die gerade am unteren Rand des Bildschirms sichtbar ist, und dann, wenn Sie darauf klicken, wird es nach oben verschoben. Ich versuchte es mit einem TranslateAnimation, aber obwohl die Pixel bewegen, sind die Trefferbereiche des Menüs in der gleichen Position wie zuvor. Ich denke also, wenn ich die Ränder des Menüs einstellen kann, nachdem die Animation abgeschlossen ist, wird dies erreichen, was ich will. Ich kann jedoch nicht herausfinden, wie die Ränder angepasst werden.

Ich habe versucht, ein LinearLayout.LayoutMargins Objekt zu erstellen und dann seine Ränder festlegen und es auf die Menüansicht anwenden (das ist ein LinearLayout), aber das funktioniert nicht.

Irgendwelche Ideen?

Answer 1

Meine Lösung bestand darin, zwei LinearLayouts zu erstellen, von denen eines in den Status "up" (deaktiviert) und das andere in den Status "down" des Menüs gesetzt wurde. Wenn der Benutzer dann auf die Schaltfläche klickt, um das Menü nach oben zu verschieben, rufe ich eine TranslateAnimation auf, die das Menü nach oben zeigt. Ich habe einen Listener auf die Animation gesetzt, der dazu führt, dass der Status oben angezeigt wird und der Status deaktiviert ist, wenn die Animation beendet ist. Ich habe das für die "Closing" -Aktion umgekehrt.

Nicht genau so, wie ich es mir ursprünglich vorgestellt hatte, aber es hat funktioniert.

Answer 2

Ich fühle mich wie ein bisschen weniger von einem Hack. Im Grunde macht es deinen eigenen Animator. Unten ist es eingerichtet nur topMargin in einem RelativeLayout zu ändern, aber es wäre nicht schwer, es zu verallgemeinern.

import java.util.Calendar; 

import android.app.Activity; 
import android.util.Log; 
import android.view.View; 
import android.view.animation.Interpolator; 
import android.widget.RelativeLayout.LayoutParams; 

public class MarginAnimation extends Thread { 
    final String TAG = "MarginAnimation"; 
    long mStartTime; 
    long mTotalTime; 
    Interpolator mI; 

    int mStartMargin; 
    int mEndMargin; 

    View mV; 
    Activity mA; 
    public MarginAnimation(Activity a, View v, 
      int startMargin, int endMargin, int totaltime, 
      Interpolator i) { 
     mV = v; 
     mStartMargin = startMargin; 
     mEndMargin = endMargin; 
     mTotalTime = totaltime; 
     mI = i; 
     mA = a; 
    } 

    @Override 
    public void run() { 
     mStartTime = Calendar.getInstance().getTimeInMillis(); 
     while(!this.isInterrupted() && 
       Calendar.getInstance().getTimeInMillis() - mStartTime < mTotalTime) { 

      mA.runOnUiThread(new Runnable() { 
       @Override 
       public void run() { 
        if(MarginAnimation.this.isInterrupted()) 
         return; 
        long cur_time = Calendar.getInstance().getTimeInMillis(); 
        float perc_done = 1.0f*(cur_time-mStartTime)/mTotalTime; 

        final int new_margin = (int)(1.0f*(mEndMargin-mStartMargin)*mI.getInterpolation(perc_done)) + mStartMargin; 
        LayoutParams p = (LayoutParams) mV.getLayoutParams(); 
        Log.v(TAG, String.format("Setting Margin to %d", new_margin)); 
        p.topMargin = new_margin; 
        mV.setLayoutParams(p);     
       } 
      }); 

      try { 
       Thread.sleep(50); 
      } catch (InterruptedException e) { 
       return; 
      } 
     } 
    } 

} 

Answer 3

Folgendes funktionierte für mich. Bestimmen Sie zuerst die unteren Ränder (in Dips) für das Menü, das gerade geöffnet wird (vollständig sichtbar) oder nicht (das meiste davon ist ausgeblendet).

private static final int BOTTOM_MARGIN_UP = -50; // My menu view is a bit too tall. 
private static final int BOTTOM_MARGIN_DOWN = -120; 

Dann in onCreate():

menuLinearLayout = (LinearLayout)findViewById(R.id.menuLinearLayout); 
setBottomMargin(menuLinearLayout, BOTTOM_MARGIN_DOWN); 

upAnimation = makeAnimation(BOTTOM_MARGIN_DOWN, BOTTOM_MARGIN_UP); 
downAnimation = makeAnimation(BOTTOM_MARGIN_UP, BOTTOM_MARGIN_DOWN); 

Button toggleMenuButton = (Button)findViewById(R.id.toggleMenuButton); 
toggleMenuButton.setOnTouchListener(new View.OnTouchListener() 
{ 
    public boolean onTouch(View view, MotionEvent motionEvent) 
    { 
     if (motionEvent.getAction() != MotionEvent.ACTION_DOWN) return false; 
     ViewGroup.MarginLayoutParams layoutParams = 
      (ViewGroup.MarginLayoutParams)menuLinearLayout.getLayoutParams(); 
     boolean isUp = layoutParams.bottomMargin == dipsToPixels(BOTTOM_MARGIN_UP); 
     menuLinearLayout.startAnimation(isUp ? downAnimation : upAnimation); 
     return true; 
    } 
}); 

Und hier kommt das Geheimnis Sauce ;-)

private TranslateAnimation makeAnimation(final int fromMargin, final int toMargin) 
{ 
    TranslateAnimation animation = 
     new TranslateAnimation(0, 0, 0, dipsToPixels(fromMargin - toMargin)); 
    animation.setDuration(250); 
    animation.setAnimationListener(new Animation.AnimationListener() 
    { 
     public void onAnimationEnd(Animation animation) 
     { 
      // Cancel the animation to stop the menu from popping back. 
      menuLinearLayout.clearAnimation(); 

      // Set the new bottom margin. 
      setBottomMargin(menuLinearLayout, toMargin); 
     } 

     public void onAnimationStart(Animation animation) {} 

     public void onAnimationRepeat(Animation animation) {} 
    }); 
    return animation; 
} 

ich zwei Hilfsfunktionen:

private void setBottomMargin(View view, int bottomMarginInDips) 
{ 
    ViewGroup.MarginLayoutParams layoutParams =  
     (ViewGroup.MarginLayoutParams)view.getLayoutParams(); 
    layoutParams.bottomMargin = dipsToPixels(bottomMarginInDips); 
    view.requestLayout(); 
} 

private int dipsToPixels(int dips) 
{ 
    final float scale = getResources().getDisplayMetrics().density; 
    return (int)(dips * scale + 0.5f); 
} 

Voila!

Answer 4

Dieser Beitrag hat mir geholfen, meine Animation funktioniert zu bekommen. In meinem Fall habe ich ein Vollbild-Webview. Bei einigen Benutzeraktionen gleitet diese Webansicht nach rechts, etwa 70%, und ein neues Webview erscheint von links und nimmt den verfügbaren Platz ein. Endergebnis, ein neuer Webview deckt den 70% (x-Achse) und den alten Webview den Rest ab. Arnes Lösung hat mir enorm geholfen, den Rand der alten Ansicht zu setzen, sobald die Animation fertig ist. Pseudo-Code:

 marginParams.leftMargin = 336; //(70% of 480px) 

Aber ich stand vor einem seltsames Verhalten, ich denke, meine alte webview (die jetzt nur noch 30% Raum einnimmt), wurde ihren Inhalt Neuformatierung werden kann denken, dass es jetzt in einen kleineren Raum zusammengedrückt wird, anstatt sich so zu verhalten, als wäre es einfach nach rechts gerutscht. Mit anderen Worten, sobald ich diesen Rand gesetzt habe, änderte sich das HTML-Layout des Webview. Wieder hatte ich keine Ahnung warum und meine erraten ist es dachte seine Elternfenstergröße geändert.Basierend auf dieser Annahme, fügte ich noch eine Codezeile:

 marginParams.rightMargin = -336; //(same amount, but negative margin!) 

Und das war der Trick, keine Neuformatierung der HTML-Inhalte, und ich kann mit beiden WebViews parallel zu interagieren.

Ich poste dies als ein großes Dankeschön an Arne für die Idee und auch irgendwelche Inputs für das Verhalten, das ich sah und meine Annahmen dafür. Ich mag eigentlich die Endlösung, macht logischen Sinn, aber ich kann mich irren. . . alle Gedanken und Eingaben würden sehr geschätzt werden. Vielen Dank.

Answer 5

Verwenden Sie die ViewPropertyAnimator:

if (view.getY() != margin) { 
    view.animate().y(margin).setDuration(150).start(); 
}