Comment animer 2 mises en page avec des marges de haut en bas et de bas en haut

Question

J'essaie de créer une application qui a 2 mises en page: une en haut et une en bas. Je veux que lorsque vous cliquez sur une mise en page, 2 changement de position et une montée et l'autre plus bas.

Mais j'ai plusieurs problèmes:

• mise en page 2 leur position
perturbe
• 2 mises en page disparaissent de l'écran avant de mettre

Comment puis-je corriger mes erreurs? Merci

MainActivity.java

public class MainActivity extends Activity { 

RelativeLayout rl_footer, rl_footer2; 
ImageView iv_header, iv_header2; 
boolean isBottom = true; 
Button btn1; 

@Override 
protected void onCreate(Bundle savedInstanceState) { 

    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 

    rl_footer = (RelativeLayout) findViewById(R.id.rl_footer); 
    rl_footer2 = (RelativeLayout) findViewById(R.id.rl_footer2); 

    iv_header = (ImageView) findViewById(R.id.iv_up_arrow); 
    iv_header2 = (ImageView) findViewById(R.id.iv_up_arrow2); 

    iv_header.setOnClickListener(new OnClickListener() { 

     @Override 
     public void onClick(View v) { 

      if (isBottom) { 

       SlideToAbove1(); 
       SlideToDown2(); 
       isBottom = false; 

      } else { 

       SlideToDown1(); 
       SlideToAbove2(); 
       isBottom = true; 
      } 
     } 
    }); 
} 

public void SlideToAbove1() { 

    Animation slide = null; 
    slide = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, 
      Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 
      0.0f, Animation.RELATIVE_TO_SELF, -5.0f); 

    slide.setDuration(600); 
    slide.setFillAfter(true); 
    slide.setFillEnabled(true); 
    rl_footer.startAnimation(slide); 

    slide.setAnimationListener(new AnimationListener() { 

     @Override 
     public void onAnimationStart(Animation animation) { 
     } 

     @Override 
     public void onAnimationRepeat(Animation animation) { 
     } 

     @Override 
     public void onAnimationEnd(Animation animation) { 

      rl_footer.clearAnimation(); 

      RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
        rl_footer.getWidth(), rl_footer.getHeight()); 
      lp.setMargins(20, 20, 0, 0); 
      lp.addRule(RelativeLayout.ALIGN_PARENT_TOP); 
      rl_footer.setLayoutParams(lp); 
     } 
    }); 
} 

public void SlideToAbove2() { 

    Animation slide = null; 
    slide = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, 
      Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 
      0.0f, Animation.RELATIVE_TO_SELF, -5.0f); 

    slide.setDuration(600); 
    slide.setFillAfter(true); 
    slide.setFillEnabled(true); 
    rl_footer2.startAnimation(slide); 

    slide.setAnimationListener(new AnimationListener() { 

     @Override 
     public void onAnimationStart(Animation animation) { 
     } 

     @Override 
     public void onAnimationRepeat(Animation animation) { 
     } 

     @Override 
     public void onAnimationEnd(Animation animation) { 

      rl_footer2.clearAnimation(); 

      RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
        rl_footer2.getWidth(), rl_footer2.getHeight()); 
      lp.setMargins(0, 20, 20, 0); 
      lp.addRule(RelativeLayout.ALIGN_PARENT_TOP | RelativeLayout.ALIGN_PARENT_RIGHT); 
      rl_footer2.setLayoutParams(lp); 
     } 
    }); 
} 

public void SlideToDown1() { 

    Animation slide = null; 
    slide = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, 
      Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 
      0.0f, Animation.RELATIVE_TO_SELF, 5.2f); 

    slide.setDuration(600); 
    slide.setFillAfter(true); 
    slide.setFillEnabled(true); 
    rl_footer.startAnimation(slide); 

    slide.setAnimationListener(new AnimationListener() { 

     @Override 
     public void onAnimationStart(Animation animation) { 
     } 

     @Override 
     public void onAnimationRepeat(Animation animation) { 
     } 

     @Override 
     public void onAnimationEnd(Animation animation) { 

      rl_footer.clearAnimation(); 

      RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
        rl_footer.getWidth(), rl_footer.getHeight()); 
      lp.setMargins(20, 0, 0, 20); 
      lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM); 
      rl_footer.setLayoutParams(lp); 
     } 
    }); 
} 

