java - CenterCrop 图像缓慢缩小

Question

我创建了一个水平的 recyclerview 来显示用户拍摄的图像。这些图像被中心裁剪并使用 Glide 显示。如何在用户查看显示的图像时实现缓慢缩小。

请引用这个例子: https://dribbble.com/shots/8582397-Nomad-iOS-UI-Kit-Favorite-Places

更新:

public class HorizontalGalleryRecyclerViewAdapter extends RecyclerView.Adapter < HorizontalGalleryRecyclerViewAdapter.MyViewHolder > {

  private Context mContext;
  private ArrayList < ImageItems > arrayList;
  public long Last_position;

  private HorizontalGalleryRecyclerViewAdapter.onItemCLickListener mListener;

  public interface onItemCLickListener {
    void onItemClick(int mPosition);
  }

  public void setOnItemClickListener(HorizontalGalleryRecyclerViewAdapter.onItemCLickListener listener) {
    mListener = listener;
  }

  public HorizontalGalleryRecyclerViewAdapter(Context context, ArrayList < ImageItems > arrayList) {
    this.mContext = context;
    this.arrayList = arrayList;
  }

  @NonNull
  @Override
  public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    return new MyViewHolder((LayoutInflater.from(mContext).inflate(R.layout.horizontal_gallery_recycleriew_item, parent, false)), mListener);
  }

  @Override
  public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
    Glide.with(mContext)
      .load(arrayList.get(position).ImagePath)
      .placeholder(R.drawable.background_gallery_placeholder)
      .error(R.drawable.background_gallery_placeholder)
      .thumbnail(0.5 f).into(holder.img);
    Last_position = position;
  }


  @Override
  public int getItemCount() {
    return arrayList.size();
  }


  public static class MyViewHolder extends RecyclerView.ViewHolder {
    public RoundedImageView img;

    public MyViewHolder(View view, final HorizontalGalleryRecyclerViewAdapter.onItemCLickListener listener) {
      super(view);

      img = view.findViewById(R.id.horizontal_img);
      img.setScaleX(1.1 f);
      img.setScaleY(1.1 f);
      img.animate().setDuration(3 _000).setStartDelay(1 _000)
        .setInterpolator(new AccelerateDecelerateInterpolator())
        .scaleX(1).scaleY(1).start();

      view.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
          if (listener != null) {
            int position = getAdapterPosition();
            if (position != RecyclerView.NO_POSITION) {
              listener.onItemClick(getAdapterPosition());
            }
          }
        }
      });


    }
  }
}

Answer 1

这种效果可以通过缩小图像来实现。我创建了一个没有 RecyclerView 的小演示作为展示，所以不要忘记调用 view.animate().cancel()当 View 被回收时。

为了能够缩小图像，我先将其放大。然后我对缩小进行动画处理。

public class MainActivity extends AppCompatActivity {

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        View view = findViewById(R.id.image);
        view.setScaleX(1.1f);
        view.setScaleY(1.1f);
        view.animate().setDuration(3_000).setStartDelay(1_000)
                .setInterpolator(new AccelerateDecelerateInterpolator())
                .scaleX(1).scaleY(1).start();
    }
}

我选择了android:scaleType="centerCrop"在此示例中，但是当您使用 Glide 进行操作时，您应该能够实现相同的效果.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/image" />
</FrameLayout>

---

要通过您的实现实现缩放，您应该为每个绑定(bind)设置初始缩放。

@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
    holder.img.setScaleX(1.1 f);
    holder.img.setScaleY(1.1 f);
    Glide.with(mContext)
      .load(arrayList.get(position).ImagePath)
      .placeholder(R.drawable.background_gallery_placeholder)
      .error(R.drawable.background_gallery_placeholder)
      .thumbnail(0.5 f).into(holder.img);
}

ViewHolder本身应该只包含查找 View 的逻辑。

public static class MyViewHolder extends RecyclerView.ViewHolder {
    public RoundedImageView img;

    public MyViewHolder(View view, final HorizontalGalleryRecyclerViewAdapter.onItemCLickListener listener) {
        super(view);
        img = view.findViewById(R.id.horizontal_img);
        view.setOnClickListener(...);
    }
}

棘手的部分是实际启动动画，因为当前查看状态不是适配器的一部分。你必须从外面提供它。然后，您可以提供负载为 notifyItemChanged(int,Object) 的信息。并在 onBindViewHolder(VH,int,List) 中处理反而。但最终 onViewAttachedToWindow(VH) 可能足以满足您的用例。

private void startAnimation(VH viewHolder, long duration, long delay) {
    viewHolder.img.animate()
        .setDuration(duration).setStartDelay(delay)
        .setInterpolator(new AccelerateDecelerateInterpolator())
        .scaleX(1).scaleY(1).start();
}