如何在 Recyclerview 中实现 CountDownTimer？

Question

您好，我正在开发一个设置倒计时的小应用程序。现在我希望在 recyclerview 内的背景前看到这个倒计时。所以最终用户将设置多个倒数计时器，这些计时器将在 recyclerview 中显示为背景。

我现在所做的远非完美，但它朝着我想要的方向发展。我现在唯一的问题是，因为我正在使用 recyclerview，视图（包括带有倒计时的文本）将被回收。所以如果我向下滚动，倒计时将被重置。我认为这就是我遇到的问题，但我不知道如何解决它。这是最重要的代码：

activity recyclerview 位于：

package anotherChallenge.example.criminalactivity;

import androidx.appcompat.app.AppCompatActivity; 
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import android.widget.DatePicker;
import com.example.criminalactivity.R;
import java.text.DateFormat;
import java.util.Calendar;

public class Overview extends AppCompatActivity {

private int[] allImages = {
        R.drawable.festive1_pictures,
        R.drawable.festive2_pictures,
        R.drawable.festive3_pictures,
        R.drawable.festive4_pictures,
        R.drawable.festive5_pictures,
        R.drawable.ferrari_materialistic_pictures,
        R.drawable.house_materialistic_pictures,
        R.drawable.boat_materialistic_pictures,
        R.drawable.rolex_materialistic_pictures,
        R.drawable.private_jet_materialistic_pictures,
        R.drawable.holiday1_pictures,
        R.drawable.holiday2_pictures,
        R.drawable.holiday3_pictures,
        R.drawable.holiday4_pictures,
        R.drawable.holiday5_pictures,
        R.drawable.meet1_pictures,
        R.drawable.meet2_pictures,
        R.drawable.meet3_pictures,
        R.drawable.meet4_pictures,
        R.drawable.meet5_pictures,
        R.drawable.other1_pictures,
        R.drawable.other2_pictures,
        R.drawable.other3_pictures,
        R.drawable.other4_pictures,
        R.drawable.other5_pictures,
};

private RecyclerView recyclerView2;
private DatePicker datePicker;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_overview);

  //        textClock.setFormat12Hour(null);
  //        textClock.setFormat24Hour("EEE/MMM d/yyyy   hh:mm:ss");

    recyclerView2 = findViewById(R.id.recyclerview2);
    datePicker = findViewById(R.id.datepicker);
    Calendar calendar = Calendar.getInstance();
    String currentDate = DateFormat.getDateInstance(DateFormat.FULL).format(calendar.getTime());
    System.out.println(currentDate);

 //        String filledInDate = datePicker.getDayOfMonth() + "/" + datePicker.getMonth() + "/"+
 //        datePicker.getYear();


    adapterForOverview adapter = new adapterForOverview(this, allImages);
    recyclerView2.setAdapter(adapter);
    recyclerView2.setLayoutManager(new LinearLayoutManager(this));

}

}

recyclerview 适配器：

package anotherChallenge.example.criminalactivity;

import android.content.Context;
import android.os.CountDownTimer;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.cardview.widget.CardView;
import androidx.recyclerview.widget.RecyclerView;
import com.example.criminalactivity.R;


public class adapterForOverview extends RecyclerView.Adapter<adapterForOverview.MyViewHolder> {
AddItem addItem;
int[] images;
Context context;
CustomAdapterCardView customAdapterCardView;

public adapterForOverview(Context context, int[] images) {
    this.context=context;
    this.images=images;

    addItem = new AddItem();
  //        customAdapterCardView = new CustomAdapterCardView(context, 
customAdapterCardView.getArrayList());
}

@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
//        holder.cardView.setCardBackgroundColor(Color.parseColor("#696969"));
    new CountDownTimer(30000,1000) {
        @Override
        public void onTick(long millisUntilFinished) {
            holder.myTextview.setText("The title will be here \n" + millisUntilFinished/1000);
        }

        @Override
        public void onFinish() {
            holder.myTextview.setText("Achieved!");
        }
    }.start();

      holder.myImage.setImageResource(images[position]);
   //        holder.myImage.setImageDrawable(addItem.getDrawable());
}

