Android动画下拉/向上视图正确

时间:2012-02-12 12:53:17

标签: android animation view

好的,我正在尝试做一个合适的滑动动画。向下滑动的视图应该将所有视图推向一个平滑的运动,并且当它向上滑动时,所有视图都应该在一个平滑的运动中跟随。

我尝试了什么: 在代码中:

LinearLayout lin = (LinearLayout)findViewById(R.id.user_list_container);
                setLayoutAnimSlidedownfromtop(lin, this);
                lin.addView(getLayoutInflater().inflate(R.layout.user_panel,null),0);

public static void setLayoutAnimSlidedownfromtop(ViewGroup panel, Context ctx) {

      AnimationSet set = new AnimationSet(true);

      Animation animation = new AlphaAnimation(0.0f, 1.0f);
      animation.setDuration(100);
      set.addAnimation(animation);

      animation = new TranslateAnimation(
          Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f,
          Animation.RELATIVE_TO_SELF, -1.0f, Animation.RELATIVE_TO_SELF, 0.0f
      );
      animation.setDuration(500);
      set.addAnimation(animation);

      LayoutAnimationController controller =
          new LayoutAnimationController(set, 0.25f);
      panel.setLayoutAnimation(controller);

}

我的user_panel.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:orientation="vertical" >
    <ImageView 
        android:layout_alignParentLeft="true"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:src="@drawable/icon" />
</LinearLayout>

主要xml的顶部:

<LinearLayout
        android:id="@+id/user_list_container"
        android:layout_alignParentTop="true"
        android:orientation="vertical" 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
    <LinearLayout
        android:id="@+id/container"
        android:layout_below="@+id/user_list_container"
        android:orientation="vertical" 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

上述方法的问题在于,当我首先开始动画时,会创建视图的空白区域,然后视图向下滑动。我希望它能够慢慢地推动所有其他视图,而不是一次性地完成它。

2 个答案:

答案 0 :(得分:56)

所以我最终自己做了一些帮助:https://stackoverflow.com/a/9112691/969325。 如果它是android 3.0(http://developer.android.com/guide/topics/graphics/animation.html)我可以使用属性动画,但不是这样我自己必须这样做。

以下是我最终的结果:

import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;

/**
 * Class for handling collapse and expand animations.
 * @author Esben Gaarsmand
 *
 */
public class ExpandCollapseAnimation extends Animation {
    private View mAnimatedView;
    private int mEndHeight;
    private int mType;

    /**
     * Initializes expand collapse animation, has two types, collapse (1) and expand (0).
     * @param view The view to animate
     * @param duration
     * @param type The type of animation: 0 will expand from gone and 0 size to visible and layout size defined in xml. 
     * 1 will collapse view and set to gone
     */
    public ExpandCollapseAnimation(View view, int duration, int type) {
        setDuration(duration);
        mAnimatedView = view;
        mEndHeight = mAnimatedView.getLayoutParams().height;
        mType = type;
        if(mType == 0) {
            mAnimatedView.getLayoutParams().height = 0;
            mAnimatedView.setVisibility(View.VISIBLE);
        }
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);
        if (interpolatedTime < 1.0f) {
            if(mType == 0) {
                mAnimatedView.getLayoutParams().height = (int) (mEndHeight * interpolatedTime);
            } else {
                mAnimatedView.getLayoutParams().height = mEndHeight - (int) (mEndHeight * interpolatedTime);
            }
            mAnimatedView.requestLayout();
        } else {
            if(mType == 0) {
                mAnimatedView.getLayoutParams().height = mEndHeight;
                mAnimatedView.requestLayout();
            } else {
                mAnimatedView.getLayoutParams().height = 0;
                mAnimatedView.setVisibility(View.GONE);
                mAnimatedView.requestLayout();
                mAnimatedView.getLayoutParams().height = mEndHeight;
            }
        }
    }
}

示例ussage:

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class AnimationTestActivity extends Activity {
    private boolean mActive = false;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        final Button animatedButton = (Button) findViewById(R.id.animatedButton);

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

            @Override
            public void onClick(View v) {
                ExpandCollapseAnimation animation = null;
                if(mActive) {
                    animation = new ExpandCollapseAnimation(animatedButton, 1000, 1);
                    mActive = false;
                } else {
                    animation = new ExpandCollapseAnimation(animatedButton, 1000, 0);
                    mActive = true;
                }
                animatedButton.startAnimation(animation);
            }
        });
    }
}

