如何在 Android 应用程序中使用瀑布工具栏库？

Waterfall Toolbar Library是一个 android 库，旨在为工具栏提供一些动态效果，使应用程序看起来更好。所以这个库实际上做的是动态化一个普通的工具栏，当关联的视图滚动时增加和减少它的阴影。视图可以是 RecyclerView 或 ScrollView。下面给出了一个示例 GIF，以了解我们将在本文中做什么。请注意，我们将使用Java语言来实现这个项目。

现在让我们看看如何在 Android 应用程序中使用 WaterFallToolbar 库。

分步实施

第 1 步：创建一个新项目

因此，第一步是在 Android Studio 的欢迎屏幕上创建一个新项目，单击 Create New Project，如果您已经打开了一个项目，请转到 File > New > New Project 。然后选择一个项目模板窗口，选择空活动并单击下一步。在名称字段中输入您的应用程序名称，然后从语言下拉菜单中选择Java 。

第 2 步：添加依赖项和 JitPack 存储库

添加库依赖项转到 app > Gradle Scripts > gradle.build(Module: app)并添加以下依赖项。

dependencies {
    // library required to add the waterfall effect
    implementation 'com.github.hugocastelani:waterfall-toolbar:0.5.0'
    
    // for adding recyclerview
    implementation 'androidx.recyclerview:recyclerview:1.2.0'
  
    // for adding cardview
    implementation 'androidx.cardview:cardview:1.0.0'
}

将 JitPack 存储库添加到您的构建文件中。将其添加到 allprojects{} 部分中存储库末尾的根 build.gradle 中。

allprojects {

 repositories {

   …

   maven { url “https://jitpack.io” }

     }

}

添加此依赖项后同步您的项目，现在我们将转向它的实现。

第 3 步：转到 activity_main.xml 并添加以下代码

在activity_main.xml 中添加瀑布工具栏和recyclerview 或者你也可以使用ScrollView 代替RecyclerView。如果您不了解 RecyclerView，您可以参考使用Java 的recyclerview或使用 kotlin 的 recyclerview 。导航到app > res > layout > activity_main.xml并将以下代码添加到该文件中。下面是activity_main.xml文件的代码。

第 4 步：实现 RecyclerView

将 RecyclerView 添加到activity_main.xml 后，创建一个新的布局资源文件，用于设计我们的 CardView 布局。转到 app > res > layout > 右键单击 layout > New > Layout Resource File并添加下面提供的代码。在此文件中，您可以设计布局以将其显示到 RecyclerView 中。下面是recyclerview_items.xml文件的代码。

然后，转到 app > Java > package name > right-click > New > Java class 。将该文件命名为 ItemsModel，然后单击 OK。该文件将保存您要在 RecyclerView 中显示的每个项目的信息。下面是ItemsModel的代码。 Java文件。

Java

class ItemsModel {
      
    private String data;
  
    // Constructor
    public ItemsModel(String data) {
        this.data = data;
    }
  
    // Getter
    public String getData() {
        return data;
    }
  
    // Setter
    public void setData(String data) {
        this.data = data;
    }
}

创建ItemsModel 后。 Java创建另一个类转到应用程序> Java > 包名称> 右键单击> 新建> Java类并将该文件命名为CustomAdapter，然后单击确定。在此之后添加下面提供的代码。代码内部添加了注释，以便详细了解代码。下面是CustomAdapter的代码。 Java文件。

Java

package com.example.waterfalltoolbar;
  
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
  
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
  
import java.util.List;
  
class CustomAdapter extends RecyclerView.Adapter {
  
    Context context;
      
    // list to store the items
    List list;
  
    // Adpater's constructor
    public Adpater(Context context, List list) {
        this.context = context;
        this.list = list;
    }
      
    // method to create new views
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // inflates the recyclerview_design view
        // that is used to hold list item
        View view = LayoutInflater.from(context).inflate(R.layout.recyclerview_items, parent, false);
        return new ViewHolder(view);
    }
  
    // binds the list items to a view
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        ItemsModel model = list.get(position);
        // sets the text to the textview from our ItemsModel class
        holder.item.setText(model.getData());
    }
  
    // return the number of the items in the list
    @Override
    public int getItemCount() {
        return list.size();
    }
  
  
    // Holds the views for adding it to image and text
    public static class ViewHolder extends RecyclerView.ViewHolder {
          
        private TextView item;
  
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            item = itemView.findViewById(R.id.recyclerview_txt);
        }
    }
}

第 5 步：使用 MainActivity

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

Java

import android.graphics.Color;
import android.os.Bundle;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
  
import com.hugocastelani.waterfalltoolbar.Dp;
import com.hugocastelani.waterfalltoolbar.WaterfallToolbar;
  
import java.util.ArrayList;
  
public class MainActivity extends AppCompatActivity {
    RecyclerView recyclerView;
    ArrayList items;
    Toolbar toolbar;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // getting the recyclerview by its id
        recyclerView = findViewById(R.id.recyclerview);
          
        // getting the toolbar by its id
        toolbar = findViewById(R.id.toolbar);
  
        // setting the action bar
        setSupportActionBar(toolbar);
          
        // changing the color of the toolbar's text
        toolbar.setTitleTextColor(Color.WHITE);
  
        // creating list of items
        items = new ArrayList<>();
  
        // This loop will create 20 Views containing the text
        for (int i = 0; i <= 20; i++) {
            // adding the items into the arraylist
            items.add(new ItemsModel("Item " + i));
        }
  
        // This will pass the ArrayList to our Adapter
        Adpater adpater = new Adpater(this, items);
          
        // setting the layout manager for the recyclerview
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
          
        // Setting the Adapter with the recyclerview
        recyclerView.setAdapter(adpater);
  
  
        // finding waterfall toolbar by its id
        WaterfallToolbar waterfallToolbar = findViewById(R.id.waterfall_toolbar);
          
        // setting the recyclerview to the waterfall toolbar
        waterfallToolbar.setRecyclerView(recyclerView);
  
        // setting the initial elevation of the toolbar
        waterfallToolbar.setInitialElevation(new Dp(0).toPx());
  
        // setting the final elevation of the toolbar
        waterfallToolbar.setFinalElevation(new Dp(30).toPx());
  
    }
}

步骤 6：使用 themes.xml 文件

转到 themes.xml 文件并将父属性更改为 NoActionBar 像这样。