android - Android display grid map

Question

I am new to Android.

My objective is to be able to create a maximum of 30 by 30 grid map. The size of the grid map may vary. Most importantly, I am able to change the color of the cells.I tried 2 methods but they don't seems to work.

Method 1, I used onDraw. I managed to get the map but I can't get to color the cells I want:

public static final float DEFAULT_X_OFFSET= 10;
public static final float DEFAULT_Y_OFFSET= 10;
Paint paint = new Paint();

    public void onDraw(Canvas canvas)
     {
               paint.setColor(Color.YELLOW);
                float X=DEFAULT_X_OFFSET;
                float Y=DEFAULT_Y_OFFSET;
                //Draw The rows
                for(float iRow=0;iRow<=m_NoOfRows;iRow++)
                {
                        canvas.drawLine(X, Y,X+ this.m_width* this.m_NoOfCols,Y, paint);
                        Y=Y+ m_Height;

                }

                //Draw The Cols
                X=DEFAULT_X_OFFSET;
                Y=DEFAULT_Y_OFFSET;
                for(float iColumn=0;iColumn<=m_NoOfCols;iColumn++)
                {
                        canvas.drawLine(X, Y,X,Y+this.m_Height*this.m_NoOfRows,paint );
                        X=X+ this.m_width;
                }

        }

Method 2, I used buttons to represent the cells. I did partially to see if it works, but it seems like it is not reasonable to create 30x30 buttons.

activity_main.xml:

        <LinearLayout
    android:id="@+id/row1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/r1c1"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginBottom="2dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c2"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c3"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c4"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c5"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c6"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c7"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c8"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c9"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c10"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c11"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c12"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c13"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c14"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c15"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c16"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c17"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c18"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c19"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c20"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c21"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c22"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c23"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c24"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c25"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c26"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c27"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c28"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c29"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />

    <Button
        android:id="@+id/r1c30"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />
</LinearLayout>

<LinearLayout
    android:id="@+id/row2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/row1"
    android:layout_marginBottom="2dip"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/r2c1"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:layout_marginRight="2dip"
        android:background="@color/gray"
        android:clickable="false"
        android:enabled="false" />
        <!-- teting purposes, created 10 rows -->
    </LinearLayout>

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/row10"
    android:layout_below="@+id/row10"
    android:layout_marginTop="29dp"
    android:onClick="trigger"
    android:text="Trigger" />

Map.java:

Button[][] mapArrays;

private int row = 2;
private int col = 10;

private Button r1c1;
private Button r1c2;
private Button r1c3;
private Button r1c4;
private Button r1c5;
private Button r1c6;
private Button r1c7;
private Button r1c8;
private Button r1c9;
private Button r1c10;
//initialize for 2rows of buttons for testing purposes

    public Map(Context context) {
    super(context);

}

public void mapSize(){

    initialize_array();

    for(int r=0; r<row; r++){
        for(int c=0; c<col; c++){
            mapArrays[r][c].setBackgroundColor(0xffffffff); 
        }
    }

}

