RecyclerView with ImageViews, zoom on touch

问题:

I am kind of new to Android, and I am stuck with this problem. I have a RecyclerView which holds ImageViews. What I want to do is, when I touch an item, it should enlarge the image to its original size. RecyclerView currently covers one-fifth of the screen. My Adapter is as follows:

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> implements View.OnTouchListener {

    private ArrayList<Bitmap> pieces;
    private RecyclerViewOnTouchListener touchListener;

    public interface RecyclerViewOnTouchListener {
        void onTouch(View v, MotionEvent event);
    }

    public static class MyViewHolder extends RecyclerView.ViewHolder {
    ImageView imageViewPiece;

    public MyViewHolder(View itemView) {
        super(itemView);
        this.imageViewPiece = (ImageView) itemView.findViewById(R.id.pieceImage);
        }
    }

    public MyAdapter(ArrayList<Bitmap> pieces, RecyclerViewOnTouchListener touchListener) {
        this.pieces = pieces;
        this.touchListener = touchListener;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // Inflate layout for recycler view
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_recycler_view, parent, false);

        MyViewHolder myViewHolder = new MyViewHolder(view);
        return myViewHolder;
    }

    @Override
    public void onBindViewHolder(final MyViewHolder holder, final int listPosition) {
        ImageView imageView = holder.imageViewPiece;
        imageView.setOnTouchListener(this);
        imageView.setTag(listPosition);
        imageView.setImageBitmap(pieces.get(listPosition));
    }

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


    @Override
    public boolean onTouch(View v, MotionEvent event) {
        ImageView imageView = (ImageView) v.findViewById(R.id.pieceImage);

        if (touchListener != null) {
            touchListener.onTouch(imageView, event);
        }
        return false;
    }

}

And the related part in my fragment class is as following:

MyAdapter.RecyclerViewOnTouchListener onTouchListener = new MyAdapter.RecyclerViewOnTouchListener() {

    @Override
    public void onTouch(ImageView v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_DOWN:
                // Enlarge image to its original size and remove it from the list, also it should be able to move in the recycler view.
                break;
            case MotionEvent.ACTION_UP:
                // Put image back to its position at list
                break;
            default:
                break;
        }
    }
};

I suppose its logic should be something like this but I am stuck. I hope I have written enough information about the problem.

My fragment looks like this: http://i.imgur.com/alEG7OP.png

I want to touch a piece on the right and when I do it, it should enlarge to its original size and when I stop touching, it should go back to the list with the same size as the others. I also want to be able to move it.

回答1:

First some little fixes:

Remove this line from onBindViewHolder():

 imageView.setOnTouchListener(this);

Put it instead in MyViewHolder:

this.imageViewPiece.setOnTouchListener(this);

Because you just need to initialize the listener 1, not every bind call.

Change your OnTouchListener:

@Override
 public boolean onTouch(View v, MotionEvent event) {
    if (touchListener != null) {
        touchListener.onTouch((ImageView) v, event);
    }
    return false;
}

Since you know that the item you receive in the onTouch is the one you register.

Then you can do something like that, you may do some adjusments:

MyAdapter.RecyclerViewOnTouchListener onTouchListener = new MyAdapter.RecyclerViewOnTouchListener() {
    Bitmap bitmap;
    int originalPosition, width, height;
    ImageView imageView;
    RelativeLayout.LayoutParams params;
    @Override
    public void onTouch(ImageView v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                int x = (int)event.getRawX();
                int y = (int) event.getRawY();
                params.leftMargin =  x - width / 2;
                params.topMargin =  y - height / 2;
                imageView.setLayoutParams(params);
                break;
            case MotionEvent.ACTION_DOWN:
                originalPosition = (int)v.getTag();
                bitmap = recycleAdapter.pieces.remove(originalPosition);
                recycleAdapter.nottifyDataSetChanged();
                width = bitmap.getWidth(); //maybe you need the drawable to get the intrinsic original dimens
                height = bitmap.getHeight();
                imageView = new ImageView(v.getContext());
                params = new RelativeLayout.LayoutParams(width, height);
                imageView.setImageBitmap(bitmap);
                RelativeLayout container; //here you need to bind this view to your container of fragment, better if it RelativeLayout to do dragging
                container.addView(imageView, params);
                // what you need to do is inflate here
                break;
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                container.removeView(imageView);
                recycleAdapter.pieces.add(originalPosition, bitmap);
                recycleAdapter.nottifyDataSetChanged();
                break;
            default:
                break;
        }
    }


};

回答2:

Use https://github.com/MikeOrtiz/TouchImageView java

Bitmap bitmap; Drawable d = itemImage.getDrawable(); bitmap = Bitmap.createBitmap(d.getIntrinsicWidth(), d.getIntrinsicHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); d.draw(canvas); Dialog dialog=new Dialog(context,android.R.style.Theme_Black_NoTitleBar_Fullscreen); dialog.setContentView(R.layout.dialog_image_view_layout); TouchImageView imageDialog = (TouchImageView) dialog.findViewById(R.id.imageDialog); imageDialog.setImageBitmap(bitmap); dialog.show();