public void SlideToDown2() { 

    Animation slide = null; 
    slide = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, 
      Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 
      0.0f, Animation.RELATIVE_TO_SELF, 5.2f); 

    slide.setDuration(600); 
    slide.setFillAfter(true); 
    slide.setFillEnabled(true); 
    rl_footer2.startAnimation(slide); 

    slide.setAnimationListener(new AnimationListener() { 

     @Override 
     public void onAnimationStart(Animation animation) { 
     } 

     @Override 
     public void onAnimationRepeat(Animation animation) { 
     } 

     @Override 
     public void onAnimationEnd(Animation animation) { 

      rl_footer2.clearAnimation(); 

      RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
        rl_footer2.getWidth(), rl_footer2.getHeight()); 
      lp.setMargins(0, 0, 20, 20); 
      lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM | RelativeLayout.ALIGN_PARENT_RIGHT); 
      rl_footer2.setLayoutParams(lp); 
     } 
    }); 
} 
} 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/rl_main" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="#FF0000" > 

<RelativeLayout 
    android:id="@+id/rl_footer" 
    android:layout_width="150dp" 
    android:layout_height="150dp" 
    android:layout_alignParentTop="true" 
    android:layout_margin="20dp" 
    android:background="#666666" > 

    <ImageView 
     android:id="@+id/iv_up_arrow" 
     android:layout_width="50dp" 
     android:layout_height="50dp" 
     android:layout_centerInParent="true" 
     android:background="#000000" /> 

    <TextView 
     android:layout_width="50dp" 
     android:layout_height="50dp" 
     android:layout_centerInParent="true" 
     android:gravity="center" 
     android:text="1" 
     android:textColor="#FFFFFF" 
     android:textSize="30sp" /> 
</RelativeLayout> 

<RelativeLayout 
    android:id="@+id/rl_footer2" 
    android:layout_width="150dp" 
    android:layout_height="150dp" 
    android:layout_alignParentBottom="true" 
    android:layout_alignParentRight="true" 
    android:layout_margin="20dp" 
    android:background="#666666" > 

    <ImageView 
     android:id="@+id/iv_up_arrow2" 
     android:layout_width="50dp" 
     android:layout_height="50dp" 
     android:layout_centerInParent="true" 
     android:background="#FFFFFF" /> 

    <TextView 
     android:layout_width="50dp" 
     android:layout_height="50dp" 
     android:layout_centerInParent="true" 
     android:gravity="center" 
     android:text="2" 
     android:textColor="#000000" 
     android:textSize="30sp" /> 
</RelativeLayout> 

</RelativeLayout> 

Answer 1

J'ai développé une sous-classe d'animation pour faire cette chose exacte. Voici le code:

public class MarginAnimation extends Animation 
{ 
    private View mView; 
    private int mTargetTopMargin; 
    private int mTargetLeftMargin; 

    private int mStartTopMargin; 
    private int mStartLeftMargin; 

    public MarginAnimation(View view, int targetTopMargin, int targetLeftMargin) 
    { 
     mView = view; 
     mTargetTopMargin = targetTopMargin; 
     mTargetLeftMargin = targetLeftMargin; 

     RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)mView.getLayoutParams(); 
     mStartTopMargin = params.topMargin; 
     mStartLeftMargin = params.leftMargin; 
    } 

    @Override 
    protected void applyTransformation(float interpolatedTime, Transformation t) 
    { 
     // I assume the view is inside a RelativeLayout. Change as required. 
     RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)mView.getLayoutParams(); 

     params.topMargin = (int)(mStartTopMargin + (mTargetTopMargin - mStartTopMargin) * interpolatedTime); 
     params.leftMargin = (int)(mStartLeftMargin + (mTargetLeftMargin - mStartLeftMargin) * interpolatedTime); 

     mView.setLayoutParams(params); 
    } 

    @Override 
    public boolean willChangeBounds() 
    { 
     return true; 
    } 
} 

Utilisation:

MarginAnimation animation = new MarginAnimation(view, targetTopMargin, targetLeftMargin); 
view.startAnimation(animation); 

Je note que les animations qui font appel à des changements de mise en page ne sont pas le choix le plus optimal dans Android quand il vient à la performance, mais il devrait faire le travail terminé.

Si vous le pouvez, essayez d'effectuer une animation sur translationX/Y et effectuez les changements de disposition (margin) uniquement au début/à la fin de l'animation.