的xml:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <Button
        android:id="@+id/animatedButton"
        android:visibility="gone"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:text="@string/hello"/>
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <Button
        android:id="@+id/button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello"/>
</LinearLayout>

修改

测量wrap_content高度:

因此,为了让它适用于wrap_content,我在开始动画之前测量了视图的高度,然后将此测量高度用作实际高度。 Bellow是用于测量视图高度的代码,并将其设置为新高度(我假设视图使用屏幕宽度,根据您自己的需要进行更改):

/**
 * This methode can be used to calculate the height and set it for views with wrap_content as height. 
 * This should be done before ExpandCollapseAnimation is created.
 * @param activity
 * @param view
 */
public static void setHeightForWrapContent(Activity activity, View view) {
    DisplayMetrics metrics = new DisplayMetrics();
    activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);

    int screenWidth = metrics.widthPixels;

    int heightMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
    int widthMeasureSpec = MeasureSpec.makeMeasureSpec(screenWidth, MeasureSpec.EXACTLY);

    view.measure(widthMeasureSpec, heightMeasureSpec);
    int height = view.getMeasuredHeight();
    view.getLayoutParams().height = height;
}

答案 1 :(得分:5)

谢谢Warpzit!这是一个非常有用的答案。在我的情况下,我只是尝试使用wrap_content高度为视图设置动画。我尝试过triggs两行建议,但它在我的情况下不起作用。 (我没有花太多时间去追求原因。)我最后使用一种稍微修改过的Warpzit ExpandCollapseAnimation形式的静态方法来确定视图的高度

稍微详细一点:

  1. 我在setHeightForWrapContent()类中包含了他的静态方法ExpandCollapseAnimation
  2. 我调用setHeightForWrapContent()构造函数中的ExpandCollapseAnimation来正确确定视图的高度。为此,我必须使用构造函数传递活动。
  3. applyTransformation()方法中,当视图最终减小到零高度时,我将视图的高度返回到wrap_content。如果您不这样做,并在以后更改视图的内容,则在展开视图时,视图将扩展到之前确定的高度。
  4. 代码在这里:

    public class ExpandCollapseAnimation extends Animation {
        private View mAnimatedView;
        private int mEndHeight;
        private int mType;
    
        public ExpandCollapseAnimation(View view, int duration, int type, Activity activity) {
            setDuration(duration);
            mAnimatedView = view;
    
            setHeightForWrapContent(activity, view);
    
            mEndHeight = mAnimatedView.getLayoutParams().height;
    
            mType = type;
            if(mType == 0) {
                mAnimatedView.getLayoutParams().height = 0;
                mAnimatedView.setVisibility(View.VISIBLE);
            }
        }
    
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            super.applyTransformation(interpolatedTime, t);
            if (interpolatedTime < 1.0f) {
                if(mType == 0) {
                    mAnimatedView.getLayoutParams().height = (int) (mEndHeight * interpolatedTime);
                } else {
                    mAnimatedView.getLayoutParams().height = mEndHeight - (int) (mEndHeight * interpolatedTime);
                }
                mAnimatedView.requestLayout();
            } else {
                if(mType == 0) {
                    mAnimatedView.getLayoutParams().height = mEndHeight;
                    mAnimatedView.requestLayout();
                } else {
                    mAnimatedView.getLayoutParams().height = 0;
                    mAnimatedView.setVisibility(View.GONE);
                    mAnimatedView.requestLayout();
                    mAnimatedView.getLayoutParams().height = LayoutParams.WRAP_CONTENT;     // Return to wrap
                }
            }
        }
    
        public static void setHeightForWrapContent(Activity activity, View view) {
            DisplayMetrics metrics = new DisplayMetrics();
            activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);
    
            int screenWidth = metrics.widthPixels;
    
            int heightMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
            int widthMeasureSpec = MeasureSpec.makeMeasureSpec(screenWidth, MeasureSpec.EXACTLY);
    
            view.measure(widthMeasureSpec, heightMeasureSpec);
            int height = view.getMeasuredHeight();
            view.getLayoutParams().height = height;
        }
    }
    

    再次感谢Warpzit!