Android 中的流体滑块动画

在这里，我们将了解如何使用 Kotlin 在 android studio 中实现 Fluid Slider Animation。在我们的应用程序中使用此滑块比例的想法使我们的 UI 看起来更漂亮且更具交互性。

什么是流体滑块动画？

流体滑块是一个滑块小部件，带有显示精确值的弹出气泡。它在不同应用中的用途可以是-

• 可用于评价应用程序。
• 可用于用户想要购买的产品数量。
• 可用于任何使用天平来测量某物的应用程序。

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

在本文中，我们将制作这个 Fluid Slider 动画比例，然后在可点击按钮上显示其值。下面显示了我们将在本文中构建的示例视频。请注意，我们将使用 Kotlin 语言制作此应用程序。

分步实施

步骤 1. 创建一个新项目

• 打开一个新项目。
• 我们将使用 Kotlin 语言开发 Empty Activity。保持所有其他选项不变。
• 您可以在方便时更改项目的名称。
• 将有两个名为 activity_main.xml 和 MainActivity.kt 的默认文件。

如果您不知道如何在 Android Studio 中创建新项目，可以参考如何在 Android Studio 中创建/启动新项目？

步骤 2. 添加所需的依赖项

导航到 Gradle 脚本 > gradle.build(module) 文件并在其中使用以下依赖项 -

implementation 'com.ramotion.fluidslider:fluid-slider:0.3.1'

步骤 3. 处理 activity_main.xml 文件

导航到app > res > layout > activity_main.xml文件并在其中使用以下代码 -

步骤 4. 处理 MainActivity.kt 文件

转到 MainActivity.kt 文件并在其中使用以下代码 -

科特林

package com.example.fluidslideranimations
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.TextView
import com.ramotion.fluidslider.FluidSlider
  
class MainActivity : AppCompatActivity() {
    val max =100
    val min= 0
    val total:Int =max-min
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        val slider = findViewById(R.id.slider)
        val textView=findViewById(R.id.text_view)
        val button=findViewById(R.id.button)
  
        slider.positionListener={pos-> slider.bubbleText="${min+ (total*pos).toInt()}"}
        slider.position=0.3f
        slider.startText="$min"
        slider.endText="$max"
  
        button.setOnClickListener {
            val s=slider.bubbleText.toString()
            button.setText(s)
        }
        slider.beginTrackingListener={textView.visibility=View.INVISIBLE}
        slider.endTrackingListener={textView.visibility=View.VISIBLE}
    }
}

这是我们应用程序的最终输出。

输出：