布局之间的淡入淡出效果

Question

作为一个对象，我想要在两个布局之间复制淡出效果。现在我的情况是这样的：

LinearLayout l;
LinearLayout l2;

为了在它们之间切换，我使用了

l.setVisibility(View.GONE);
l2.setVisibility(View.VISIBLE);

我想在这个过渡中添加淡入淡出效果，我该如何做？

- CeccoCQ

Answer 1

这是一个可以在两个布局之间进行淡入淡出的可行解决方案：

public class CrossFadeActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.crossfade);

    final View l1 = findViewById(R.id.l1);
    final View l2 = findViewById(R.id.l2);

    final Animation fadeOut = AnimationUtils.loadAnimation(CrossFadeActivity.this, R.anim.fade_out);
    final Animation fadeIn = AnimationUtils.loadAnimation(CrossFadeActivity.this, R.anim.fade_in);

    findViewById(R.id.button1).setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            fadeOut.setAnimationListener(new AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                }

                @Override
                public void onAnimationRepeat(Animation animation) {
                }

                @Override
                public void onAnimationEnd(Animation animation) {
                    l1.setVisibility(View.GONE);
                }
            });
            l1.startAnimation(fadeOut);
            l2.setVisibility(View.VISIBLE);
            l2.startAnimation(fadeIn);
        }
    });
    findViewById(R.id.button2).setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            fadeOut.setAnimationListener(new AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                }

                @Override
                public void onAnimationRepeat(Animation animation) {
                }

                @Override
                public void onAnimationEnd(Animation animation) {
                    l2.setVisibility(View.GONE);
                }
            });
            l2.startAnimation(fadeOut);
            l1.setVisibility(View.VISIBLE);
            l1.startAnimation(fadeIn);
        }
    });
}
}

淡入淡出.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<LinearLayout
    android:id="@+id/l1"
    android:layout_width="fill_parent"
    android:layout_height="300dip"
    android:orientation="vertical" 
    android:background="@drawable/someimage"
    >

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

</LinearLayout>

<RelativeLayout
    android:id="@+id/l2"
    android:layout_width="fill_parent"
    android:layout_height="300dip"
    android:orientation="vertical" 
    android:background="@drawable/someimage2"
    android:visibility="gone"
    >

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" 
        android:layout_centerInParent="true"
        />

</RelativeLayout>

</RelativeLayout>

其中l1和l2是两个随机示例布局。关键在于将它们放置在XML中以重叠（例如RelativeLayout），使用visible/gone添加动画侦听器以在完成时切换可见性，并在动画开始之前将要淡入的视图设置为可见，否则动画将不可见。

我将具有切换动画的侦听器按钮放在布局本身中，因为我需要以这种方式实现，但是如果只有一个按钮，则可以将单击侦听器放在其他位置（如果与某些标志或检查结合使用，则应用于知道如何切换）。

这些是动画文件。它们必须存储在res/anim文件夹中：

fade_in.xml

<?xml version="1.0" encoding="UTF-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fillAfter="true"
android:fromAlpha="0.0"
android:toAlpha="1.0" />

淡出动画效果的XML文件

<?xml version="1.0" encoding="UTF-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fillAfter="true"
android:fromAlpha="1.0"
android:toAlpha="0" />

更新:

不需要使用R.anim.fade_in，你可以使用Android API中的默认淡入效果(android.R.fade_in):

final Animation fadeIn = AnimationUtils.loadAnimation(CrossFadeActivity.this, android.R.anim.fade_in);

使用android.R.anim.fade_in，您无需创建res/anim/fade_in.xml文件。

Android有一个包含一些有用动画的包： http://developer.android.com/reference/android/R.anim.html

- User

---

你也可以使用.bringToFront()方法来反转相对布局的z-order，以便用户需要与前景交互。这个答案只涵盖了动画方面。 - the_prole

Answer 2

使用 R.anim.fade_out 和 .R.anim.fade_in，您可以创建这样的动画。我对此并不了解太多，但是这里有一篇关于Android动画的教程：动画教程。

P.S. 这个教程不是我的，因此不要归功于我。

编辑：

AnimationSet set = new AnimationSet(true);

Animation animation = new AlphaAnimation(0.0f, 1.0f);
animation.setDuration(50);
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(100);
set.addAnimation(animation);

LayoutAnimationController controller = new LayoutAnimationController(set, 0.5f);
l.setLayoutAnimation(controller);

渐隐动画

public static Animation runFadeOutAnimationOn(Activity ctx, View target) {
  Animation animation = AnimationUtils.loadAnimation(ctx,android.R.anim.fade_out);
  target.startAnimation(animation);
  return animation;
}

我猜你可以尝试这样做，我复制粘贴了教程中的动画，由于我没有Android开发经验，不知道它确切的作用。另一个例子可以是示例2

- user525192

---

我想使用android.R.anim.fade_in和fade_out，我已经读到了一些关于方法overridePendingTransiction的内容。但是我不明白如何将动画设置为LinearLayout。你能帮我吗？ - CeccoCQ

本教程涵盖了anim.fade_in和fade_out，如果您向下滚动一点，就可以看到示例代码！我认为这应该能帮助您入门。 - user525192

Answer 3

自 Android 3.0 版本以来，您可以使用以下代码：

android:animateLayoutChanges="true"

在XML中的布局，对于此特定布局的内容所做的任何更改都将在运行时进行动画处理。例如，在您的情况下，您需要为l和l2的父级布局设置此属性。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="me.kalem.android.RegistrationActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:animateLayoutChanges="true"
    android:padding="20dp">

    <LinearLayout
        android:id="@+id/l1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:visibility="visible">

    ........

    </LinearLayout>

    <LinearLayout
        android:id="@+id/l2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:visibility="gone">

    ........

    </LinearLayout>

</LinearLayout>

现在在运行时隐藏l1并显示l2将具有动画效果。

- binW