如何向下滑动视图?

时间:2011-07-22 12:17:33

标签: android animation view

我正在将应用从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(面板,0)将视图添加到父视图时,因为父级会立即向下移动所有内容并且仅以后动画开始。如果您观看iOS版本,您会看到当点击“加入”按钮时,当下拉面板移动到视图中时,所有内容都会变为动画。

关于如何达到同样效果的任何想法?

1 个答案:

答案 0 :(得分:2)

这是我在我创建的自定义视图中执行此操作的方式。我想要显示已经使用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>