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

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

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

Подход:

  1. Создайте новый каталог ресурсов 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 >

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

    activity_main2.xml

    <? xml version = "1.0" encoding = "utf-8" ?>
    < LinearLayout
    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 >

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

    activity_main3.xml

    <? xml version = "1.0" encoding = "utf-8" ?>
    < LinearLayout
    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 >

  4. Теперь создайте файл 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);
    }
    }

  5. Теперь создайте файл 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);
    }
    }

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

    activity_main.xml

    <? xml version = "1.0" encoding = "utf-8" ?>
    < LinearLayout
    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 >

  7. Теперь добавьте следующий код в файл 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 затем обе кнопки открытой активности в различных анимации.
    • Когда пользователь находится в третьем действии и нажимает кнопку «Назад», вызывается анимация по умолчанию, тогда как когда пользователь находится во втором действии и нажимает кнопку «Назад», вызывается наша определенная анимация.

  8. Если вы хотите установить анимацию для всего приложения, вы можете сделать это, выполнив этот простой шаг. Добавьте следующий код в файл 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 >

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

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

РЕКОМЕНДУЕМЫЕ СТАТЬИ