Android Layout Hierarchy for checkerboard

Question

I am creating a checkerboard using android views.

The java: I have a Board object, which contains an array of 64 Cell objects. Each Cell object has a required background image, and an optional foreground image. I am trying to come up with a good way to draw this.

The android:

What I have so far: - Each cell has a drawSelf function that returns a FrameLayout, with two child image views for the two images. - The board.xml has a gridlayout as root.

I've tried making this structure, but I get various errors when I try to add the FrameLayouts to the board, and I'm also having problems with keeping the FrameLayouts bounded by the grid lines of the GridLayout.

Note: I'm not tied to this data structure, what I want as an end result is some way to draw a 8x8 board with cells of 1/8 the width and height of the square board, with each cell having the ability to show two images, hold an ID, and trigger an onClick(self.id) call to my game logic.

Thanks.

Answer 1

I'm actually building the same thing for fun, to extend my knowledge in android development. I am trying an approach where I have a Framelayout, with 8 LinearLayouts that contains 8 LinearLayouts with an ImageView in each. This approach draws everything for me, plus I get the onclick for free.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/car_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#66ccff"
tools:context=".Activity_Main" >

<FrameLayout
    android:id="@+id/checker_frame"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="false" >

    <LinearLayout
        android:layout_width="315dp"
        android:layout_height="300dp"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/square_1_1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:background="#FFFFFF"
                android:onClick="squareOnClick" />

            <ImageView
                android:id="@+id/square_1_2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:background="#000000"
                android:onClick="squareOnClick" />

            <ImageView
                android:id="@+id/square_1_3"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:background="#FFFFFF"
                android:onClick="squareOnClick" />

            <ImageView
                android:id="@+id/square_1_4"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:background="#000000"
                android:onClick="squareOnClick" />

            <ImageView
                android:id="@+id/square_1_5"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:background="#FFFFFF"
                android:onClick="squareOnClick" />

            <ImageView
                android:id="@+id/square_1_6"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:background="#000000"
                android:onClick="squareOnClick" />

            <ImageView
                android:id="@+id/square_1_7"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:background="#FFFFFF"
                android:onClick="squareOnClick" />

            <ImageView
                android:id="@+id/square_1_8"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:background="#000000"
                android:onClick="squareOnClick" />
        </LinearLayout>

        --Repeat Linear layouts

You can see I have one squareOnClick call method on all imageview. Every click goes to this listner. I can identify the ID of the square due to it's ID name, which you can react upon:

public void squareOnClick(View view)
{
    String idName = getResources().getResourceEntryName(view.getId());
    idName = idName.replace("square_", "");

    String[] coordinate = idName.split("_");
    if(coordinate.length != 2)
        return;

    int x = Integer.parseInt(coordinate[0]);
    int y = Integer.parseInt(coordinate[1]);
    Log.i("Activity_Checker", "Coordinate pressed: " + x + ":" + y);

    TextView tv = (TextView) findViewById(R.id.statustextview);
    tv.setText("X:" + x + " Y:" + y);
}

I am however toying with the idea if free drawing everything, but that is only if I can't figure out some of my other problems which are:

• Repositioning the framelayout correctly
• Resizing the framelayout correctly
• Property Animation across layouts

That is how far I got.