Как добавить слайд-анимацию между действиями в Android?

Опубликовано: 5 Января, 2022

В этой статье мы узнаем, как добавить анимацию слайд-экрана между различными действиями, чтобы улучшить UX. Приложения состоят из множества действий, и для навигации между ними может быть очень полезна анимация слайд-экрана. Анимация играет очень важную роль в любом приложении, если в приложении есть анимация, она, несомненно, привлекает пользователя.

Подход:

Создайте новый каталог ресурсов Android и для этого щелкните правой кнопкой мыши папку res -> Android.
Каталог ресурсов, не забудьте выбрать тип ресурса как anim .

Создайте файл slide_in_left.xml и добавьте следующий код.

slide_in_left.xml

 <? xml version = "1.0" encoding = "utf-8" ?>
 < set xmlns:android = " http://schemas.android.com/apk/res/android " >
    < translate
        android:duration = "@android:integer/config_mediumAnimTime"
        android:fromXDelta = "-100%p"
        android:toXDelta = "0" />
 </ set > 

Создайте файл slide_in_right.xml и добавьте следующий код.

slide_in_right.xml

 <? xml version = "1.0" encoding = "utf-8" ?>
 < set xmlns:android = " http://schemas.android.com/apk/res/android " >
    < translate
        android:duration = "@android:integer/config_mediumAnimTime"
        android:fromXDelta = "100%p"
        android:toXDelta = "0" />
 </ set > 

Создайте файл slide_out_left.xml и добавьте следующий код.

slide_out_left.xml

 <? xml version = "1.0" encoding = "utf-8" ?>
 < set xmlns:android = " http://schemas.android.com/apk/res/android " >
    < translate
        android:duration = "@android:integer/config_mediumAnimTime"
        android:fromXDelta = "0"
        android:toXDelta = "-100%p" />
 </ set > 

Создайте файл slide_out_right.xml и добавьте следующий код.

slide_out_right.xml

 <? xml version = "1.0" encoding = "utf-8" ?>
 < set xmlns:android = " http://schemas.android.com/apk/res/android " >
    < translate
        android:duration = "@android:integer/config_mediumAnimTime"
        android:fromXDelta = "0"
        android:toXDelta = "100%p" />
 </ set > 

Теперь создайте файл activity_main2.xml. Добавьте следующий код. В этом файле мы добавляем атрибут onClick к нашей кнопке, который будет вызывать функцию open3rdActivity при нажатии.

activity_main2.xml

 <? xml version = "1.0" encoding = "utf-8" ?>
 < LinearLayout
    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:gravity = "center"
    android:orientation = "vertical"
    tools:context = ".MainActivity2" >
 
    < TextView
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text = "Learn Algorithm"
        android:textColor = "#219806"
        android:textSize = "30sp" />
 
    < Button
        android:textAllCaps = "false"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:onClick = "Open3rdActivity"
        android:text = "Open Third Activity" />
 
</ LinearLayout > 

Теперь создайте файл activity_main3.xml. Добавьте следующий код, он добавит текстовое представление в макет.

activity_main3.xml

 <? xml version = "1.0" encoding = "utf-8" ?>
 < LinearLayout
 
    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:gravity = "center"
    android:orientation = "vertical"
    tools:context = ".MainActivity3" >
 
    < TextView
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text = "Buy Course"
        android:textColor = "#219806"
        android:textSize = "30sp" />
 
</ LinearLayout > 

Теперь создайте файл MainActivity2.java. Добавьте следующий код. Здесь мы добавляем функцию Open3rdActivity, которая вызывается при нажатии кнопки. Он использует намерение для открытия MainActivity3 . Также мы переопределяем функцию onBackPressed, чтобы добавить анимацию для возврата из текущего действия.

MainActivity2.java

 package org.geeksforgeeks.gfgslidescreen;
 
import androidx.appcompat.app.AppCompatActivity;
 import android.content.Intent;
 import android.os.Bundle;
 import android.view.View;
 
