Easy way to make an ImageView that is underneath a GridView match the GridView's size exactly?

问题

My ImageView is displaying an image of a chess style board for a little game I'm making. It is covered by a GridView that displays the images of my pieces. I have it displaying underneath but it is not positioned properly. I want it to match exactly the edges of the GridView but don't know how. Is there some way to make the GridView a "parent" of the ImageView so then I could say "match_parent" in the XML for it's height and width and so on?

Here is a screen of how my app looks now. I want the ugly colored grid I made to line up with the GridView images so that the black squares around the edge of my pieces are centered in the squares of the board.

Here is my XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/textFieldFU"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/gridview"
    android:layout_alignTop="@+id/gridview"
    android:layout_centerHorizontal="true" />

<GridView
    android:id="@+id/gridview"
    android:layout_width="fill_parent"
    android:layout_height="600dp"
    android:gravity="center"
    android:horizontalSpacing="0dp"
    android:numColumns="8"
    android:stretchMode="columnWidth"
    android:verticalSpacing="10dp" />

Here is the relevant part of my MainActivity:

    @Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    final ImageAdapter iA = new ImageAdapter(this);

    final ImageView board;
    board = (ImageView) findViewById(R.id.imageView1);
    board.setImageResource(R.drawable.board1);


    GridView gridview = (GridView) findViewById(R.id.gridview);
    gridview.setAdapter(iA);
...

And here is the relevant parts of my ImageAdapter that I have which sets up the GridView:

public class ImageAdapter extends BaseAdapter {

public static int[] images = { R.drawable.rock2, R.drawable.paper2,
        R.drawable.scissors2, R.drawable.rock2, R.drawable.paper2,
...//This part goes on for a while...
...//On to the relevant part...
@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ImageView iv;
    if (convertView != null) {
        iv = (ImageView) convertView;
    } else {
        iv = new ImageView(context);
        iv.setLayoutParams(new GridView.LayoutParams(60, 60));
        iv.setScaleType(ScaleType.CENTER);
        iv.setPadding(0, 0, 0, 0);
    }
    iv.setImageResource(images[position]);
    return iv;
}

public static int[] getImagesArray() {
    return images;
}

public void setImagesArray(int[] newImages) {
    images = newImages;
}

----------------EDIT, Added the alternative solution from answer below.--------------

I got rid of the ImageView entirely and just added this to my getView in the ImageAdapter class:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ImageView iv;
    if (convertView != null) {
        iv = (ImageView) convertView;
    } else {
        iv = new ImageView(context);
        iv.setLayoutParams(new GridView.LayoutParams(60, 60));
        iv.setScaleType(ScaleType.CENTER);
        iv.setPadding(0, 0, 0, 0);
        if(position < 8 && position % 2 ==0){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 7 && position < 16 && position % 2 ==1){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 15 && position < 24 && position % 2 ==0){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 23 && position < 32 && position % 2 ==1){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 31 && position < 40 && position % 2 ==0){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 39 && position < 48 && position % 2 ==1){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 47 && position < 56 && position % 2 ==0){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 55 && position < 64 && position % 2 ==1){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else
            iv.setBackgroundColor(Color.GRAY);
    }
    iv.setImageResource(images[position]);
    return iv;
}

Here is how it looks now:

回答1:

You can configure the layout of the base element of your gridview. An imageView with a custom background seems to be what you need. You will have to check in getview in which row you are in order to know which background color to use.

来源：https://stackoverflow.com/questions/16339242/easy-way-to-make-an-imageview-that-is-underneath-a-gridview-match-the-gridviews