📜  Android中的共享元素过渡示例

📅  最后修改于: 2021-05-13 17:30:16             🧑  作者: Mango

共享元素过渡是Android应用程序中最常见的动画之一。当我们必须从ListView或RecyclerView打开项目时,将使用这种动画类型。 Android中的共享元素过渡确定了如何在活动之间或活动之间或片段之间对动画元素共享元素进行动画处理。现在,我们将通过一个简单的示例在我们的应用程序中看到共享元素过渡的实现。

Android中共享元素过渡的实现

在此示例中,我们将创建一个简单的应用程序,在该应用程序中,我们将使用ImageView创建两个活动,并在这两个活动之间实现过渡动画。下面给出了一个示例GIF,以使我们对本文中要做的事情有一个了解。注意,我们将使用Java语言实现该项目。

Android示例GIf中的共享元素过渡

分步实施

步骤1:创建一个新项目

要在Android Studio中创建新项目,请参阅如何在Android Studio中创建/启动新项目。请注意,选择Java作为编程语言。

步骤2:建立新的空白活动

导航到应用程序> Java >包名称>右键单击>新建>活动>空活动,并将活动命名为MainActivity2

步骤3:使用activity_main.xml文件

转到activity_main.xml文件,并参考以下代码。以下是activity_main.xml文件的代码。

XML


  
    
  
    
      
    
  


XML


  
    
  
    
      


Java
import android.os.Build;
import android.os.Bundle;
import android.transition.Fade;
import android.view.View;
  
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity2 extends AppCompatActivity {
  
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
          
        // here we are initializing 
        // fade animation.
        Fade fade = new Fade();
        View decor = getWindow().getDecorView();
          
        // here also we are excluding status bar,
        // action bar and navigation bar from animation.
        fade.excludeTarget(decor.findViewById(R.id.action_bar_container), true);
        fade.excludeTarget(android.R.id.statusBarBackground, true);
        fade.excludeTarget(android.R.id.navigationBarBackground, true);
          
        // below methods are used for adding
        // enter and exit transition.
        getWindow().setEnterTransition(fade);
        getWindow().setExitTransition(fade);
    }
}


Java
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.transition.Fade;
import android.view.View;
import android.widget.ImageView;
  
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityOptionsCompat;
import androidx.core.view.ViewCompat;
  
public class MainActivity extends AppCompatActivity {
  
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // we are adding fade animation 
        // between two imageviews.
        Fade fade = new Fade();
        View decor = getWindow().getDecorView();
          
        // below 3 lines of code is to exclude 
        // action bar,title bar and navigation 
        // bar from animation.
        fade.excludeTarget(decor.findViewById(R.id.action_bar_container), true);
        fade.excludeTarget(android.R.id.statusBarBackground, true);
        fade.excludeTarget(android.R.id.navigationBarBackground, true);
          
        // we are adding fade animaion
        // for enter transition.
        getWindow().setEnterTransition(fade);
          
        // we are also setting fade 
        // animation for exit transition.
        getWindow().setExitTransition(fade);
          
        // initializing our imageview.
        final ImageView imageView = findViewById(R.id.image);
  
        // setting on click listner for our imageview.
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // on image click we are opening new activity
                // and adding animation between this two activities.
                Intent intent = new Intent(MainActivity.this, MainActivity2.class);
                // below method is used to make scene transition
                // and adding fade animation in it.
                ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
                        MainActivity.this, imageView, ViewCompat.getTransitionName(imageView));
                // starting our activity with below method.
                startActivity(intent, options.toBundle());
            }
        });
    }
}


步骤4:使用activity_main2.xml文件

转到activity_main2.xml文件,并参考以下代码。以下是activity_main2.xml文件的代码。

XML格式



  
    
  
    
      

步骤5:使用MainActivity2。 Java文件

转到MainActivity2。 Java文件并参考以下代码。下面是MainActivity2的代码。 Java文件。在代码内部添加了注释,以更详细地了解代码。

Java

import android.os.Build;
import android.os.Bundle;
import android.transition.Fade;
import android.view.View;
  
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity2 extends AppCompatActivity {
  
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
          
        // here we are initializing 
        // fade animation.
        Fade fade = new Fade();
        View decor = getWindow().getDecorView();
          
        // here also we are excluding status bar,
        // action bar and navigation bar from animation.
        fade.excludeTarget(decor.findViewById(R.id.action_bar_container), true);
        fade.excludeTarget(android.R.id.statusBarBackground, true);
        fade.excludeTarget(android.R.id.navigationBarBackground, true);
          
        // below methods are used for adding
        // enter and exit transition.
        getWindow().setEnterTransition(fade);
        getWindow().setExitTransition(fade);
    }
}

步骤6:使用MainActivity。 Java文件

转到MainActivity。 Java文件并参考以下代码。下面是MainActivity的代码。 Java文件。在代码内部添加了注释,以更详细地了解代码。

Java

import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.transition.Fade;
import android.view.View;
import android.widget.ImageView;
  
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityOptionsCompat;
import androidx.core.view.ViewCompat;
  
public class MainActivity extends AppCompatActivity {
  
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // we are adding fade animation 
        // between two imageviews.
        Fade fade = new Fade();
        View decor = getWindow().getDecorView();
          
        // below 3 lines of code is to exclude 
        // action bar,title bar and navigation 
        // bar from animation.
        fade.excludeTarget(decor.findViewById(R.id.action_bar_container), true);
        fade.excludeTarget(android.R.id.statusBarBackground, true);
        fade.excludeTarget(android.R.id.navigationBarBackground, true);
          
        // we are adding fade animaion
        // for enter transition.
        getWindow().setEnterTransition(fade);
          
        // we are also setting fade 
        // animation for exit transition.
        getWindow().setExitTransition(fade);
          
        // initializing our imageview.
        final ImageView imageView = findViewById(R.id.image);
  
        // setting on click listner for our imageview.
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // on image click we are opening new activity
                // and adding animation between this two activities.
                Intent intent = new Intent(MainActivity.this, MainActivity2.class);
                // below method is used to make scene transition
                // and adding fade animation in it.
                ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
                        MainActivity.this, imageView, ViewCompat.getTransitionName(imageView));
                // starting our activity with below method.
                startActivity(intent, options.toBundle());
            }
        });
    }
}

输出:

查看应用程序的代码: https : //github.com/ChaitanyaMunje/GFGImageSlider/tree/SharedElementTransition