Android中的液体滑动动画

Liquid Swipe动画用于像水一样滑动页面，从而在屏幕上显示不同的设计和图案。它创建一个浮动状态。 Liquid Swipe动画是一种趋势显着的设计过程。运动可以帮助用户从UI设计中获得灵感的时间更长，并且更有动力与内容进行协作。此方法以一种新的方式为应用程序提供了平滑的外观。在本文中，我们将在android studio中开发Liquid Swipe动画效果。

我们将在本文中构建什么?

在本文中，我们将开发一个示例应用程序，该应用程序在其活动范围内具有Liquid Swipe动画效果。下面给出了一个示例GIF，以使我们对本文中要做的事情有一个了解。注意，我们将使用Java语言实现该项目。

分步实施

步骤1：创建一个新项目

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

步骤2：创建文件名github.properties

现在，在Project文件夹中，转到gradle.properties> New> File ，然后创建一个名为github.properties的新文件。下面提供了分步实施的图片，以帮助您。

步骤3：使用文件github.properties

在github.properties文件中添加下面编写的代码行，但是请记住，您必须将github用户名放在gpr.usr之前，并将github令牌放在gpr.key之前。

Java

gpr.usr = github_username_here
gpr.key = github_generated_token_here

如何生成Github令牌?

在您的GitHub帐户内，转到“设置”>“开发人员设置”>“个人访问令牌”>“生成新令牌”，然后将生成的令牌放在github.propertie中，位于gpr.key的前面。

步骤4：添加Maven存储库

现在，转到根目录build.gradle(Project)并将这些行添加到allprojects {}部分内jcenter()下方的存储库末尾。

Java

def githubProperties = new Properties()
    githubProperties.load(new FileInputStream(rootProject.file("github.properties")))
    repositories {
        maven {
            name = "GitHubPackages"
  
            url = uri("https://maven.pkg.github.com/Cuberto/liquid-swipe-android")
            credentials {
                /** Create github.properties in root project folder file with     
                ** gpr.usr=GITHUB_USER_ID & gpr.key=PERSONAL_ACCESS_TOKEN 
                ** Or set env variable GPR_USER & GPR_API_KEY if not adding a properties file**/
                username = githubProperties['gpr.usr'] ?: System.getenv("GPR_USER")
                password = githubProperties['gpr.key'] ?: System.getenv("GPR_API_KEY")
            }
      }
}

步骤5：添加依赖项

现在，导航至Gradle脚本> build.gradle(Module：app)在“依赖项”部分添加以下依赖项。

Java

implementation 'com.cuberto:liquid-swipe:1.0.0'
implementation 'androidx.core:core-ktx:1.3.2'
implementation "org.jetbrains.kotlin:kotlin-stdlib:1.4.10"

最后，同步您的项目，现在我们拥有实施过程中所需的一切，因此，现在就开始实施吧。

步骤6：创建两个空白片段

要创建空白片段，请参阅如何在Android Studio中创建新片段。请遵循链接中提供的步骤，并为此应用程序创建两个空白片段。对于本文，我们创建了两个名为Fragment1和Fragment2的片段。

步骤7：使用fragment_1.xml文件

转到应用> res>布局> fragment_1.xml，然后将以下编写的代码粘贴到fragment_1.xml文件中。

步骤8：使用fragment_2.xml文件

接下来，转到应用程序> res>布局> fragment_2.xml ，并将下面编写的代码粘贴到fragment_2.xml文件中。

步骤9：创建一个类viewPager

转到应用> Java >包名称，然后创建一个名为viewPager的新类。 Java，然后在viewPager类中添加下面编写的代码。在代码内部添加了注释，以更详细地了解代码。

Java

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
  
public class viewPager extends FragmentPagerAdapter {
  
    // creation of constructor of viewPager class
    public viewPager(@NonNull FragmentManager fm, int behaviour) {
        super(fm, behaviour);
    }
  
    @NonNull
  
    @Override
  
    // create the getItem method of
    // FragmentPagerAdapter class
    public Fragment getItem(int position) {
  
        switch (position) {
            case 0:
                return new Fragment1();    // Fragment1 is the name of first blank fragment, 
                                           // you can replace its name with your created fragment name
            case 1:
                return new Fragment2();    // Fragment2 is the name of second blank fragment, 
                                           // you can replace its name with your created fragment name
        }
        return null;
    }
  
    @Override
    public int getCount() {
        return 2;
    }
}

步骤10：使用activity_main.xml文件

现在，转到应用程序> res>布局> activity_main.xml ，并将下面编写的代码粘贴到activity_main.xml文件中。

步骤11：使用MainActivity。 Java文件

转到应用> Java >程序包名称> MainActivity。 Java文件并参考以下代码。下面是MainActivity的代码。 Java文件。在代码内部添加了注释，以更详细地了解代码。

Java

import android.os.Bundle;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.cuberto.liquid_swipe.LiquidPager;
  
public class MainActivity extends AppCompatActivity {
      
    // declare LiquidPager
    LiquidPager pager;
      
    // declare viewPager
    viewPager viewPager;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // definition of pager using method findViewById()
        pager = findViewById(R.id.pager);
  
        // calling the constructor of viewPager class
        viewPager = new viewPager(getSupportFragmentManager(), 1);
        pager.setAdapter(viewPager);
    }
}

仅此而已，现在可以在设备上安装应用程序了。这是应用程序输出的样子。

输出：