public class MainActivity2 extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super .onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
    }
 
    // This function gets invoked automatically when the
    // user clicks on the button.
    public void Open3rdActivity(View view)
    {
        Intent intent = new Intent( this , MainActivity3. class );
        startActivity(intent);
    }
 
    // when the user pressed back button this function
    // get invoked automatically.
    @Override
    public void onBackPressed()
    {
        super .onBackPressed();
        overridePendingTransition(R.anim.slide_in_left,
                                  R.anim.slide_out_right);
    }
 }

Теперь создайте файл MainActivity3.java. Добавьте следующий код.

MainActivity3.java

 package org.geeksforgeeks.gfgslidescreen;
 
import androidx.appcompat.app.AppCompatActivity;
 import android.os.Bundle;
 
public class MainActivity3 extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super .onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
    }
 }

Теперь добавьте следующий код в activity_main.xml file.in этот файл мы добавляем атрибут OnClick к нашей кнопке.

activity_main.xml

 <? xml version = "1.0" encoding = "utf-8" ?>
 < LinearLayout
 
    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:gravity = "center"
    android:orientation = "vertical"
    tools:context = ".MainActivity" >
 
    < TextView
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text = "GeeksForGeeks"
        android:textColor = "#219806"
        android:textSize = "30sp" />
 
    < Button
        android:textAllCaps = "false"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:onClick = "OpenSecondActivity"
        android:text = "Open Second Activity " />
 
</ LinearLayout > 

Теперь добавьте следующий код в файл MainActivity.java. Здесь мы добавляем функцию OpenSecondActivity, которая вызывается при нажатии кнопки. t использует намерение, чтобы открыть MainActivity3 . Также в функцию добавляем анимацию перехода на MainActivity2 .

MainActivity.java

 package org.geeksforgeeks.gfgslidescreen;
 
import androidx.appcompat.app.AppCompatActivity;
 import android.content.Intent;
 import android.os.Bundle;
 import android.view.View;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super .onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
 
    // when the user pressed back button this function
    // get invoked automatically.
    public void OpenSecondActivity(View view)
    {
        Intent intent = new Intent( this , MainActivity2. class );
        startActivity(intent);
        overridePendingTransition(R.anim.slide_in_right,
                                  R.anim.slide_out_left);
    }
 }

Не забудьте добавить действия в файл манифеста.
Выход:

Вы можете заметить , что , когда пользователь нажимает на кнопку OpenSecondActivity и кнопки OpenThirdAcivity затем обе кнопки открытой активности в различных анимации.
Когда пользователь находится в третьем действии и нажимает кнопку «Назад», вызывается анимация по умолчанию, тогда как когда пользователь находится во втором действии и нажимает кнопку «Назад», вызывается наша определенная анимация.

Если вы хотите установить анимацию для всего приложения, вы можете сделать это, выполнив этот простой шаг. Добавьте следующий код в файл style.xml.

style.xml

 < resources >
    <!-- Base application theme. -->
    < style name = "AppTheme" parent = "Theme.AppCompat.Light.DarkActionBar" >
        <!-- Customize your theme here. -->
        < item name = "colorPrimary" >
                    @color/colorPrimary</ item >
        < item name = "colorPrimaryDark" >
                    @color/colorPrimaryDark</ item >
        < item name = "colorAccent" >
                    @color/colorAccent</ item >
        < item name = "android:windowAnimationStyle" >
                    @style/MyCustomActivityAnimation</ item >
    </ style >
 
    < style name = "MyCustomActivityAnimation"
                parent = "@android:style/Animation.Activity" >
        < item name = "android:activityOpenEnterAnimation" >
                    @anim/slide_in_right</ item >
        < item name = "android:activityOpenExitAnimation" >
                    @anim/slide_out_left</ item >
        < item name = "android:activityCloseEnterAnimation" >
                    @anim/slide_in_left</ item >
        < item name = "android:activityCloseExitAnimation" >
                    @anim/slide_out_right</ item >
    </ style >
 </ resources > 

Завершите и запустите приложение.

Вниманию читателя! Не прекращайте учиться сейчас. Ознакомьтесь со всеми важными концепциями Java Foundation и коллекций с помощью курса "Основы Java и Java Collections" по приемлемой для студентов цене и будьте готовы к работе в отрасли. Чтобы завершить подготовку от изучения языка к DS Algo и многому другому, см. Полный курс подготовки к собеседованию .

Android Java