交叉淡入淡出ImageView的最佳方式

时间:2016-08-11 22:04:14

标签: android cross-fade

我正在为我的班级做这个项目 你可以点击巴特辛普森的图像,当荷马辛普森退去时,它会淡出。

我需要帮助的是可以点击荷马并返回巴特。

我的代码是

Activity_xml

   <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.eric.layoutdemo2.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:id="@+id/bart"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:src="@drawable/bart"
        android:onClick="fade"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:id="@+id/homer"
        android:layout_alignTop="@+id/bart"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:alpha="0"
        android:src="@drawable/homer"
       />
     </RelativeLayout>

主要活动

    import android.support.v7.app.ActionBarActivity;
        import android.os.Bundle;
        import android.view.Menu;
        import android.view.MenuItem;
        import android.view.View;
        import android.widget.ImageView;


   public class MainActivity extends ActionBarActivity {

       public void fade(View view) {

        ImageView bart = (ImageView) findViewById(R.id.bart);

        ImageView homer = (ImageView) findViewById(R.id.homer);


        bart.animate().alpha(0f).setDuration(2000);

        homer.animate().alpha(1f).setDuration(2000);
        bart.bringToFront();
    }

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




    }

4 个答案:

答案 0 :(得分:4)

很简单,您必须将OnClickListener定义为本垒打对象以及何时触发调用淡入淡出功能。

public class MainActivity extends ActionBarActivity implements View.OnClickListener{
    ImageView homer, bart;

    private void fade(ImageView v1, ImageView v2) {
        v1.animate().alpha(0f).setDuration(2000);
        v2.animate().alpha(1f).setDuration(2000);
        v2.bringToFront();
    }

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

        bart = (ImageView) findViewById(R.id.bart);
        homer = (ImageView) findViewById(R.id.homer);

        bart.setOnClickListener(this);
        homer.setOnClickListener(this);
    }

    @Override
    public void onClick(View v){
        switch(v.getId()){
            case R.id.bart:
                fade(bart, homer);
                     break;

            case R.id.homer:
                fade(homer, bart);
                     break;
        }
    }
}

答案 1 :(得分:2)

跟随是执行交叉渐变并再次单击返回的简单方法:

XML:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="top" />

    <ImageView
        android:id="@+id/bart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true"
        android:onClick="fade"
        app:srcCompat="@drawable/bart"
        tools:layout_editor_absoluteX="105dp"
        tools:layout_editor_absoluteY="190dp" />
    <ImageView
        android:id="@+id/homer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:alpha="0"
        app:srcCompat="@drawable/homer"
        tools:layout_editor_absoluteX="105dp"
        tools:layout_editor_absoluteY="190dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

主要:

public class MainActivity extends AppCompatActivity {

    public void fade(View view){
        ImageView bart = (ImageView) findViewById(R.id.bart);
        ImageView homer = (ImageView) findViewById(R.id.homer);
        if (bart.getAlpha()==1f) {
            bart.animate().alpha(0f).setDuration(4000);
            homer.animate().alpha(1f).setDuration(4000);
        }
        else{
            bart.animate().alpha(1f).setDuration(4000);
            homer.animate().alpha(0f).setDuration(4000);
        }

    }

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

答案 2 :(得分:1)

这是一种更简单的方法。只需在本垒打上添加一个onclick函数并使用.bringToFront();使他面对bart,这是因为虽然本垒打是可见的并且bart不是bart在他面前并且第二个函数不会被类似地执行。在bart上使用.bringToFront();。我用过其他图片。 这是xml。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.pembatamang.myapplication.MainActivity"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="0dp">

    <ImageView
        android:id="@+id/eevee"
        android:layout_width="368dp"
        android:layout_height="495dp"
        android:alpha="0"
        android:onClick="fade1"
        android:src="@drawable/evee"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/squirtle"
        android:layout_width="wrap_content"
        android:layout_height="495dp"
        android:onClick="fade"
        android:src="@drawable/squirtle"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</android.support.constraint.ConstraintLayout>

这是java代码。

package com.example.pembatamang.myapplication;


import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    public void fade(View view) {
        ImageView squirtle1 = (ImageView) findViewById(R.id.squirtle);
        ImageView eevee1 = (ImageView) findViewById(R.id.eevee);
        squirtle1.animate().alpha(0f).setDuration(2000);
        eevee1.animate().alpha(1f).setDuration(2000);
        eevee1.bringToFront();
    }

    public void fade1(View view) {
        ImageView squirtle1 = (ImageView) findViewById(R.id.squirtle);
        ImageView eevee1 = (ImageView) findViewById(R.id.eevee);
        eevee1.animate().alpha(0f).setDuration(2000);
        squirtle1.animate().alpha(1f).setDuration(2000);
        squirtle1.bringToFront();
    }


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


    }
}

答案 3 :(得分:1)

首先,在XML文件中添加bart和homer的ImageView,并将它们的id分别设置为bart和homer。

然后在XML文件的同一设计菜单中将bart的alpha值设置为1,将homer的alpha设置为0。

之后,将此代码添加到活动的java文件中。

public void fade(View view)
{
    ImageView bart = (ImageView) findViewById(R.id.bart);
    ImageView homer = (ImageView) findViewById(R.id.homer);

    bart.animate().alpha(0f).setDuration(2000);
    homer.animate().alpha(1f).setDuration(2000);
}