使用平移动画将视图从一个布局转换到另一个布局

Question

我是新手Android动画，我的要求是在单个xml文件中单击视图时将一个视图从一个布局转换到另一个布局。 场景： 假设我点击一个按钮（位于xml文件标题的顶部），它应该向下移动/平移（应该给人一种它位于标题下方的其他布局上的影响），并且我希望当用户再次单击相同的按钮时，它现在应该移回到原来的位置。 在这里，我将使用我的xml文件来解释：

     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/app_bg"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/top"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/header"
        android:paddingLeft="10dp"
        android:paddingRight="10dp" >

        <Button
            android:id="@+id/btnSearchHeader"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_centerInParent="true"
            android:background="@drawable/search_icon" />


    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/bottom"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@color/app_transparent"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_marginTop="10dp"
        android:visibility="visible" >

        <Button
            android:id="@+id/btnMenu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="5dp"
            android:text="ABC" />

        <Button
            android:id="@+id/btnSearchSelected"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/btnMenu"
            android:text="CDE" />
    </RelativeLayout>
</LinearLayout>

更精确的需求规格（请仔细阅读：）

这里有两个子内部布局：

顶部布局 - id-> top 底部布局 - id -> bottom

现在，一个视图（按钮 -> btnSearchHeader）位于我的顶部布局中，我想在点击该按钮时将其动画到底部布局（它应该给人一种被转换到底部布局的影响），当用户单击该按钮时，它应该再次通过平移动画返回到其原始位置...即它应该显示回在顶部布局中。

我不知道如何使用平移动画来实现这些影响，但我只有基本的平移动画知识，这对我来说是不足够的。

任何相关帮助都是可赞赏的。

谢谢

- samsad

---

你可以尝试的是，在页面上有三个按钮：A（在顶部）、B、C（在底部）。当点击A时，它会变为不可见状态，B会变为可见状态并移动到C的位置，然后B也变为不可见状态，C变为可见状态。整个过程反之亦然。 - user2609847

也许你还没有检查过这个：http://developer.android.com/training/animation/layout.html - clemp6r

仍然不清楚你在问什么。也许图片会有所帮助。 - Paul Burke

Answer 1

你尝试过像下面这样简单的东西吗？

 final int topHeight = findViewById(R.id.top).getHeight();         
 final int bottomHeight = findViewById(R.id.bottom).getHeight();   
 final View button = findViewById(R.id.btnSearchHeader);                                                                              
 final ObjectAnimator moveDownAnim = ObjectAnimator.ofFloat(button, "translationY", 0.F, topHeight + bottomHeight / 2 - button.getHeight() / 2);
 final ObjectAnimator moveUpAnim = ObjectAnimator.ofFloat(button, "translationY", topHeight + bottomHeight / 2 - button.getHeight() / 2, 0.F);
 button.setOnClickListener(new View.OnClickListener() { 
     @Override                   
     public void onClick(View v) {     
         if (0.F == v.getTranslationY())
             moveDownAnim.start(); 
         else                    
             moveUpAnim.start();
     }
 });

如果您确实需要按钮视图更改父级，则可以在每个动画结束时使用AnimatorListener来实现此目的。类似于以下内容：

moveDownAnim.addListener(new Animator.AnimatorListener() { 
    @Override                                          
    public void onAnimationEnd(Animator animation) {   
        ((ViewGroup)findViewById(R.id.top)).removeView(button);
        ((ViewGroup)findViewById(R.id.bottom)).addView(button);
        ((RelativeLayout)button.getLayoutParams()).addRule(RelativeLayout.CENTER_IN_PARENT);
        button.setTranslationY(0.F);        // Since it is now positioned in the new layout, no need for translation. 
    }       
    @Override
    public void onAnimationCancel(Animator animation)  { /* NOP */ }
    @Override
    public void onAnimationRepeat(Animator animation)  { /* NOP */ }
    @Override
    public void onAnimationStart(Animator animation)   { /* NOP */ }
});

（并为moveUpAnim提供类似的监听器。）

然而，我怀疑你不需要真正这样做就能达到你想要的视觉效果。但是，如果你确实需要这部分，你可能还需要为你的top视图设置一个固定高度，而不是wrap_content。（否则，如果在按钮移动到底部视图时发生布局传递，顶部布局的高度可能会变为0，如果没有其他内容的话。）最简单的方法是直接在xml布局文件中进行操作。然而，如果你想“即兴发挥”，你可以在onAnimationEnd()方法中更改布局的高度，例如：

@Override                                          
public void onAnimationEnd(Animator animation) { 
    final ViewGroup topLayout = findViewById(R.id.top);
    topLayout.getLayoutParams().height = topLayout.getHeight();    // Keep it the same height...
    topLayout.removeView(button);
    ((ViewGroup)findViewById(R.id.bottom)).addView(button);
    ((RelativeLayout)button.getLayoutParams()).addRule(RelativeLayout.CENTER_IN_PARENT);
    button.setTranslationY(0.F);        // Since it is now positioned in the new layout, no need for translation. 
}

- Turix