Android - 一次激活多个视图的边距/更改位置

时间:2015-10-11 22:54:02

标签: android android-layout android-animation android-view

我有一个带有4个按钮的RelativeLayout。在某些事件中,我希望通过动画更改所有四个按钮的位置/更改边距。

我目前正在使用以下代码

final RelativeLayout.MarginLayoutParams params1 = (RelativeLayout.MarginLayoutParams) button1.getLayoutParams();
final RelativeLayout.MarginLayoutParams params2 = (RelativeLayout.MarginLayoutParams) button2.getLayoutParams();
final RelativeLayout.MarginLayoutParams params3 = (RelativeLayout.MarginLayoutParams) button3.getLayoutParams();
final RelativeLayout.MarginLayoutParams params4 = (RelativeLayout.MarginLayoutParams) button4.getLayoutParams();
final RelativeLayout.MarginLayoutParams params5 = (RelativeLayout.MarginLayoutParams) button5.getLayoutParams();

ValueAnimator animator1 = ValueAnimator.ofInt(params1.rightMargin, (deviceWidth - availableWithForTabs + spaceForTabs));
ValueAnimator animator2 = ValueAnimator.ofInt(params2.rightMargin, dpToPx(78));
ValueAnimator animator3 = ValueAnimator.ofInt(params3.rightMargin, dpToPx(52));
ValueAnimator animator4 = ValueAnimator.ofInt(params4.rightMargin, dpToPx(26));
ValueAnimator animator5 = ValueAnimator.ofInt(params5.rightMargin, dpToPx(0));

animator5.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
        params5.rightMargin = (Integer) valueAnimator.getAnimatedValue();
    }
});
animator5.setDuration(150);
animator5.start();

animator4.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
        params4.rightMargin = (Integer) valueAnimator.getAnimatedValue();
    }
);
animator4.setDuration(150);
animator4.start();

animator3.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
        params3.rightMargin = (Integer) valueAnimator.getAnimatedValue();
    }
 });
 animator3.setDuration(150);
 animator3.start();

 animator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
     @Override
     public void onAnimationUpdate(ValueAnimator valueAnimator) {
        params2.rightMargin = (Integer) valueAnimator.getAnimatedValue();
     }
 });
 animator2.setDuration(150);
 animator2.start();

 animator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
 @Override
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
        params1.rightMargin = (Integer) valueAnimator.getAnimatedValue();
        button1.requestLayout();
    }
 });
animator1.setDuration(150);
animator1.start();

我觉得上面的代码太多,无法为5个按钮设置边距变化。任何人都可以告诉我一个更好的方法吗?或者我有什么其他选择?我必须支持sdk 16 +

2 个答案:

答案 0 :(得分:2)

您可能希望重新考虑您的设计,使用ViewPropertyAnimator可以为您节省大量代码并且非常易读/可维护。

使用ViewPropertyAnimator非常简单:

Button button1 = (Button) findViewById(R.id.button1);
button1.animate()
       .translationX(toX)
       .translationY(toY)
       .setDuration(milliseconds);  // add more if you 
                                    // like (alpha, startDelay)                             
                                    // check the docs for available methods

动画始终从视图的当前位置开始。

为了更清晰的代码,为什么不尝试这样的事情:

编写自己的动画方法,将视图(在您的情况下为按钮)和您需要的所有值作为参数(在x和y轴上移动视图的最小实现):

private void animateView(View view, float toX, float toY, int duration) {
    view.animate()
        .translationX(toX)
        .translationY(toY)
        .setDuration(duration);
}

然后你可以简单地在你的按钮上调用这个方法来单独为它们设置动画f.e. :

animateView(button1, 5.0f, 2.5f, 150);
animateView(button2, 2.5f, 1.0f, 150);

当然5.0f,2.5f等只是虚构的数字,你必须自己填写想要移动视图的地方。

额外建议:使用插补器让你的动画更像f一样,总是很好。即:

view.animate()
    .translationX(...)
    .translationY(...)
    .setInterpolator(new AccelerateDecelerateInterpolator())
    .setDuration(...);

如果这还不够彻底,或者有任何不清楚的地方,请告诉我。

更新: 如果要设置监听器,可以在类中实现Animator.AnimatorListener接口,如下所示:

public class yourClass extends AppCompatActivity implements Animator.AnimatorListener {...

然后你被迫实现以下方法:

 @Override
 public void onAnimationEnd(Animator animation) {
 // here you can call stuff that should happen when the animation ends,
//     f.e. start the next animation
// the method names explain themselves 
 }
@Override
public void onAnimationStart(Animator animation) {

}

@Override
public void onAnimationCancel(Animator animation) {

}

@Override
public void onAnimationRepeat(Animator animation) {

}

然后,您只需在animateView方法中添加另一行:

view.animate()
...
...
.setListener(this);

或者您可以在匿名内部类中执行此操作:

view.animate()
...
...
.setListener(new Animator.AnimatorListener() {

    @Override
    public void onAnimationEnd(Animator animation) {

    }
     // same methods as above ...
    ...
)};

答案 1 :(得分:0)

为什么不直接为包含4个按钮的整个相对布局设置动画。

我还建议使用View.animate方法

  

public ViewPropertyAnimator animate()

     

在API级别12中添加   此方法返回一个ViewPropertyAnimator对象,该对象可用于为此视图上的特定属性设置动画。

     

返回   ViewPropertyAnimator与此视图关联的ViewPropertyAnimator。