使用翻译动画将视图从一个布局转换为另一个布局

时间:2014-03-07 05:53:06

标签: android android-layout translate-animation

我是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-&gt;最佳 底部布局 - id - &gt;底

现在一个视图(Button - &gt; btnSearchHeader)位于我的顶部布局中,我希望将其设置为底部布局的动画(它应该会产生一个影响,它将翻译动画转换为底部布局)点击该按钮,当用户点击该按钮时,它应该再次转换回原始位置并使用翻译动画..即它应该显示在顶部布局中

我不知道如何使用翻译动画来提供这些影响,但是我只有一个基本的翻译动画知识,这对我来说不足以满足我的要求。

任何类型的相关帮助都很明显。

由于

1 个答案:

答案 0 :(得分:0)

您是否尝试过以下简单的内容?

 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. 
}