在另一个ImageView上加载一个ImageView

Question

I have 92 images and I would like to have an indicator such as a check mark to indicate that an image is unlocked. I have the check mark in a .png file and what I tried at first was to just make a seperate copy of each image with the check mark put on top of the image in photoshop. However I know that there must be a simpler way of just adding the check mark file on top of the image that is already there instead of having a copy of the image with the check mark already on it.

I have a GridViewAdapter class responsible for loading the original images into a gridview:

@Override public View getView(int position, View convertView, ViewGroup parent) {
    SquaredImageView view = (SquaredImageView) convertView;
    if (view == null) {
        view = new SquaredImageView(context);
        view.setScaleType(CENTER_CROP);
    }

    // Get the image URL for the current position.
    Integer url = getItem(position);

    // Trigger the download of the URL asynchronously into the image view.
    Picasso.with(context) //
            .load(url) //
             //
            .error(R.drawable.error) //
            .fit() //
            .into(view);



    return view;
}

where url is a list that contains the references to each image to be loaded

the mentioned SquaredImageView class is:

/** An image view which always remains square with respect to its width. */
final class SquaredImageView extends ImageView {
    public SquaredImageView(Context context) {
        super(context);
    }

    public SquaredImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth());
    }
} 

Any suggestions are appreciated

Answer 1

I can think of a few ways to do this:

• Option 1:

  Wrap the SquaredImageView in a Framelayout and place another SqauredImageView inside of it. Set the check mark on the second image view.

• Option 2:

  Wrap the SquaredImageView in a FrameLayout and set the checkmark image on the foreground property of the FrameLayout (using setForeground ).

• Option 3:

  Create a ForegroundSquaredImageView which supports overlaying an image (similar to the foreground property of FrameLayout ).

  The code for something like this can be found here: https://gist.github.com/JakeWharton/0a251d67649305d84e8a . You'll need to change it to extend from your SquaredImageView .