GrideView making choice picture function, square display

GrideView often used to do this with a function to select the picture.

cut to the chase, post the picture:

1. GrideView the activity or the layout in the layout fragment

<GridView
	android:id="@+id/gvPhotos"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:layout_margin="10dp"
	android:columnWidth="90dp"
	android:horizontalSpacing="8dp"
	android:numColumns="3"
	android:stretchMode="columnWidth"
	android:verticalSpacing="8dp" />```

2. GrideView the item layout

Here is a control called the GrideViewItemLayout, specifically for GrideView do for item displayed as a square. In the final source

<?xml version="1.0" encoding="utf-8"?>
<com.mg.axe.puzzlegame.GrideViewItemLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/ivPic"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true" />
    
    <RelativeLayout
        android:id="@+id/rlSelected"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#AB000000">

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_centerInParent="true"
            android:src="@mipmap/checked_blue" />

    </RelativeLayout>

</com.mg.axe.puzzlegame.GrideViewItemLayout>

3. On the code

1. javabean

/**
 * iten的javabean
 */
public class PhotoBean {
    public int resId;           // 图片id
    public boolean checked;     // 图片是否被选中

    public PhotoBean() {
    }

    public PhotoBean(int resId, boolean checked) {
        this.resId = resId;
        this.checked = checked;
    }

    public int getResId() {
        return resId;
    }

    public void setResId(int resId) {
        this.resId = resId;
    }

    public boolean isChecked() {
        return checked;
    }

    public void setChecked(boolean checked) {
        this.checked = checked;
    }
}

2. activity或者fragment中的代码

	// 定义控件
	private GridView gvPhotos;
	private ImageAdapter mImageAdapter;
	private ArrayList<PhotoBean> mPicList = new ArrayList<>();

	// 初始化数据, 这里多放一些图片
	mPicList.add(new PhotoBean(R.mipmap.num_3_3, false));
	...

	// 查找控件
	gvPhotos = (GridView) findViewById(R.id.gvPhotos);
	gvPhotos.setAdapter(mImageAdapter = new ImageAdapter(ChosePhotoActivity.this));
	gvPhotos.setOnItemClickListener(new AdapterView.OnItemClickListener() {
		@Override
		public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
			playSound();
			boolean checked = mPicList.get(position).isChecked();
			if (checked) {
				mPicList.get(position).setChecked(false);
			} else {
				for (int i = 0; i < mPicList.size(); i++) {
					mPicList.get(i).setChecked(false);
				}
				mPicList.get(position).setChecked(true);
			}
			mImageAdapter.notifyDataSetChanged();
		}
	});



	/**
     * 数据适配器, 这里以内容类的形式使用，如果单独写成类，记得将ViewHolder以静态内部类的实行加载进去
     */
    private class ImageAdapter extends BaseAdapter {
        private Context mContext;

        public ImageAdapter(Context context) {
            this.mContext = context;
        }

        @Override
        public int getCount() {
            return mPicList.size();
        }

        @Override
        public Object getItem(int position) {
            return mPicList.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder holder = null;
            if (convertView == null) {
                convertView = LayoutInflater.from(mContext).inflate(R.layout.gride_view_item_layout, parent, false);
                holder = new ViewHolder();
                holder.ivPic = convertView.findViewById(R.id.ivPic);
                holder.rlSelected = convertView.findViewById(R.id.rlSelected);
                convertView.setTag(holder);
            } else {
                holder = (ViewHolder) convertView.getTag();
            }

            boolean checked = mPicList.get(position).isChecked();
            if (checked) {
                holder.rlSelected.setVisibility(View.VISIBLE);
            } else {
                holder.rlSelected.setVisibility(View.GONE);
            }
            holder.ivPic.setImageDrawable(getResources().getDrawable(mPicList.get(position).getResId()));
            return convertView;
        }

    }

    static class ViewHolder {
        private ImageView ivPic;
        private RelativeLayout rlSelected;
    }

3. GrideViewItemLayout source

import android.content.Context;
import android.util.AttributeSet;
import android.widget.RelativeLayout;

/**
 * 控制item显示成正方形
 */
public class GrideViewItemLayout extends RelativeLayout {

    public GrideViewItemLayout(Context context) {
        super(context);
    }

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

    public GrideViewItemLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(getDefaultSize(0, widthMeasureSpec), getDefaultSize(0, heightMeasureSpec));
        int childWidhtSize = getMeasuredWidth();
        heightMeasureSpec = widthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidhtSize, MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
}