@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    LayoutInflater layoutInflater = LayoutInflater.from(context);
    View view = layoutInflater.inflate(R.layout.itemsinoverview,parent,false);
    return new MyViewHolder(view);
}

@Override
public int getItemCount() {
    return images.length;
}

public class MyViewHolder extends RecyclerView.ViewHolder{

    CardView cardView;
    ImageView myImage;
    TextView myTextview;

    public MyViewHolder(@NonNull View itemView) {
        super(itemView);
        cardView = itemView.findViewById(R.id.cardview2);
        myImage = itemView.findViewById(R.id.imageView);
        myTextview = itemView.findViewById(R.id.textviewOfCountdown);
    }
 } 
 }

XML recyclerview 中的项目代码：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
>

<androidx.cardview.widget.CardView
    android:id="@+id/cardview2"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_marginHorizontal="8dp"
    android:layout_marginVertical="4dp"
    >

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintlayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imageView"
        android:scaleType="fitXY"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

    <TextView
        android:id="@+id/textviewOfCountdown"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textSize="25sp"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

Answer 1

解释：

如您所知，android 的 recyclerView 通过每次调用 onBind 更新项目的数据来回收其视图并重用其 viewHolders。我注意到在 onBindViewHolder 每次绑定任何数据时都会创建一个 CountDownTimer，因此最终会有多个计时器更新同一个 ViewHolder。

错误的解决方案：

一种解决方案是使适配器的物品不可回收，但这不是最佳方案，并且会否定 recyclerview 的回收能力。

好的解决方案：

解决方案是在名为 MyViewHolder 的 viewHolder 中保留对计时器的引用。然后在 onBindViewHolder 中检查计时器是否已经实例化。如果是，则取消之前的定时器，然后重新创建一个新的定时器。如果没有，则无需取消任何操作，您只需继续第一次创建新的计时器对象即可。

public void onBindViewHolder(@NonNull MyViewHolder holder, final int position) {
    
    if (holder.timer != null) {
        holder.timer.cancel();
    }
    holder.timer = new CountDownTimer(30000, 1000) {
        ...
    }.start();
}

public static class MyViewHolder extends RecyclerView.ViewHolder {
    ...
    CountDownTimer timer;
    ...
}

Answer 2

问题是每次绑定新视图时您都会创建一个新计时器。您希望将适配器要显示的 data 与显示它的 view 分开。在这种情况下，您可以在代表列表中每个项目的对象中管理倒数计时器。例如（伪代码）：

class MyItem {
    val imageResource: Int
    val timer: CountDownTimer
}

在适配器中，您持有 MyItem 的列表，而不是创建一个全新的计时器，您只需设置现有计时器的当前值（伪代码）：

public class adapterForOverview extends RecyclerView.Adapter<adapterForOverview.MyViewHolder> {
    MyItem[] items;
    Context context;

    public adapterForOverview(Context context, MyItem[] items) {
        this.context=context;
        this.items=items;
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        timer = items[position].timer
        if (timer.isFinished()) {
            holder.myTextview.setText("The title will be here \n" + millisUntilFinished/1000);
        } else {
            holder.myTextview.setText("Achieved!");
    }
}

@Override
public int getItemCount() {
    return items.length;
}

最后，您可以在当前初始化图像的任何位置创建计时器。 on tick 和 finished 方法没有更新任何视图，而是告诉适配器刷新列表中的特定项目，然后它将重新绑定当前计时器值（伪代码）：

for (int i = 0; i < allImages.length; i++) {
    items[i] = new MyItem()
    items[i].image = allImages[i]
    items[i].timer = new CountDownTimer(30000,1000) {
        @Override
        public void onTick(long millisUntilFinished) {
            adapter.notifyItemChanged(i)
        }

        @Override
        public void onFinish() {
            adapter.notifyItemChanged(i)
        }
    }.start();
 }

同样，这都是伪代码，不会编译，但应该让您了解如何构建代码来解决您的问题。

如何在 Recyclerview 中实现 CountDownTimer？

How to implement CountDownTimer in Recyclerview?

countdowntimer

android-studio

android-recyclerview