Android 中的计数器浮动操作按钮示例

Counter Floating Action 按钮出现在大多数电子商务应用程序中，我们使用该功能来显示用户购物车中存在的商品数量。在本文中，我们将看看在 Android Studio 的 Android 应用中实现这个计数器浮动操作按钮。

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

我们将构建一个简单的应用程序，我们将在其中简单地显示一个浮动操作按钮，并向其添加一个计数器。单击该按钮时，我们将递增和递减应用于该浮动操作按钮的计数器。在下面的视频中，我们将看到我们将在本文中构建的内容。

分步实施

第 1 步：创建一个新项目

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

第二步：添加依赖

导航到Gradle Scripts > build.gradle(Module:app)并在依赖项部分添加以下依赖项。

implementation ‘com.github.andremion:counterfab:1.2.2’ 

添加此依赖项后，现在同步您的项目，我们将继续使用 XML 文件。

步骤 3：使用 activity_main.xml 文件

导航到app > res > layout > activity_main.xml并将以下代码添加到该文件中。下面是activity_main.xml文件的代码。

第 4 步：使用MainActivity。 Java文件

转到主活动。 Java文件，参考如下代码。下面是MainActivity的代码。 Java文件。代码中添加了注释以更详细地理解代码。

Java

import android.os.Bundle;
import android.view.View;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.andremion.counterfab.CounterFab;
  
public class MainActivity extends AppCompatActivity {
  
    CounterFab fabOne, fabTwo;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initializing our variables.
        fabOne = findViewById(R.id.fabOne);
        fabTwo = findViewById(R.id.fabTwo);
          
        // on below line we are setting default
        // count as 10 for both our fab.
        fabOne.setCount(10);
        fabTwo.setCount(10);
          
        // on below line we are adding click listener for fab one and fab two.
        fabOne.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // on below line we are calling a
                // method to increase the fab count.
                fabOne.increase();
            }
        });
        fabTwo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // on below line we are calling a 
                // method to decrease the fab count.
                fabTwo.decrease();
            }
        });
    }
}

现在运行您的应用程序并查看应用程序的输出。

输出：