LayoutTransition:展开视图旁边的Animate View

Question

我已经将我的问题重新创建为一个非常简单的表示.我有3个TextViews.其中2 LinearLayout个是单独的,第三个是与...相同的水平LinearLayout.我切换的知名度test1和test2,我想看看他们消失(工作).此外,我想test3滑入他的新地方(取代test1和test2).我无法做到这一点.test3只是抓住它的新观点.

我怎么能得到这个？

我的代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:animateLayoutChanges="true"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click" />

    <LinearLayout android:animateLayoutChanges="true"
        android:id="@+id/child1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/test1"
            android:layout_width="match_parent" android:visibility="gone"
            android:layout_height="wrap_content"
            android:text="TEST1" />

        <TextView
            android:id="@+id/test2"
            android:layout_width="match_parent" android:visibility="gone"
            android:layout_height="wrap_content"
            android:text="TEST2" />
    </LinearLayout>

    <TextView
        android:id="@+id/test3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TEST3" />

</LinearLayout>

在我的活动中:

public class LayoutAnimations extends Activity {
    private boolean toggle = true;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_animations);

        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                if (toggle) {
                    findViewById(R.id.test1).setVisibility(View.VISIBLE);
                    findViewById(R.id.test2).setVisibility(View.VISIBLE);
                } else {
                    findViewById(R.id.test1).setVisibility(View.GONE);
                    findViewById(R.id.test2).setVisibility(View.GONE);
                }
                toggle = !toggle;
            }
        });

    }

}

编辑:我实际上有另一个TextView旁边,test1并且test2应该始终可见,所以我不能隐藏LinearLayout自己.

Answer 1

我用其他问题解决了这个问题.看到这个答案

引用:

我相信最简单的方法是扩展Animation类和覆盖applyTransformation()以更改视图的高度,如下所示:

import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.widget.LinearLayout;

public class MyCustomAnimation extends Animation {

    public final static int COLLAPSE = 1;
    public final static int EXPAND = 0;

    private View mView;
    private int mEndHeight;
    private int mType;
    private LinearLayout.LayoutParams mLayoutParams;

    public MyCustomAnimation(View view, int duration, int type) {

        setDuration(duration);
        mView = view;
        mEndHeight = mView.getHeight();
        mLayoutParams = ((LinearLayout.LayoutParams) view.getLayoutParams());
        mType = type;
        if(mType == EXPAND) {
            mLayoutParams.height = 0;
        } else {
            mLayoutParams.height = LayoutParams.WRAP_CONTENT;
        }
        view.setVisibility(View.VISIBLE);
    }

    public int getHeight(){
        return mView.getHeight();
    }

    public void setHeight(int height){
        mEndHeight = height;
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {

        super.applyTransformation(interpolatedTime, t);
        if (interpolatedTime < 1.0f) {
            if(mType == EXPAND) {
                mLayoutParams.height =  (int)(mEndHeight * interpolatedTime);
            } else {
                mLayoutParams.height = (int) (mEndHeight * (1 - interpolatedTime));
            }
            mView.requestLayout();
        } else {
            if(mType == EXPAND) {
                mLayoutParams.height = LayoutParams.WRAP_CONTENT;
                mView.requestLayout();
            }else{
                mView.setVisibility(View.GONE);
            }
        }
    }
}

要使用它,请onclick()按如下方式设置:

int height;

@Override
public void onClick(View v) {
    if(view2.getVisibility() == View.VISIBLE){
        MyCustomAnimation a = new MyCustomAnimation(view2, 1000, MyAnimation.COLLAPSE);
        height = a.getHeight();
        view2.startAnimation(a);
    }else{
        MyCustomAnimation a = new MyCustomAnimation(view2, 1000, MyAnimation.EXPAND);
        a.setHeight(height);
        view2.startAnimation(a);
    }
}

问候.

Answer 2

我希望在我的应用程序中发生同样的事情。为了达成这个：

1. 在 Res/anim 中创建合适的动画。我使用了从左侧滑出的动画。如果你对这个不满意，可以google一下其他的。

   Slide_out_left.xml

   <translate
       android:duration="@android:integer/config_mediumAnimTime"
       android:fromXDelta="0"
       android:toXDelta="-50%p" />
   
   <alpha
       android:duration="@android:integer/config_mediumAnimTime"
       android:fromAlpha="1.0"
       android:toAlpha="0.0" />
   

2. 将上面定义的动画附加到您想要设置动画的视图（在您的情况下 child1 包含 text1 和 text2）

   Animation outAnimation;
   LinearLayout a1 = (LinearLayout)findViewById(R.id.child1); 
   
   outAnimation = (Animation) AnimationUtils.loadAnimation (getApplicationContext(), R.anim.slide_out_left);
   
   a1.setAnimation(outAnimation);
   outAnimation.setAnimationListener(new  AnimationListener() {
   
       @Override
       public void onAnimationEnd(Animation arg0) {
       a1.setVisibility(View.GONE);                            
       }
       @Override
       public void onAnimationRepeat(Animation animation) {
           // TODO Auto-generated method stub                          
       }
   
       @Override
       public void onAnimationStart(Animation animation) {
           // TODO Auto-generated method stub
       }                 
   });
   a1.startAnimation(outAnimation);
   

注意：我用 child1 而不是 text3 附加了动画，因为当 child1 缓慢滑出时，它会自动产生 text3 正在滑入的错觉。