如何向下滑动视图？答案

【问题标题】：How to slide down a view?如何向下滑动视图？
【发布时间】：2011-07-22 12:17:32
【问题描述】：

我正在将应用程序从 iOS 移植到 Android。在 iOS 应用程序中，有一个视图“下拉”的动画，同时将其下方的视图向下推。参见此处的示例（下载此应用并单击“加入”按钮以查看下拉面板效果）： AppFreeway

我一直在尝试在 Android 中复制这种效果，通过在 XML 中创建 TranslateAnimation 并随后为下拉视图调用 setAnimation 非常接近：

<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%" android:toXDelta="0%"
android:fromYDelta="-100%" android:toYDelta="0%"
android:duration="500" />

anim = AnimationUtils.loadAnimation(
                this, R.anim.contact_animation_enter);
joinPanel.startAnimation(anim);

问题是当我使用 parent.addView(panel, 0) 将视图添加到父视图时，因为父视图会立即将所有内容向下移动，并且只有稍后动画开始。如果您观看 iOS 版本，您会看到当点击“加入”按钮时，随着下拉面板进入视图，所有内容都会被动画化。

有什么想法可以达到同样的效果吗？

【问题讨论】：

标签： android animation view

【解决方案1】：

这就是我在我创建的自定义视图中的做法。我想显示的视图已经用android:visibility = "gone" 编码到xml 布局文件中。我唯一没有想到的是当 EditText 框缩放时，它会放大文本，然后将其缩小到正常大小。如果我找到解决此问题的方法，我会发布它。

private EditText m_editText;  

protected void onFinishInflate ()
{
    super.onFinishInflate ();

    m_editText = (EditText) findViewById(R.id.edit_text);
}


public void displayView(View activateView)
{
    if (activateView.getVisibility() == View.GONE)
    {
        //fade in from top
        activateView.setVisibility(View.VISIBLE);
        final Animation fadeInFromTopAnimation = AnimationUtils.loadAnimation(context, R.anim.fade_in_from_top);
        fadeInFromTopAnimation.setAnimationListener(new AnimationListener()
            {
                public void onAnimationStart(Animation anim)
                {
                    //Shrink the text box down while inserting new view
                    //Add any padding or margins if needed
                    float scale = (float)(m_editText.getHeight() + m_weatherRow.getHeight()) / m_editText.getHeight();

                    AnimationSet shrinkDownAnimation = new AnimationSet(true);
                    shrinkDownAnimation.setInterpolator(new LinearInterpolator());
                    ScaleAnimation scaleAnimation = new ScaleAnimation(1, 1,  //X Scale
                                                                       scale, 1,  //Y Scale
                                                                       Animation.RELATIVE_TO_SELF, 0.5f, //X Pivot Point (set to center but it shouldn't matter)
                                                                       Animation.RELATIVE_TO_SELF, 1.0f); //Y Pivot Point (bottom)
                    scaleAnimation.setDuration(fadeInFromTopAnimation.getDuration());
                    shrinkDownAnimation.addAnimation(scaleAnimation);

                    m_editText.startAnimation(shrinkDownAnimation);
                }
                public void onAnimationEnd(Animation anim) {}
                public void onAnimationRepeat(Animation anim) {}
            });

        activateView.startAnimation(fadeInFromTopAnimation);

这是我的fade_in_from_top.xml 动画文件：

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android           = "http://schemas.android.com/apk/res/android"
    android:interpolator    = "@android:anim/linear_interpolator">

    <alpha
        android:fromAlpha       = "0"
        android:toAlpha         = "1"
        android:duration        = "500">
    </alpha>

    <scale
        android:fromXScale      = "1"
        android:fromYScale      = "0"
        android:toXScale        = "1"
        android:toYScale        = "1"
        android:pivotX          = "50%"
        android:pivotY          = "0%"
        android:duration        = "500">
    </scale>
</set>

【讨论】：