private void initialize_array() {
    mapArrays = new Button[][] 
                {
                    {r1c1,r1c2,r1c3,r1c4,r1c5,r1c6,r1c7,r1c8,r1c9,r1c10,r1c11,r1c12,r1c13,r1c14,r1c15,r1c16,r1c17,r1c18,r1c19,r1c20,r1c21,r1c22,r1c23,r1c24,r1c25,r1c26,r1c27,r1c28,r1c29,r1c30},
                    {r2c1,r2c2,r2c3,r2c4,r2c5,r2c6,r2c7,r2c8,r2c9,r2c10,r2c11,r2c12,r2c13,r2c14,r2c15,r2c16,r2c17,r2c18,r2c19,r2c20,r2c21,r2c22,r2c23,r2c24,r2c25,r2c26,r2c27,r2c28,r2c29,r2c30}
                };

    r1c1 = (Button) findViewById(R.id.r1c1);
    r1c2 = (Button) findViewById(R.id.r1c2);
    r1c3 = (Button) findViewById(R.id.r1c3);
    r1c4 = (Button) findViewById(R.id.r1c4);
    r1c5 = (Button) findViewById(R.id.r1c5);
    r1c6 = (Button) findViewById(R.id.r1c6);
    r1c7 = (Button) findViewById(R.id.r1c7);
    r1c8 = (Button) findViewById(R.id.r1c8);
    r1c9 = (Button) findViewById(R.id.r1c9);
    r1c10 = (Button) findViewById(R.id.r1c10);
    r1c11 = (Button) findViewById(R.id.r1c11);
    r1c12 = (Button) findViewById(R.id.r1c12);
    r1c13 = (Button) findViewById(R.id.r1c13);
    r1c14 = (Button) findViewById(R.id.r1c14);
    r1c15 = (Button) findViewById(R.id.r1c15);
    r1c16 = (Button) findViewById(R.id.r1c16);
    r1c17 = (Button) findViewById(R.id.r1c17);
    r1c18 = (Button) findViewById(R.id.r1c18);
    r1c19 = (Button) findViewById(R.id.r1c19);
    r1c20 = (Button) findViewById(R.id.r1c20);
    r1c21 = (Button) findViewById(R.id.r1c21);
    r1c22 = (Button) findViewById(R.id.r1c22);
    r1c23 = (Button) findViewById(R.id.r1c23);
    r1c24 = (Button) findViewById(R.id.r1c24);
    r1c25 = (Button) findViewById(R.id.r1c25);
    r1c26 = (Button) findViewById(R.id.r1c26);
    r1c27 = (Button) findViewById(R.id.r1c27);
    r1c28 = (Button) findViewById(R.id.r1c28);
    r1c29 = (Button) findViewById(R.id.r1c29);
    r1c30 = (Button) findViewById(R.id.r1c30);

    r2c1 = (Button) findViewById(R.id.r2c1);
    r2c2 = (Button) findViewById(R.id.r2c2);
    r2c3 = (Button) findViewById(R.id.r2c3);
    r2c4 = (Button) findViewById(R.id.r2c4);
    r2c5 = (Button) findViewById(R.id.r2c5);
    r2c6 = (Button) findViewById(R.id.r2c6);
    r2c7 = (Button) findViewById(R.id.r2c7);
    r2c8 = (Button) findViewById(R.id.r2c8);
    r2c9 = (Button) findViewById(R.id.r2c9);
    r2c10 = (Button) findViewById(R.id.r2c10);
    r2c11 = (Button) findViewById(R.id.r2c11);
    r2c12 = (Button) findViewById(R.id.r2c12);
    r2c13 = (Button) findViewById(R.id.r2c13);
    r2c14 = (Button) findViewById(R.id.r2c14);
    r2c15 = (Button) findViewById(R.id.r2c15);
    r2c16 = (Button) findViewById(R.id.r2c16);
    r2c17 = (Button) findViewById(R.id.r2c17);
    r2c18 = (Button) findViewById(R.id.r2c18);
    r2c19 = (Button) findViewById(R.id.r2c19);
    r2c20 = (Button) findViewById(R.id.r2c20);
    r2c21 = (Button) findViewById(R.id.r2c21);
    r2c22 = (Button) findViewById(R.id.r2c22);
    r2c23 = (Button) findViewById(R.id.r2c23);
    r2c24 = (Button) findViewById(R.id.r2c24);
    r2c25 = (Button) findViewById(R.id.r2c25);
    r2c26 = (Button) findViewById(R.id.r2c26);
    r2c27 = (Button) findViewById(R.id.r2c27);
    r2c28 = (Button) findViewById(R.id.r2c28);
    r2c29 = (Button) findViewById(R.id.r2c29);
    r2c30 = (Button) findViewById(R.id.r2c30);
}

MainActivity.java:

private Button button;
private Map map;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initialize();
}

public void initialize() {
    button = (Button) findViewById(R.id.button1);

    button.setOnClickListener(new OnClickListener() {
        public void onClick(View v) {
            map = new Map(MainActivity.this);
            map.mapSize();
        }
    });

}

Once I trigger the button, I hit AndroidRuntime error.

Any guidance or solutions available to guide me through to achieve my objective?

Thank you!

score 0 · Accepted Answer

private Button button;
private Map map;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initialize();

    button.setOnClickListener(new OnClickListener() {
        public void onClick(View v) {
            map = new Map(MainActivity.this);
            map.mapSize();
        }
    });

}

public void initialize() {
    button = (Button) findViewById(R.id.button1);

}

点击监听器应该在 Oncreate 方法中。

score 0 · Accepted Answer

方法 2 似乎是一种矫枉过正，特别是当地图的大小变化时，就像你指出的那样。

所以，我会使用方法 1。你只需要调用canvas.drawRect(...)而不是canvas.drawLine(...)在告诉 rect 填充之前paint.setStyle(Paint.Style.FILL);

绘制一个单元格如下所示：

paint.setColor(Color.YELLOW);
paint.setStyle(Paint.Style.FILL); // or Paint.Style.FILL_AND_STROKE
paint.drawRect(x, y, x+width, y-height, paint);

android - Android display grid map

2 回答 2

Related

Reference