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

Posted 2023-02-26

技术标签:

【中文标题】Android动画下拉/向上视图正确【英文标题】：Android animate drop down/up view proper 【发布时间】：2012-02-12 12:53:17 【问题描述】：

我正在尝试制作正确的向下滑动动画。向下滑动的视图应将其下方的所有视图以一种平滑的方式向下推，当它向上滑动时，所有视图应以一种平滑的方式跟随。

我的尝试：

在代码中：

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_
    android:layout_
    android:orientation="vertical" >
    <ImageView 
        android:layout_alignParentLeft="true"
        android:layout_
        android:layout_
        android:src="@drawable/icon" />
</LinearLayout>

主要 XML 的顶部：

<LinearLayout
        android:id="@+id/user_list_container"
        android:layout_alignParentTop="true"
        android:orientation="vertical" 
        android:layout_
        android:layout_/>
    <LinearLayout
        android:id="@+id/container"
        android:layout_below="@+id/user_list_container"
        android:orientation="vertical" 
        android:layout_
        android:layout_>

上述方法的问题是，当我首先启动动画时，会创建视图的空白空间，然后视图会向下滑动。我希望它可以慢慢地向下推所有其他视图，而不是一气呵成。

【问题讨论】：

我认为您需要查看LayoutTransition 类。它提供了动画向/从布局添加/删除视图的机制。 【参考方案1】：

所以我最终在this answer 的帮助下自己完成了这项工作。如果是Android 3.0，我可以使用属性动画，但不是我必须自己做。

这是我最终得到的结果：

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;

示例用法：

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_
    android:layout_
    android:orientation="vertical" >
    <Button
        android:id="@+id/animatedButton"
        android:visibility="gone"
        android:layout_
        android:layout_
        android:text="@string/hello"/>
    <TextView
        android:layout_
        android:layout_
        android:text="@string/hello" />
    <Button
        android:id="@+id/button"
        android:layout_
        android:layout_
        android:text="@string/hello"/>
</LinearLayout>

编辑

测量 wrap_content 高度：

所以为了让 wrap_content 工作，我在开始动画之前测量了视图的高度，然后使用这个测量的高度作为实际高度。下面是测量视图高度并将其设置为新高度的代码（我假设视图使用屏幕宽度，根据您自己的需要更改）：

/**
 * This method 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;

【讨论】：

适用于 forcer-height 元素。但不幸的是，这种方法不适用于 wrap-content 元素:( @bixi 实际上是这样，您只需要计算包装内容的高度即可。这是可行的（做了但找不到快速参考=/，告诉我你是否需要它）很好的例子！您也可以重用 View.VISIBLE 和 View.GONE 来指示类型（动画结果）用mEndHeight = type == 0 ? mAnimatedView.getLayoutParams().height : mAnimatedView.getMeasuredHeight();替换mEndHeight = mAnimatedView.getLayoutParams().height;，它可以与wrap_content一起工作，不需要额外的方法setHeightForWrapContent(Activity activity, View view) 哦，还需要if(mEndHeight < 0) mEndHeight = mAnimatedView.getMeasuredHeight();（如果视图开始最小化，则没有它mEndHeight将是-2）【参考方案2】：

谢谢Warpzit！这是一个非常有帮助的答案。在我的例子中，我只是试图为具有 wrap_content 高度的视图设置动画。我尝试了触发两行建议，但在我的情况下不起作用。（我没有花太多时间追究原因。）我最终使用了 Warpzit 的 ExpandCollapseAnimation 的稍微修改的形式和他的静态方法来确定视图的高度

稍微详细一点：

setHeightForWrapContent()

ExpandCollapseAnimation

setHeightForWrapContent()

applyTransformation()

代码在这里：

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！

【讨论】：

以上是关于Android动画下拉/向上视图正确的主要内容，如果未能解决你的问题，请参考以下文章

Android自定义View之上拉下拉列表头部元素跟随缩放平移效果的实现

Android展开视图动画

Android ListView 在向下滚动时显示不正确的内容，然后在向上滚动时显示正确的内容

怎么自定义android 下拉刷新动画

TextViews 在 Android 4 上仅动画一次

Android：LinearLayout addView 动画